/*
  PBDoc Design System - Utilitarios e Tokens Semanticos
  (divisao de pbdoc.css - Fase 34, Plano 05)
*/

/* ══════════════════════════════════════════════════════
   Fase 34 — Tokens semânticos: badges, superfícies, utilitários
   ══════════════════════════════════════════════════════ */

/* --- Badges de status (substituem cores inline) --- */
.badge-status {
  display: inline-block;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
}
.badge-status--success { background-color: var(--badge-success-bg); color: var(--badge-success-text); }
.badge-status--danger  { background-color: var(--badge-danger-bg);  color: var(--badge-danger-text); }
.badge-status--warning { background-color: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge-status--info    { background-color: var(--badge-info-bg);    color: var(--badge-info-text); }
.badge-status--neutral { background-color: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge-status--category { background-color: var(--badge-category-bg); color: var(--badge-category-text); }
.badge-status--fixed   { min-width: 5.5rem; text-align: center; }

/* --- Botões de ação com largura mínima padronizada --- */
.btn-action    { min-width: var(--btn-action-min-width); }
.btn-action--sm { min-width: var(--btn-action-min-width-sm); font-size: 0.7rem; }

/* --- Wrappers de página --- */
.page-section {
  background: var(--page-section-bg);
  min-height: auto;
  padding: 1rem;
}
.page-content--no-sidebar { margin-left: 0; }

/* --- Abas com cor da marca --- */
.pbdoc-tabs        { border-bottom: 2px solid var(--pbdoc-primary-default); }
.pbdoc-tabs__link  { border-radius: 6px 6px 0 0; color: var(--pbdoc-primary-default); }

/* --- Spinner grande --- */
.spinner-lg { width: var(--spinner-size-lg); height: var(--spinner-size-lg); }

/* --- Dropdown de autocomplete (oculto por padrão) --- */
.autocomplete-dropdown {
  z-index: var(--dropdown-z);
  display: none;
  max-height: 250px;
  overflow-y: auto;
}
.autocomplete-dropdown.is-open { display: block; }

/* --- Painel de permissões: altura das linhas da tabela --- */
#permissions-panel .permissions-table tbody tr td,
#permissions-panel .permissions-table thead tr th {
  height: 50px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Utilitários genéricos (prefixo u-) --- */
.u-cursor-pointer { cursor: pointer; }
.u-cursor-grab    { cursor: grab; }
.u-text-xxs       { font-size: 0.6rem; }
.u-text-xs        { font-size: 0.7rem; }
.u-text-sm        { font-size: 0.75rem; }
.u-max-w-200      { max-width: 200px; }

/* --- Larguras de coluna de tabela (substituem style="width: N%") --- */
.col-w-12  { width: 12%; }
.col-w-15  { width: 15%; }
.col-w-18  { width: 18%; }
.col-w-25  { width: 25%; }
.col-w-30  { width: 30%; }
.col-w-35  { width: 35%; }
.col-w-45  { width: 45%; }
.col-w-150px { width: 150px; }

/* --- Tabela de permissões: coluna "Revogar" --- */
.permissions-table__th-revogar { padding-right: 10rem; text-align: center; }

/* --- Offcanvas da sidebar mobile (base.html) --- */
#sidebar-offcanvas .offcanvas-header {
  background-color: var(--pbdoc-primary-default);
  color: #ffffff;
}
#sidebar-offcanvas .offcanvas-body {
  background-color: var(--surface-50);
}

/* --- Cards de autenticação (login/logout/allauth) --- */
.pbdoc-auth-card         { border-radius: 12px; }
.pbdoc-auth-card__header { border-radius: 12px 12px 0 0; }

/* --- Sino de notificações --- */
.notification-bell__badge    { font-size: 0.6rem; padding: 0.25em 0.45em; }
.notification-bell__dropdown {
  width: 330px;
  max-height: 420px;
  overflow-y: auto;
  border-radius: 8px;
  z-index: 1060;
}

/* --- Logo no cabeçalho de impressão do resultado --- */
.print-header__logo { height: 45px; }

/* --- Utilitários extras --- */
.u-min-w-220 { min-width: 220px; }
.u-text-2xs  { font-size: 0.65rem; }
.u-bg-neutral { background-color: var(--badge-neutral-bg); }

/* --- Bloco de erro de tarefa em background (estilo monokai) --- */
.task-error-log {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  max-height: 400px;
  overflow-y: auto;
  background-color: var(--code-block-bg);
  color: var(--code-block-text);
  font-family: 'Fira Code', 'Cascadia Code', 'Source Code Pro', monospace;
}