/* ============================================================
   BuildFrame UI
   ------------------------------------------------------------
   Um único sistema visual para toda a aplicação. A regra é
   contenção: neutros frios, um único acento (o azul-planta da
   marca, #1F3A93 em buildframe-branding.json), hierarquia por
   peso/cor e fio de 1px — não por sombra, cor de fundo ou
   tamanho de letra.

   O laranja de segurança deixou de ser acento: ele volta a ser
   o que é numa obra, um sinal de atenção (--bf-warning).

   Estrutura do arquivo
     1. Tokens
     2. Base e tipografia
     3. Shell (sidebar, topbar, conteúdo)
     4. Cabeçalho de página
     5. Seções (.ibox → .bf-section)
     6. Botões
     7. Formulários
     8. Tabelas
     9. Status, badges, alertas
    10. Abas, dropdowns, paginação, tooltips
    11. Drawers (modais) e diálogos (SweetAlert2)
    12. Árvore (jsTree)
    13. Estados vazios e carregamento
    14. Componentes da aplicação (dashboard, equipe, projetos…)
    15. Compatibilidade Bootstrap 3 → 5 (views legadas)
    16. Telas específicas (cronograma, relatórios, fórmula)
    17. Responsivo, movimento reduzido, impressão
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
  /* neutros (frios, uma única família) */
  --bf-canvas: #ffffff;
  --bf-subtle: #f7f8fa;
  --bf-muted-bg: #f1f3f6;
  --bf-hover: #f4f6f9;
  --bf-border: #e4e7ec;
  --bf-border-strong: #cfd4dc;
  --bf-text: #171c26;
  --bf-text-2: #434b5a;
  --bf-text-3: #667085;     /* 4,9:1 sobre branco — mínimo para texto */
  --bf-text-4: #98a2b3;     /* só para ícones/placeholder decorativo */

  /* acento: azul-planta da marca */
  --bf-accent: #2b59c3;
  --bf-accent-hover: #234aa6;
  --bf-accent-active: #1f3a93;
  --bf-accent-rgb: 43, 89, 195;
  --bf-accent-tint: #eef3fd;
  --bf-accent-tint-2: #d9e3f9;
  --bf-accent-text: #2552b8;

  /* semânticos — sempre acompanhados de rótulo em texto */
  --bf-success: #157347;
  --bf-success-bg: #e9f6ef;
  --bf-success-border: #b7e1c8;
  --bf-warning: #a35200;
  --bf-warning-bg: #fdf3e6;
  --bf-warning-border: #f3d3a8;
  --bf-danger: #c0352b;
  --bf-danger-bg: #fdeeec;
  --bf-danger-border: #f4c4bf;
  --bf-neutral-bg: #f1f3f6;

  /* tipografia */
  --bf-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bf-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --bf-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bf-fs-xs: 0.75rem;     /* 12 */
  --bf-fs-sm: 0.8125rem;   /* 13 */
  --bf-fs-md: 0.875rem;    /* 14 */
  --bf-fs-lg: 1rem;        /* 16 */
  --bf-fs-xl: 1.375rem;    /* 22 — título de página */

  /* forma */
  --bf-radius-sm: 4px;
  --bf-radius: 6px;
  --bf-radius-lg: 8px;
  --bf-shadow-pop: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -6px rgba(16, 24, 40, 0.16);
  --bf-shadow-drawer: -16px 0 48px -12px rgba(16, 24, 40, 0.22);
  --bf-focus: 0 0 0 3px rgba(var(--bf-accent-rgb), 0.22);
  --bf-ease: cubic-bezier(0.2, 0, 0, 1);

  /* layout */
  --bf-sidebar-w: 232px;
  --bf-topbar-h: 52px;
  --bf-control-h: 34px;
  --bf-control-h-sm: 28px;
  --bf-page-max: 1440px;

  /* nomes da versão anterior do tema, ainda usados em estilos inline
     (Passo a Passo, Cronograma) — apontam para os tokens novos */
  --os-ink: var(--bf-text);
  --os-ink-soft: var(--bf-text-2);
  --os-paper: var(--bf-subtle);
  --os-surface: var(--bf-canvas);
  --os-line: var(--bf-border);
  --os-accent: var(--bf-accent);
  --os-accent-rgb: var(--bf-accent-rgb);
  --os-text: var(--bf-text-2);
  --os-text-muted: var(--bf-text-3);
  --os-ok: var(--bf-success);
  --os-danger: var(--bf-danger);

  /* ponte para as variáveis do Inspinia v5 (app.min.css) */
  --theme-font-family: var(--bf-font);
  --theme-font-family-secondary: var(--bf-font);
  --theme-font-sans-serif: var(--bf-font);
  --theme-body-font-size: var(--bf-fs-md);
  --theme-font-size-base: var(--bf-fs-md);
  --theme-primary: var(--bf-accent);
  --theme-primary-rgb: var(--bf-accent-rgb);
  --theme-primary-text-emphasis: var(--bf-accent-hover);
  --theme-primary-bg-subtle: var(--bf-accent-tint);
  --theme-primary-border-subtle: var(--bf-accent-tint-2);
  --theme-success: var(--bf-success);
  --theme-success-rgb: 21, 115, 71;
  --theme-danger: var(--bf-danger);
  --theme-danger-rgb: 192, 53, 43;
  --theme-warning: var(--bf-warning);
  --theme-warning-rgb: 163, 82, 0;
  --theme-link-color: var(--bf-accent-text);
  --theme-link-color-rgb: var(--bf-accent-rgb);
  --theme-link-hover-color: var(--bf-accent-hover);
  --theme-link-hover-color-rgb: 35, 74, 166;
  --theme-body-bg: var(--bf-canvas);
  --theme-body-bg-rgb: 255, 255, 255;
  --theme-body-color: var(--bf-text-2);
  --theme-body-color-rgb: 67, 75, 90;
  --theme-emphasis-color: var(--bf-text);
  --theme-secondary-color: var(--bf-text-3);
  --theme-tertiary-color: var(--bf-text-4);
  --theme-secondary-bg: var(--bf-subtle);
  --theme-tertiary-bg: var(--bf-muted-bg);
  --theme-light: var(--bf-subtle);
  --theme-light-bg-subtle: var(--bf-subtle);
  --theme-border-color: var(--bf-border);
  --theme-border-radius: var(--bf-radius);
  --theme-border-radius-sm: var(--bf-radius-sm);
  --theme-border-radius-lg: var(--bf-radius-lg);
  --theme-box-shadow: none;
  --theme-box-shadow-sm: none;
  --theme-theme-card-box-shadow: none;
  --theme-theme-card-border-color: var(--bf-border);
  --theme-table-hover-bg: var(--bf-hover);
  --theme-table-striped-bg: transparent;
  --theme-table-border-color: var(--bf-border);
  --theme-sidenav-width: var(--bf-sidebar-w);
  --theme-topbar-height: var(--bf-topbar-h);
  --theme-topbar-bg: var(--bf-canvas);
  --theme-sidenav-bg: var(--bf-subtle);
  --theme-sidenav-border-color: var(--bf-border);
  --theme-sidenav-item-color: var(--bf-text-2);
  --theme-sidenav-item-hover-color: var(--bf-text);
  --theme-sidenav-item-hover-bg: var(--bf-muted-bg);
  --theme-sidenav-item-active-color: var(--bf-accent-text);
  --theme-sidenav-item-active-bg: var(--bf-accent-tint);
  --theme-form-invalid-border-color: var(--bf-danger);
  --theme-form-valid-border-color: var(--bf-success);
}

/* ------------------------------------------------------------
   2. Base e tipografia
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--bf-font);
  font-size: var(--bf-fs-md);
  line-height: 1.5;
  color: var(--bf-text-2);
  background: var(--bf-canvas);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bf-font);
  color: var(--bf-text);
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.3;
}
h1 { font-size: var(--bf-fs-xl); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: var(--bf-fs-lg); }
h5 { font-size: var(--bf-fs-md); }
h6 { font-size: var(--bf-fs-sm); }

a {
  color: var(--bf-accent-text);
  text-decoration: none;
  transition: color 0.12s var(--bf-ease);
}
a:hover { color: var(--bf-accent-hover); }

small, .small { font-size: var(--bf-fs-xs); }
.text-muted { color: var(--bf-text-3) !important; }
.text-primary { color: var(--bf-accent-text) !important; }
.text-danger { color: var(--bf-danger) !important; }
.text-success { color: var(--bf-success) !important; }
.text-warning { color: var(--bf-warning) !important; }
.fw-semibold { font-weight: 600 !important; }

/* números: alinhamento tabular em todo lugar onde há dinheiro/quantidade */
table, .bf-num, .bf-metric-value, input[type="number"] {
  font-variant-numeric: tabular-nums;
}
.bf-mono, code, kbd {
  font-family: var(--bf-font-mono);
  font-size: 0.92em;
}
code { color: var(--bf-text); background: var(--bf-muted-bg); padding: 0.1em 0.35em; border-radius: var(--bf-radius-sm); }

hr { border-color: var(--bf-border); opacity: 1; }

::selection { background: var(--bf-accent-tint-2); color: var(--bf-text); }

:focus-visible {
  outline: 2px solid var(--bf-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. Shell
   ------------------------------------------------------------ */
.wrapper { background: var(--bf-canvas); }

/* — Sidebar — */
.sidenav-menu {
  background: var(--bf-subtle);
  border-inline-end: 1px solid var(--bf-border);
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.sidenav-menu > .logo {
  display: flex;
  align-items: center;
  height: var(--bf-topbar-h);
  padding: 0 1rem;
  flex: 0 0 auto;
}
.sidenav-menu > .logo img { height: 22px !important; width: auto; }
.sidenav-menu .logo-sm img { height: 24px !important; width: 24px !important; }
.sidenav-menu [data-simplebar],
.sidenav-menu .scrollbar {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}

/* Contexto do projeto (troca de projeto) — o "workspace switcher" */
.bf-context {
  margin: 0.25rem 0.75rem 0.75rem;
}
.bf-context-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  background: var(--bf-canvas);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  color: var(--bf-text);
  text-align: left;
  transition: border-color 0.12s var(--bf-ease), background-color 0.12s var(--bf-ease);
}
.bf-context-btn:hover { border-color: var(--bf-border-strong); color: var(--bf-text); }
.bf-context-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bf-radius-sm);
  background: var(--bf-accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--bf-fs-sm);
  letter-spacing: 0;
}
.bf-context-mark.is-empty { background: var(--bf-muted-bg); color: var(--bf-text-3); }
.bf-context-mark.is-exemplo { background: var(--bf-warning-bg); color: var(--bf-warning); box-shadow: inset 0 0 0 1px var(--bf-warning-border); }

/* Aviso do projeto de exemplo (topo de todas as páginas enquanto ele é o projeto atual) */
.bf-exemplo-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--bf-warning-border);
  border-radius: 8px;
  background: var(--bf-warning-bg);
  color: var(--bf-text);
  font-size: var(--bf-fs-sm);
}
.bf-exemplo-banner > .ti { color: var(--bf-warning); font-size: 1.25rem; flex: none; }
.bf-exemplo-banner p { margin: 0; flex: 1 1 auto; min-width: 0; }
.bf-exemplo-banner strong { color: var(--bf-warning); margin-right: 0.25rem; }
.bf-exemplo-banner .btn { flex: none; }
@media (max-width: 575.98px) {
  .bf-exemplo-banner { flex-wrap: wrap; }
  .bf-exemplo-banner .btn { margin-left: 2rem; }
}
.bf-context-text { min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.bf-context-label {
  display: block;
  font-size: 11px;
  color: var(--bf-text-3);
}
.bf-context-name {
  display: block;
  font-size: var(--bf-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-context-btn .ti { color: var(--bf-text-4); font-size: 1rem; }

/* Navegação */
.side-nav {
  padding: 0 0.5rem 1rem;
  margin: 0;
  list-style: none;
}
.side-nav .side-nav-title {
  padding: 1rem 0.625rem 0.375rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bf-text-3);
  text-transform: none;
}
.side-nav .side-nav-item { margin: 0; }
.sidenav-menu .side-nav .side-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 32px;
  padding: 0.3rem 0.625rem;
  margin: 1px 0;
  border-radius: var(--bf-radius);
  font-size: var(--bf-fs-md);
  font-weight: 500;
  color: var(--bf-text-2);
  background: transparent;
  transition: background-color 0.12s var(--bf-ease), color 0.12s var(--bf-ease);
}
.sidenav-menu .side-nav .side-nav-link:hover {
  color: var(--bf-text);
  background: var(--bf-muted-bg);
}
.sidenav-menu .side-nav .side-nav-link .menu-icon {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  color: var(--bf-text-3);
  font-size: 1.0625rem;
  transition: color 0.12s var(--bf-ease);
}
.sidenav-menu .side-nav .side-nav-link .menu-icon i { color: inherit; }
.sidenav-menu .side-nav .side-nav-link.active,
.sidenav-menu .side-nav .side-nav-item.active > .side-nav-link {
  color: var(--bf-accent-text) !important;
  background: var(--bf-accent-tint);
  font-weight: 600;
}
.sidenav-menu .side-nav .side-nav-link.active .menu-icon { color: var(--bf-accent); }
.sidenav-menu .side-nav .side-nav-link.disabled {
  color: var(--bf-text-4);
  pointer-events: none;
}
.sidenav-menu .side-nav .side-nav-link.disabled .menu-icon { color: var(--bf-text-4); }
.sidenav-menu .side-nav .side-nav-link .bf-nav-lock {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--bf-text-4);
}

.bf-sidebar-foot {
  flex: 0 0 auto;
  padding: 0.5rem;
  border-top: 1px solid var(--bf-border);
}
.bf-sidebar-foot .side-nav { padding: 0; }

/* Os botões de "hover"/"offcanvas" do template seguem existindo para o app.js,
   só sem a aparência herdada */
.sidenav-menu .button-on-hover,
.sidenav-menu .button-close-offcanvas {
  display: none;
}
html[data-sidenav-size="offcanvas"] .sidenav-menu .button-close-offcanvas {
  display: inline-flex;
  position: absolute;
  top: 10px;
  right: 10px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--bf-text-3);
  border-radius: var(--bf-radius);
}

/* — Topbar — */
.app-topbar {
  height: var(--bf-topbar-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--bf-border);
  box-shadow: none;
}
.app-topbar .topbar-menu {
  height: 100%;
  padding: 0 1.5rem;
  gap: 1rem;
}
.app-topbar .logo-topbar { display: none; }
.bf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--bf-radius);
  background: transparent;
  color: var(--bf-text-3);
  font-size: 1.125rem;
  transition: background-color 0.12s var(--bf-ease), color 0.12s var(--bf-ease);
}
.bf-icon-btn:hover { background: var(--bf-muted-bg); color: var(--bf-text); }
.bf-icon-btn:active { background: var(--bf-border); }

.bf-topbar-context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-3);
}
.bf-topbar-context strong {
  color: var(--bf-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-topbar-context .bf-sep { color: var(--bf-border-strong); }

.bf-lang {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
  background: var(--bf-subtle);
}
.bf-lang a {
  padding: 0.125rem 0.5rem;
  font-size: var(--bf-fs-xs);
  font-weight: 600;
  color: var(--bf-text-3);
  border-radius: var(--bf-radius-sm);
}
.bf-lang a:hover { color: var(--bf-text); }
.bf-lang a[aria-current="true"] {
  background: var(--bf-canvas);
  color: var(--bf-text);
  box-shadow: 0 0 0 1px var(--bf-border);
}

.bf-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem 0.25rem 0.25rem;
  border-radius: var(--bf-radius);
  color: var(--bf-text);
  font-size: var(--bf-fs-sm);
  font-weight: 500;
}
.bf-user-btn:hover { background: var(--bf-muted-bg); color: var(--bf-text); }
.bf-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bf-muted-bg);
  border: 1px solid var(--bf-border);
  color: var(--bf-text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bf-avatar-lg { width: 40px; height: 40px; font-size: var(--bf-fs-sm); }

/* — Conteúdo — */
.content-page {
  background: var(--bf-canvas);
  padding: 0;
  min-height: calc(100vh - var(--bf-topbar-h));
}
.content-page > .container-fluid {
  width: 100%;
  max-width: var(--bf-page-max);
  padding: 0 2rem 3rem;
  margin: 0;
}
/* as views legadas embrulham tudo em .row (margem negativa) e .wrapper-content */
.content-page > .container-fluid > .row.wrapper.page-heading { margin-left: 0; margin-right: 0; }
.wrapper-content { padding: 0; }
.animated, .fadeInRight, .fadeInUp, .fadeIn { animation: none !important; }

.footer { display: none; }

/* ------------------------------------------------------------
   4. Cabeçalho de página
   Padrão novo (.bf-page-header) e o legado (.page-heading, 37
   views): breadcrumb em cima, título, descrição, ações à direita.
   ------------------------------------------------------------ */
.bf-page-header,
.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem 0 1.25rem;
  margin: 0 0 1.5rem !important;
  background: transparent !important;
  border-bottom: 1px solid var(--bf-border) !important;
}
.page-heading > [class*="col-"] {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  padding: 0;
}
.page-heading > [class*="col-"]:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-heading > [class*="col-"]:last-child:not(:first-child) {
  flex: 0 0 auto;
}
.bf-page-title,
.page-heading h2 {
  order: 2;
  margin: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-fs-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--bf-text);
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.bf-page-desc {
  order: 3;
  margin: 0.25rem 0 0;
  max-width: 72ch;
  font-size: var(--bf-fs-md);
  color: var(--bf-text-3);
}
.bf-page-meta {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-3);
}
.bf-page-meta strong { color: var(--bf-text-2); font-weight: 500; }

/* breadcrumb */
.breadcrumb,
.page-heading .breadcrumb {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0 0 0.375rem;
  background: transparent;
  font-size: var(--bf-fs-sm);
  list-style: none;
}
/* as views usam <li> puro (convenção BS3), não .breadcrumb-item */
.breadcrumb li { display: inline-flex; align-items: center; color: var(--bf-text-3); }
.breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 0.5rem;
  border-top: 1.5px solid var(--bf-text-4);
  border-right: 1.5px solid var(--bf-text-4);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { display: none; }
.breadcrumb a { color: var(--bf-text-3); }
.breadcrumb a[href]:hover { color: var(--bf-text); }
/* migalhas sem href são categorias, não links */
.breadcrumb a:not([href]) { cursor: default; pointer-events: none; }
.breadcrumb li.active,
.breadcrumb strong { color: var(--bf-text-2); font-weight: 500; }

/* ações do cabeçalho */
.bf-page-actions,
.title-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0 !important;
  text-align: right;
}
.title-action > img,
.bf-page-header img[src*="ajax-loader"],
.page-heading img[src*="ajax-loader"] {
  order: -1;
  float: none !important;
  width: 16px;
  height: 16px;
  margin: 0 !important;
}

/* sub-navegação de página */
.bf-subnav {
  display: flex;
  gap: 1.25rem;
  margin: -1.5rem 0 1.5rem;
  border-bottom: 1px solid var(--bf-border);
}
.bf-subnav a {
  padding: 0.625rem 0;
  font-size: var(--bf-fs-md);
  font-weight: 500;
  color: var(--bf-text-3);
  box-shadow: inset 0 -2px 0 transparent;
}
.bf-subnav a:hover { color: var(--bf-text); }
.bf-subnav a.active { color: var(--bf-text); box-shadow: inset 0 -2px 0 var(--bf-accent); }

/* ------------------------------------------------------------
   5. Seções
   .ibox (233 usos) vira uma seção plana: fio de 1px, cabeçalho
   sem faixa de cor, título em caixa normal.
   ------------------------------------------------------------ */
.bf-section,
.ibox,
.panel {
  background: var(--bf-canvas);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  margin-bottom: 1.5rem;
  overflow: visible;
  box-shadow: none;
}
.ibox.float-e-margins { margin-bottom: 1.5rem; }

.bf-section-head,
.ibox-title,
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  min-height: 52px;
  padding: 0.625rem 1rem 0.625rem 1.25rem;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bf-border) !important;
  border-radius: var(--bf-radius-lg) var(--bf-radius-lg) 0 0;
}
.bf-section-title,
.ibox-title h5,
.panel-heading {
  margin: 0;
  min-width: 0;
  font-size: var(--bf-fs-md);
  font-weight: 600;
  color: var(--bf-text) !important;
  text-transform: none;
  letter-spacing: 0;
}
.bf-section-sub { font-size: var(--bf-fs-sm); color: var(--bf-text-3); font-weight: 400; }
.ibox-title small,
.ibox-title .navbar-right {
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-3);
  margin: 0;
}
.ibox-title small i { font-style: normal; }

.bf-section-tools,
.ibox-title .ibox-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-left: auto;
  float: none;
}
.ibox-title .ibox-tools .btn,
.ibox-title .ibox-tools a.btn { margin-bottom: 0 !important; }
/* o chevron de recolher vira um botão de ícone discreto */
.ibox-title .ibox-tools a.collapse-link,
.ibox-title .ibox-tools a.close-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bf-radius);
  color: var(--bf-text-3) !important;
  cursor: pointer;
}
.ibox-title .ibox-tools a.collapse-link:hover { background: var(--bf-muted-bg); color: var(--bf-text) !important; }

.bf-section-body,
.ibox-content,
.panel-body {
  padding: 1.25rem;
  background: transparent;
  border: 0;
  border-radius: 0 0 var(--bf-radius-lg) var(--bf-radius-lg);
}
/* .ibox-content sem .ibox-title acima (painéis carregados por ajax) */
.ibox > .ibox-content:first-child { border-radius: var(--bf-radius-lg); }
.ibox-content:empty { padding: 0; min-height: 0; }
.ibox:has(> .ibox-content:only-child:empty) { border-style: dashed; min-height: 96px; }

/* tabela encostando nas bordas da seção: sem padding duplo */
.bf-section-body.is-flush,
.ibox-content.is-flush { padding: 0; }
.bf-section-body.is-flush > .table,
.bf-section-body.is-flush > .table-responsive > .table { margin: 0; }
.bf-section-body.is-flush > .table > :not(caption) > * > *:first-child,
.bf-section-body.is-flush > .table-responsive > .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.bf-section-body.is-flush > .table > :not(caption) > * > *:last-child,
.bf-section-body.is-flush > .table-responsive > .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }
.bf-section-body.is-flush > .table > tbody > tr:last-child > *,
.bf-section-body.is-flush > .table-responsive > .table > tbody > tr:last-child > * { border-bottom: 0; }

.bf-section-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--bf-border);
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-3);
}

/* separadores do tema antigo */
.hr-line-dashed {
  border-top: 1px solid var(--bf-border);
  margin: 1.25rem 0;
  background: none;
  height: 0;
}

/* card do Bootstrap 5, quando usado diretamente */
.card {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: none;
}
.card-header { background: transparent; border-bottom: 1px solid var(--bf-border); }

/* ------------------------------------------------------------
   6. Botões
   Hierarquia: primário (acento sólido, 1 por contexto),
   secundário (branco com fio), fantasma (só texto), perigo.
   Cores "de estado" (.btn-success, .btn-outline-*) não são
   hierarquia — são remapeadas para o secundário.
   ------------------------------------------------------------ */
.btn {
  --theme-btn-padding-x: 0.75rem;
  --theme-btn-padding-y: 0;
  --theme-btn-font-size: var(--bf-fs-sm);
  --theme-btn-font-weight: 500;
  --theme-btn-border-radius: var(--bf-radius);
  --theme-btn-box-shadow: none;
  --theme-btn-focus-box-shadow: var(--bf-focus);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: var(--bf-control-h);
  padding: 0 0.75rem;
  font-family: var(--bf-font);
  font-size: var(--bf-fs-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--bf-radius);
  box-shadow: none;
  transition: background-color 0.12s var(--bf-ease), border-color 0.12s var(--bf-ease), color 0.12s var(--bf-ease), box-shadow 0.12s var(--bf-ease);
}
.btn:active { transform: translateY(0.5px); }
.btn i.fa, .btn i.ti, a.btn i.fa, a.btn i.ti { margin: 0; font-size: 0.95em; }
.btn .ti { font-size: 1.05em; }

.btn-sm, .btn-group-sm > .btn {
  min-height: 30px;
  padding: 0 0.625rem;
  font-size: var(--bf-fs-sm);
}
.btn-xs {
  min-height: var(--bf-control-h-sm);
  padding: 0 0.5rem;
  font-size: var(--bf-fs-xs);
  gap: 0.25rem;
  border-radius: var(--bf-radius);
}
.btn-lg { min-height: 40px; padding: 0 1rem; font-size: var(--bf-fs-md); }

/* primário */
.btn-primary {
  --theme-btn-color: #fff;
  --theme-btn-bg: var(--bf-accent);
  --theme-btn-border-color: var(--bf-accent);
  --theme-btn-hover-color: #fff;
  --theme-btn-hover-bg: var(--bf-accent-hover);
  --theme-btn-hover-border-color: var(--bf-accent-hover);
  --theme-btn-active-color: #fff;
  --theme-btn-active-bg: var(--bf-accent-active);
  --theme-btn-active-border-color: var(--bf-accent-active);
  --theme-btn-disabled-color: #fff;
  --theme-btn-disabled-bg: var(--bf-accent);
  --theme-btn-disabled-border-color: var(--bf-accent);
  --theme-btn-focus-shadow-rgb: var(--bf-accent-rgb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(16, 24, 40, 0.12);
}

/* secundário — inclui todos os "botões de cor" legados */
.btn-white,
.btn-default,
.btn-secondary,
.btn-light,
.btn-success,
.btn-info,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-warning {
  --theme-btn-color: var(--bf-text);
  --theme-btn-bg: var(--bf-canvas);
  --theme-btn-border-color: var(--bf-border-strong);
  --theme-btn-hover-color: var(--bf-text);
  --theme-btn-hover-bg: var(--bf-subtle);
  --theme-btn-hover-border-color: var(--bf-border-strong);
  --theme-btn-active-color: var(--bf-text);
  --theme-btn-active-bg: var(--bf-muted-bg);
  --theme-btn-active-border-color: var(--bf-border-strong);
  --theme-btn-disabled-color: var(--bf-text-4);
  --theme-btn-disabled-bg: var(--bf-canvas);
  --theme-btn-disabled-border-color: var(--bf-border);
  --theme-btn-focus-shadow-rgb: var(--bf-accent-rgb);
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
}
.btn-white i, .btn-default i, .btn-outline-primary i, .btn-outline-success i,
.btn-success i, .btn-secondary i, .btn-light i { color: var(--bf-text-3); }

/* perigo — discreto até o momento da confirmação */
.btn-danger,
.btn-outline-danger {
  --theme-btn-color: var(--bf-danger);
  --theme-btn-bg: var(--bf-canvas);
  --theme-btn-border-color: var(--bf-border-strong);
  --theme-btn-hover-color: var(--bf-danger);
  --theme-btn-hover-bg: var(--bf-danger-bg);
  --theme-btn-hover-border-color: var(--bf-danger-border);
  --theme-btn-active-color: var(--bf-danger);
  --theme-btn-active-bg: var(--bf-danger-bg);
  --theme-btn-active-border-color: var(--bf-danger);
  --theme-btn-disabled-color: var(--bf-text-4);
  --theme-btn-disabled-bg: var(--bf-canvas);
  --theme-btn-disabled-border-color: var(--bf-border);
  --theme-btn-focus-shadow-rgb: 192, 53, 43;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
}
.btn-danger-solid {
  --theme-btn-color: #fff;
  --theme-btn-bg: var(--bf-danger);
  --theme-btn-border-color: var(--bf-danger);
  --theme-btn-hover-color: #fff;
  --theme-btn-hover-bg: #a52b22;
  --theme-btn-hover-border-color: #a52b22;
}

/* fantasma */
.bf-btn-ghost,
.btn-ghost {
  --theme-btn-color: var(--bf-text-2);
  --theme-btn-bg: transparent;
  --theme-btn-border-color: transparent;
  --theme-btn-hover-color: var(--bf-text);
  --theme-btn-hover-bg: var(--bf-muted-bg);
  --theme-btn-hover-border-color: transparent;
  --theme-btn-active-bg: var(--bf-border);
  box-shadow: none;
}
.btn-icon,
.btn.bf-btn-icon {
  width: var(--bf-control-h);
  padding: 0;
}
.btn-sm.bf-btn-icon { width: 30px; }
.btn-xs.bf-btn-icon { width: var(--bf-control-h-sm); }

.btn:focus-visible,
.btn-link:not(.btn):focus-visible {
  outline: none;
  box-shadow: var(--bf-focus) !important;
}
.btn:disabled, .btn.disabled { opacity: 0.55; }

.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group { box-shadow: none; }

/* .btn-link sozinho: link discreto (usado em ~25 listas para nomes
   de Tarefa/Insumo/Lançamento, o texto mais lido do sistema) */
.btn-link:not(.btn) {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  font: inherit;
  color: var(--bf-text);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.btn-link:not(.btn):hover,
.btn-link:not(.btn):focus {
  color: var(--bf-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------
   7. Formulários
   Rótulo em cima, campo embaixo, ajuda/erro abaixo do campo.
   Inclui .text-box (saída do @Html.EditorFor, sem classe BS).
   ------------------------------------------------------------ */
.form-control,
.form-select,
.text-box,
.content-page .form-group select,
.content-page .form-group input[type="text"],
.content-page .form-group input[type="email"],
.content-page .form-group input[type="password"],
.content-page .form-group input[type="number"],
.content-page .form-group input[type="date"],
.content-page .form-group input:not([type]),
.content-page .form-group textarea,
.modal-body select,
.modal-body textarea,
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="number"],
.modal-body input[type="password"],
.modal-body input[type="date"],
.modal-body input:not([type]) {
  display: block;
  width: 100%;
  min-height: var(--bf-control-h);
  padding: 0.375rem 0.625rem;
  font-family: var(--bf-font);
  font-size: var(--bf-fs-md);
  line-height: 1.4;
  color: var(--bf-text);
  background-color: var(--bf-canvas);
  border: 1px solid var(--bf-border-strong);
  border-radius: var(--bf-radius);
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
  transition: border-color 0.12s var(--bf-ease), box-shadow 0.12s var(--bf-ease);
}
textarea.form-control,
.content-page .form-group textarea,
.modal-body textarea { min-height: 84px; resize: vertical; }
select.form-control,
.form-select,
.content-page .form-group select,
.modal-body select {
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 14px;
}
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 0.625rem; }

.form-control::placeholder,
.text-box::placeholder,
input::placeholder,
textarea::placeholder { color: var(--bf-text-4); opacity: 1; }

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled),
.text-box:hover:not(:focus) { border-color: #b4bcc8; }

.form-control:focus,
.form-select:focus,
.text-box:focus,
.content-page .form-group select:focus,
.content-page .form-group input:focus,
.content-page .form-group textarea:focus,
.modal-body select:focus,
.modal-body textarea:focus,
.modal-body input:focus {
  outline: none;
  border-color: var(--bf-accent);
  box-shadow: var(--bf-focus);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.text-box:disabled,
.text-box[readonly] {
  background-color: var(--bf-subtle);
  color: var(--bf-text-3);
  border-color: var(--bf-border);
  box-shadow: none;
  cursor: not-allowed;
}
.form-control-sm, .input-sm { min-height: 30px; font-size: var(--bf-fs-sm); padding: 0.25rem 0.5rem; }

/* rótulos */
.form-label,
.control-label,
.content-page .form-group > label,
.modal-body .form-group > label,
.bf-field > label {
  display: block;
  margin: 0 0 0.375rem;
  padding: 0;
  font-size: var(--bf-fs-sm);
  font-weight: 500;
  color: var(--bf-text);
  text-align: left !important;
  text-transform: none;
  letter-spacing: 0;
  float: none;
}
.bf-required::after,
label.required::after { content: " *"; color: var(--bf-danger); }
.form-text,
.bf-help,
.help-block {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--bf-fs-xs);
  color: var(--bf-text-3);
}

/* validação do ASP.NET (asp-validation-for / ValidationMessageFor) */
.field-validation-error,
.text-danger.field-validation-error,
.invalid-feedback {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
  font-size: var(--bf-fs-xs);
  font-weight: 500;
  color: var(--bf-danger) !important;
}
.field-validation-error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bf-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.field-validation-valid { display: none; }
.input-validation-error,
.form-control.is-invalid {
  border-color: var(--bf-danger) !important;
}
.input-validation-error:focus,
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 53, 43, 0.18) !important; }
.validation-summary-errors {
  flex: 1 1 100%;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  font-size: var(--bf-fs-sm);
  color: var(--bf-danger);
  background: var(--bf-danger-bg);
  border: 1px solid var(--bf-danger-border);
  border-radius: var(--bf-radius);
}
.validation-summary-errors ul { margin: 0; padding-left: 1rem; }
.validation-summary-valid { display: none; }

/* grupos de campo */
.form-group,
.form-horizontal .form-group,
.bf-field { margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }

/* O grid horizontal do BS3 (.control-label.col-md-2 + .col-md-10)
   nunca respondeu à largura real do container: vira empilhado. */
.form-horizontal .form-group,
.os-profile-form .form-group {
  display: block;
}
.form-horizontal .form-group > [class*="col-"],
.os-profile-form .form-group > [class*="col-"] {
  float: none;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Grade de formulário: larguras sensatas, não tudo a 100% */
.bf-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem 1rem;
}
.bf-form-grid > * { grid-column: span 6; margin-bottom: 0; }
.bf-form-grid > .bf-span-2 { grid-column: span 2; }
.bf-form-grid > .bf-span-3 { grid-column: span 3; }
.bf-form-grid > .bf-span-4 { grid-column: span 4; }

/* Seção de formulário em duas colunas: título/explicação à esquerda */
.bf-form-section {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 640px);
  gap: 1rem 3rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--bf-border);
}
.bf-form-section:first-of-type { padding-top: 0.25rem; }
.bf-form-section:last-of-type { border-bottom: 0; }
.bf-form-section-title { margin: 0 0 0.25rem; font-size: var(--bf-fs-md); font-weight: 600; color: var(--bf-text); }
.bf-form-section-desc { margin: 0; font-size: var(--bf-fs-sm); color: var(--bf-text-3); max-width: 36ch; }

.bf-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 0 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--bf-border);
}

/* input-group (datas com ícone de calendário) */
.input-group { flex-wrap: nowrap; border-radius: var(--bf-radius); }
.input-group > .form-control,
.input-group > .text-box { min-width: 0; flex: 1 1 auto; width: 1%; }
.input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
.input-group-text,
.input-group-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 0.625rem;
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-3);
  background: var(--bf-subtle);
  border: 1px solid var(--bf-border-strong);
  border-radius: var(--bf-radius);
}
.input-group > .form-control:focus { z-index: 3; }

/* checkbox / radio */
.form-check { min-height: 24px; padding-left: 1.625rem; display: flex; align-items: center; gap: 0.5rem; }
.form-check .form-check-input { margin-left: -1.625rem; margin-top: 0; float: none; }
.form-check-input,
input[type="checkbox"]:not(.form-check-input):not(.jstree-checkbox) {
  width: 16px;
  height: 16px;
  border: 1px solid var(--bf-border-strong);
  border-radius: var(--bf-radius-sm);
  accent-color: var(--bf-accent);
  cursor: pointer;
}
.form-check-input:checked { background-color: var(--bf-accent); border-color: var(--bf-accent); }
.form-check-input:focus { box-shadow: var(--bf-focus); border-color: var(--bf-accent); }
.form-check-label { font-size: var(--bf-fs-md); color: var(--bf-text-2); cursor: pointer; }
input[type="radio"] { accent-color: var(--bf-accent); }

/* Barra de filtros: controles alinhados numa linha só */
.bf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.bf-toolbar .form-control,
.bf-toolbar .form-select,
.bf-toolbar input,
.bf-toolbar select { width: auto; min-width: 160px; min-height: 32px; font-size: var(--bf-fs-sm); }
.bf-toolbar .bf-spacer { flex: 1 1 auto; }
.bf-search {
  position: relative;
  flex: 0 1 280px;
}
.bf-search .ti {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bf-text-4);
  pointer-events: none;
}
.bf-search input { padding-left: 2rem !important; width: 100% !important; }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: var(--bf-control-h);
  border: 1px solid var(--bf-border-strong);
  border-radius: var(--bf-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; color: var(--bf-text); }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--bf-accent); box-shadow: var(--bf-focus); }
.select2-dropdown { border-color: var(--bf-border); border-radius: var(--bf-radius); box-shadow: var(--bf-shadow-pop); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--bf-accent-tint); color: var(--bf-text); }

/* ------------------------------------------------------------
   8. Tabelas
   Sans tabular (não monoespaçada), 13px, fio só entre linhas,
   cabeçalho discreto, hover sutil. As views trazem font-size
   inline (8px–11px) em dezenas de células: normalizado aqui,
   uma escala só para toda a aplicação.
   ------------------------------------------------------------ */
.table {
  --theme-table-bg: transparent;
  --theme-table-color: var(--bf-text-2);
  --theme-table-border-color: var(--bf-border);
  --theme-table-striped-bg: transparent;
  --theme-table-hover-bg: var(--bf-hover);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--bf-hover);
  width: 100%;
  margin-bottom: 0;
  font-family: var(--bf-font);
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-2);
  border-collapse: collapse;
  vertical-align: middle;
}
.table > :not(caption) > * > * {
  padding: 0.5625rem 0.75rem;
  font-size: var(--bf-fs-sm) !important;
  line-height: 1.45;
  border-bottom: 1px solid var(--bf-border);
  border-top: 0;
  background-color: transparent;
  box-shadow: none !important;
  vertical-align: middle;
}
.table > thead > tr > th,
.table > tbody > tr:first-child > th,
.table > tr > th,
.table th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--bf-fs-xs) !important;
  font-weight: 500;
  color: var(--bf-text-3);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  background: var(--bf-subtle);
  border-bottom: 1px solid var(--bf-border);
}
.table th a, .table th a.text-navy { color: inherit !important; }
.table > tbody > tr > td { color: var(--bf-text-2); }
.table b, .table strong { color: var(--bf-text); font-weight: 600; }
.table small { font-size: var(--bf-fs-xs) !important; color: var(--bf-text-3); }

/* zebra desligada: compete com a estrutura real (grupo × item) */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: transparent;
  --theme-table-bg-type: transparent;
  background-color: transparent;
}
/* bordas verticais desligadas: alinhamento faz o papel da grade */
.table-bordered > :not(caption) > * { border-width: 0; }
.table-bordered > :not(caption) > * > * { border-left: 0; border-right: 0; border-top: 0; }
.table-bordered { border: 0; }

.table-hover > tbody > tr:hover > * {
  background-color: var(--bf-hover) !important;
  --bs-table-accent-bg: var(--bf-hover);
}

/* densidade */
.table-condensed > :not(caption) > * > *,
.table-sm > :not(caption) > * > * { padding: 0.375rem 0.625rem; }

/* números alinham à direita onde as views marcaram assim */
.table td[style*="text-align:right"],
.table td[style*="text-align: right"],
.table .text-end,
.table .bf-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-responsive {
  border-radius: inherit;
  -webkit-overflow-scrolling: touch;
}

/* linha de total */
.table tfoot td,
.table tr.bf-total > td {
  font-weight: 600;
  color: var(--bf-text);
  background: var(--bf-subtle);
  border-top: 1px solid var(--bf-border-strong);
}

/* ações de linha: aparecem com mais contraste no hover da linha */
.bf-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  white-space: nowrap;
}
.bf-row-actions .btn { opacity: 0.9; }
tr:hover .bf-row-actions .btn { opacity: 1; }
.bf-cell-primary { color: var(--bf-text) !important; font-weight: 500; }
.bf-cell-secondary { display: block; font-size: var(--bf-fs-xs); color: var(--bf-text-3); }
td.bf-col-actions, th.bf-col-actions { width: 1%; text-align: right; }

/* indicador de ordenação */
.bf-sort { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; }
.bf-sort::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--bf-text-4);
  opacity: 0;
}
.bf-sort:hover::after { opacity: 1; }
.bf-sort[aria-sort="ascending"]::after { opacity: 1; border-top: 0; border-bottom: 4px solid var(--bf-text-2); }
.bf-sort[aria-sort="descending"]::after { opacity: 1; border-top-color: var(--bf-text-2); }

/* Listas agrupadas: linha de grupo (a que tem <td colspan>) vira
   faixa de seção; item ganha recuo. 19 ocorrências em 8 partials
   (Composição, Tarefas, Insumos, Saldo, Apropriar…). */
.table:not(.invoice-table) tr:has(> td[colspan]):not(.row-vazia) > td {
  background: var(--bf-subtle) !important;
  color: var(--bf-text);
  font-weight: 600;
  border-top: 1px solid var(--bf-border);
}
.table:not(.invoice-table) tr:has(> td[colspan]):not(.row-vazia) > td[colspan] b {
  color: var(--bf-text);
  font-variant-numeric: tabular-nums;
}
.table:not(.invoice-table):has(td[colspan]) tr:not(:has(> td[colspan])):not(.row-vazia) > td:first-child {
  padding-left: 1.5rem;
}
@media (min-width: 992px) {
  .table:not(.invoice-table):has(td[colspan]) tr:not(:has(> td[colspan])) > td:not(:first-child) {
    white-space: nowrap;
  }
}
.table:not(.invoice-table):has(td[colspan]).table-hover tr:has(> td[colspan]):hover > td {
  background: var(--bf-subtle) !important;
}

/* ------------------------------------------------------------
   9. Status, badges, alertas
   Cor nunca sozinha: todo status tem rótulo em texto.
   ------------------------------------------------------------ */
.bf-badge,
.badge,
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 22px;
  padding: 0 0.5rem;
  font-family: var(--bf-font);
  font-size: var(--bf-fs-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--bf-text-2);
  background: var(--bf-neutral-bg);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-sm);
}
.bf-badge--success, .label.lazur-bg, .badge.bg-success {
  color: var(--bf-success) !important;
  background: var(--bf-success-bg) !important;
  border-color: var(--bf-success-border) !important;
}
.bf-badge--warning, .badge.bg-warning {
  color: var(--bf-warning) !important;
  background: var(--bf-warning-bg) !important;
  border-color: var(--bf-warning-border) !important;
}
.bf-badge--danger, .label.red-bg, .badge.bg-danger {
  color: var(--bf-danger) !important;
  background: var(--bf-danger-bg) !important;
  border-color: var(--bf-danger-border) !important;
}
.bf-badge--info, .label.navy-bg, .badge.bg-primary {
  color: var(--bf-accent-text) !important;
  background: var(--bf-accent-tint) !important;
  border-color: var(--bf-accent-tint-2) !important;
}
.bf-badge-icon { font-size: 0.875rem; line-height: 1; }

/* alertas */
.alert {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  font-size: var(--bf-fs-sm);
  border-radius: var(--bf-radius);
  border: 1px solid var(--bf-border);
  background: var(--bf-subtle);
  color: var(--bf-text-2);
}
.alert-info, .alert-primary { background: var(--bf-accent-tint); border-color: var(--bf-accent-tint-2); color: var(--bf-text); }
.alert-success { background: var(--bf-success-bg); border-color: var(--bf-success-border); color: #0f5132; }
.alert-warning { background: var(--bf-warning-bg); border-color: var(--bf-warning-border); color: #6b3700; }
.alert-danger { background: var(--bf-danger-bg); border-color: var(--bf-danger-border); color: #8a241d; }
.alert .close, .alert .btn-close { margin-left: auto; }

/* ------------------------------------------------------------
   10. Abas, dropdowns, paginação, tooltips
   ------------------------------------------------------------ */
.nav-tabs {
  gap: 1.25rem;
  border-bottom: 1px solid var(--bf-border);
  flex-wrap: wrap;
}
.nav-tabs .nav-link,
.nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0;
  margin-bottom: -1px;
  font-size: var(--bf-fs-md);
  font-weight: 500;
  color: var(--bf-text-3);
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.12s var(--bf-ease), box-shadow 0.12s var(--bf-ease);
}
.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover { color: var(--bf-text); box-shadow: inset 0 -2px 0 var(--bf-border-strong); }
.nav-tabs .nav-link.active,
.nav-tabs > li.active > a,
.tabs-container .nav-tabs .nav-link.active {
  color: var(--bf-text);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--bf-accent);
}
.tabs-container .tab-content,
.tabs-container .panel-body { border: 0; padding: 1.25rem 0 0; background: transparent; }

.nav-pills .nav-link { color: var(--bf-text-2); border-radius: var(--bf-radius); font-weight: 500; font-size: var(--bf-fs-sm); }
.nav-pills .nav-link.active { background: var(--bf-accent-tint); color: var(--bf-accent-text); }

.dropdown-menu {
  --theme-dropdown-link-active-bg: var(--bf-accent-tint);
  min-width: 13rem;
  padding: 0.25rem;
  font-size: var(--bf-fs-sm);
  background: var(--bf-canvas);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-pop);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--bf-radius-sm);
  color: var(--bf-text-2);
  font-weight: 500;
}
.dropdown-item i { color: var(--bf-text-3); font-size: 1rem; width: 16px; text-align: center; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bf-muted-bg); color: var(--bf-text); }
.dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--bf-danger) !important; }
.dropdown-item.text-danger:hover { background: var(--bf-danger-bg); }
.dropdown-divider { margin: 0.25rem -0.25rem; border-color: var(--bf-border); }
.bf-dropdown-name { display: block; font-size: var(--bf-fs-sm); font-weight: 600; color: var(--bf-text); }
.dropdown-header { padding: 0.5rem 0.625rem 0.25rem; font-size: var(--bf-fs-xs); color: var(--bf-text-3); font-weight: 500; }

.pagination {
  gap: 0.25rem;
  margin: 0;
  flex-wrap: wrap;
}
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.5rem;
  font-size: var(--bf-fs-sm);
  font-weight: 500;
  color: var(--bf-text-2);
  background: var(--bf-canvas);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius) !important;
  margin: 0 !important;
}
.pagination .page-link:hover { background: var(--bf-subtle); color: var(--bf-text); }
.pagination .active > .page-link,
.pagination .page-item.active .page-link {
  color: var(--bf-text);
  background: var(--bf-muted-bg);
  border-color: var(--bf-border-strong);
}
.pagination .disabled > .page-link { color: var(--bf-text-4); background: var(--bf-canvas); }

.tooltip { --theme-tooltip-bg: var(--bf-text); --theme-tooltip-font-size: var(--bf-fs-xs); --theme-tooltip-border-radius: var(--bf-radius-sm); }
.popover { border-color: var(--bf-border); box-shadow: var(--bf-shadow-pop); border-radius: var(--bf-radius-lg); font-size: var(--bf-fs-sm); }

.list-group-item { border-color: var(--bf-border); color: var(--bf-text-2); font-size: var(--bf-fs-sm); }

/* ------------------------------------------------------------
   11. Drawers e diálogos
   Todo popup da aplicação é um .modal do BS5 (as chamadas legadas
   $(...).modal('show') passam pelo legacy-shim.js). Ancorado à
   direita como drawer: o contexto da página continua visível.
   O HTML legado põe [fechar] antes do [título]: reordenado via flex.
   ------------------------------------------------------------ */
.modal { --theme-modal-width: 34rem; overflow: hidden; }
.modal-backdrop { --theme-backdrop-bg: #0f1420; --theme-backdrop-opacity: 0.32; }
.modal-dialog {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: 100%;
  max-width: var(--theme-modal-width);
  height: 100vh;
  height: 100dvh;
  margin: 0;
}
.modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: min(56rem, 100vw); }
.modal.fade .modal-dialog { transform: translateX(100%); transition: transform 0.28s var(--bf-ease); }
.modal.show .modal-dialog { transform: translateX(0); }

.modal-content {
  height: 100%;
  border: 0;
  border-left: 1px solid var(--bf-border);
  border-radius: 0;
  box-shadow: var(--bf-shadow-drawer);
}
.modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.75rem 1rem 0.75rem 1.5rem;
  background: var(--bf-canvas);
  border-bottom: 1px solid var(--bf-border);
}
.modal-header .modal-title,
.modal-header h4,
.modal-header h5 {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--bf-fs-lg);
  font-weight: 600;
  color: var(--bf-text);
  line-height: 1.3;
}
.modal-header small, .modal-header .font-bold { order: 1; }
.modal-header .close,
.modal-header .btn-close {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 400;
  color: var(--bf-text-3);
  background: transparent;
  border: 0;
  border-radius: var(--bf-radius);
  opacity: 1;
}
.modal-header .close:hover,
.modal-header .btn-close:hover { color: var(--bf-text); background: var(--bf-muted-bg); }

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.5rem;
}
.modal-body div[class*="col-"] {
  float: none;
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  padding-left: 0;
  padding-right: 0;
}
.modal-body .row { margin-left: 0; margin-right: 0; }
.modal-body .form-group { display: flex; flex-direction: column; margin-bottom: 1rem; }
.modal-body h3.text-navy,
.modal-body h3.text-center,
.modal-body h3 {
  text-align: left !important;
  font-size: var(--bf-fs-md);
  font-weight: 600;
  color: var(--bf-text) !important;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 0.75rem;
}
.modal-body .hr-line-dashed { margin: 1.25rem 0; }
.modal-footer {
  flex: 0 0 auto;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--bf-subtle);
  border-top: 1px solid var(--bf-border);
}
.modal-footer > * { margin: 0; }

/* visualizador de foto: lightbox centralizado, não drawer */
#imagemodal .modal-dialog {
  position: relative;
  inset: auto;
  height: auto;
  max-width: 560px;
  margin: 2rem auto;
}
#imagemodal .modal-content { border-radius: var(--bf-radius-lg); border: 0; box-shadow: var(--bf-shadow-pop); }

/* SweetAlert2 — confirmações */
.swal2-container.swal2-backdrop-show { background: rgba(15, 20, 32, 0.32) !important; }
.swal2-popup {
  width: 26rem !important;
  padding: 1.5rem !important;
  border-radius: var(--bf-radius-lg) !important;
  font-family: var(--bf-font) !important;
  box-shadow: var(--bf-shadow-pop) !important;
  border: 1px solid var(--bf-border);
  text-align: left;
}
.swal2-icon { transform: scale(0.6); margin: -0.75rem auto 0 !important; }
.swal2-title {
  padding: 0 !important;
  margin: 0 0 0.375rem !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: var(--bf-text) !important;
}
.swal2-html-container {
  margin: 0 !important;
  font-size: var(--bf-fs-md) !important;
  color: var(--bf-text-3) !important;
  line-height: 1.5 !important;
}
.swal2-actions { gap: 0.5rem; margin: 1.25rem 0 0 !important; width: 100%; justify-content: center !important; }
.swal2-styled {
  margin: 0 !important;
  min-height: var(--bf-control-h);
  padding: 0 0.875rem !important;
  font-size: var(--bf-fs-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--bf-radius) !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-confirm { background: var(--bf-accent) !important; }
.swal2-icon-warning ~ .swal2-actions .swal2-confirm,
.swal2-popup.swal2-icon-warning .swal2-confirm { background: var(--bf-danger) !important; }
.swal2-styled.swal2-cancel {
  background: var(--bf-canvas) !important;
  color: var(--bf-text) !important;
  border: 1px solid var(--bf-border-strong) !important;
}
.swal2-styled:focus-visible { box-shadow: var(--bf-focus) !important; }

/* ------------------------------------------------------------
   12. Árvore (jsTree)
   O sprite de ícones do tema nunca veio no pacote: setas e
   checkboxes desenhados em CSS. Seleção = tinta do acento.
   ------------------------------------------------------------ */
.jstree-default .jstree-node,
.jstree-default .jstree-icon,
.jstree-default .jstree-file,
.jstree-default .jstree-folder,
.jstree-default > .jstree-striped,
.jstree-default-small .jstree-node,
.jstree-default-small .jstree-icon,
.jstree-default-small .jstree-file,
.jstree-default-small .jstree-folder {
  background-image: none !important;
}
.jstree-default { font-size: var(--bf-fs-sm); }
.jstree-default .jstree-node { min-height: 28px; line-height: 28px; }
.jstree-default .jstree-anchor {
  height: 28px;
  line-height: 28px;
  padding: 0 0.5rem 0 0.25rem;
  color: var(--bf-text-2);
  border-radius: var(--bf-radius-sm);
  transition: background-color 0.1s var(--bf-ease);
}
.jstree-default .jstree-icon:empty { width: 22px; height: 28px; line-height: 28px; }
.jstree-default .jstree-anchor > .jstree-themeicon,
.jstree-default .jstree-anchor > i { color: var(--bf-text-3); }
.jstree-default .jstree-ocl { position: relative; cursor: pointer; }
.jstree-default .jstree-closed > .jstree-ocl::before,
.jstree-default .jstree-open > .jstree-ocl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--bf-text-3);
  border-bottom: 1.5px solid var(--bf-text-3);
  transition: transform 0.12s var(--bf-ease);
}
.jstree-default .jstree-closed > .jstree-ocl::before { transform: translate(-70%, -50%) rotate(-45deg); }
.jstree-default .jstree-open > .jstree-ocl::before { transform: translate(-50%, -75%) rotate(45deg); }
.jstree-default .jstree-leaf > .jstree-ocl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bf-border-strong);
  transform: translate(-50%, -50%);
}
.jstree-default .jstree-anchor:hover,
.jstree-default .jstree-hovered,
.jstree-default .jstree-wholerow-hovered {
  background: var(--bf-muted-bg);
  box-shadow: none;
  border-radius: var(--bf-radius-sm);
}
.jstree-default .jstree-clicked,
.jstree-default .jstree-anchor.jstree-clicked:hover,
.jstree-default .jstree-wholerow-clicked {
  background: var(--bf-accent-tint);
  color: var(--bf-accent-text);
  font-weight: 600;
  box-shadow: none;
  border-radius: var(--bf-radius-sm);
}
.jstree-default .jstree-anchor.jstree-clicked .jstree-icon,
.jstree-default .jstree-anchor.jstree-clicked i { color: var(--bf-accent) !important; }
.jstree-anchor:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: -2px; }
/* nós com estilo "raiz" legados (font-bold text-navy) */
.jstree-default .text-navy > .jstree-anchor { color: var(--bf-text); font-weight: 600; }

/* checkbox plugin */
.jstree-default .jstree-checkbox { position: relative; }
.jstree-default .jstree-checkbox::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--bf-border-strong);
  border-radius: 3px;
  background: var(--bf-canvas);
}
.jstree-default .jstree-checked > .jstree-checkbox::before,
.jstree-default .jstree-clicked > .jstree-checkbox::before { background: var(--bf-accent); border-color: var(--bf-accent); }
.jstree-default .jstree-checked > .jstree-checkbox::after,
.jstree-default .jstree-clicked > .jstree-checkbox::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 4px;
  margin: -4px 0 0 -3.5px;
  border: 1.5px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}
.jstree-default .jstree-undetermined::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 2px;
  margin: -1px 0 0 -4px;
  background: var(--bf-accent);
  z-index: 1;
}

/* ------------------------------------------------------------
   13. Estados vazios e carregamento
   ------------------------------------------------------------ */
.bf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.375rem;
  padding: 2.5rem 1.5rem;
  color: var(--bf-text-3);
}
.bf-empty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.375rem;
  border-radius: var(--bf-radius-lg);
  border: 1px solid var(--bf-border);
  background: var(--bf-subtle);
  color: var(--bf-text-3);
  font-size: 1.25rem;
}
.bf-empty-title { margin: 0; font-size: var(--bf-fs-md); font-weight: 600; color: var(--bf-text); }
.bf-empty-text { margin: 0; max-width: 44ch; font-size: var(--bf-fs-sm); }
.bf-empty .btn { margin-top: 0.75rem; }

/* linha "nenhum registro" das tabelas legadas */
.table tr.row-vazia > td {
  padding: 2rem 1rem !important;
  text-align: center;
  color: var(--bf-text-3);
  background: transparent !important;
}

.bf-skeleton {
  display: block;
  height: 12px;
  border-radius: var(--bf-radius-sm);
  background: linear-gradient(90deg, var(--bf-muted-bg) 0%, #e9ecf1 50%, var(--bf-muted-bg) 100%);
  background-size: 200% 100%;
  animation: bf-shimmer 1.4s ease-in-out infinite;
}
@keyframes bf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* o GIF de "carregando" legado vira um spinner fino, na cor do texto */
img[src*="ajax-loader"] {
  width: 16px !important;
  height: 16px !important;
  object-fit: none;
  object-position: 100px 100px;
  border-radius: 50%;
  border: 2px solid var(--bf-border);
  border-top-color: var(--bf-accent);
  animation: bf-spin 0.7s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* conteúdo carregado por ajax ainda vazio — mostra um esqueleto */
#CarregarTarefas:empty,
.bf-loading:empty {
  min-height: 160px;
  background:
    linear-gradient(var(--bf-muted-bg), var(--bf-muted-bg)) 1.25rem 1.5rem / 40% 12px no-repeat,
    linear-gradient(var(--bf-muted-bg), var(--bf-muted-bg)) 1.25rem 3rem / 70% 10px no-repeat,
    linear-gradient(var(--bf-muted-bg), var(--bf-muted-bg)) 1.25rem 4.25rem / 60% 10px no-repeat,
    linear-gradient(var(--bf-muted-bg), var(--bf-muted-bg)) 1.25rem 5.5rem / 65% 10px no-repeat;
}

/* ------------------------------------------------------------
   14. Componentes da aplicação
   ------------------------------------------------------------ */

/* Faixa de métricas: números compactos numa régua só, sem cartões */
.bf-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.bf-metric {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--bf-border);
  min-width: 0;
}
.bf-metric:last-child { border-right: 0; }
.bf-metric-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.375rem;
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-3);
  font-weight: 500;
}
.bf-metric-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bf-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.bf-metric-value small { font-size: var(--bf-fs-sm); font-weight: 500; color: var(--bf-text-3); letter-spacing: 0; }
.bf-metric-foot { margin-top: 0.375rem; font-size: var(--bf-fs-xs); color: var(--bf-text-3); }
.bf-metric-foot .is-up { color: var(--bf-success); font-weight: 500; }
.bf-metric-foot .is-down { color: var(--bf-danger); font-weight: 500; }

/* barra de progresso fina */
.bf-progress {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--bf-muted-bg);
  overflow: hidden;
}
.bf-progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--bf-accent);
}

/* lista de chave/valor (detalhes) */
.bf-kv {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  margin: 0;
}
.bf-kv > dt,
.bf-kv > dd {
  margin: 0;
  padding: 0.625rem 0;
  font-size: var(--bf-fs-sm);
  border-bottom: 1px solid var(--bf-border);
}
.bf-kv > dt { color: var(--bf-text-3); font-weight: 400; padding-right: 1rem; }
.bf-kv > dd { color: var(--bf-text); }
.bf-kv > dt:last-of-type, .bf-kv > dd:last-of-type { border-bottom: 0; }

/* layout de duas colunas: principal + lateral */
.bf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: start;
}
.bf-split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }

/* lista de atividade (feed) */
.bf-feed { list-style: none; margin: 0; padding: 0; }
.bf-feed > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--bf-border);
}
.bf-feed > li:last-child { border-bottom: 0; }
.bf-feed-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bf-subtle);
  border: 1px solid var(--bf-border);
  color: var(--bf-text-3);
  font-size: 0.9375rem;
}
.bf-feed-icon img { width: 18px; height: 18px; }
.bf-feed-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0 0 0.125rem; font-size: var(--bf-fs-sm); font-weight: 600; color: var(--bf-text); }
.bf-feed-meta { font-size: var(--bf-fs-xs); color: var(--bf-text-3); font-weight: 400; }
.bf-feed-body { margin: 0; font-size: var(--bf-fs-sm); color: var(--bf-text-2); }
.bf-feed-body + .bf-feed-body { margin-top: 0.25rem; }
.bf-feed-flag { color: var(--bf-warning); font-weight: 500; }

.feed-activity-list .feed-element { padding: 0.75rem 0; border-bottom: 1px solid var(--bf-border); }
.feed-activity-list .feed-element:last-child { border-bottom: 0; }

/* Equipe — linhas de pessoas */
.bf-person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.bf-person-name { display: block; font-weight: 500; color: var(--bf-text); font-size: var(--bf-fs-sm); }
.bf-person-email { display: block; color: var(--bf-text-3); font-size: var(--bf-fs-xs); overflow-wrap: anywhere; }
.bf-access { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.bf-access .bf-badge { height: 20px; padding: 0 0.375rem; }
.bf-access .bf-badge.is-off { color: var(--bf-text-4); background: transparent; border-style: dashed; text-decoration: line-through; text-decoration-color: var(--bf-border-strong); }

/* compatibilidade com o crachá de equipe anterior */
.os-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bf-muted-bg); border: 1px solid var(--bf-border); color: var(--bf-text-2); font-weight: 600; font-size: var(--bf-fs-sm); }
.os-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 0.375rem; font-size: var(--bf-fs-xs); font-weight: 500; border-radius: var(--bf-radius-sm); border: 1px dashed var(--bf-border-strong); color: var(--bf-text-4); }
.os-chip.os-chip--on { color: var(--bf-accent-text); background: var(--bf-accent-tint); border: 1px solid var(--bf-accent-tint-2); }
.os-chip-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.os-pill-pending { display: inline-flex; align-items: center; height: 20px; padding: 0 0.375rem; font-size: var(--bf-fs-xs); font-weight: 500; color: var(--bf-warning); background: var(--bf-warning-bg); border: 1px solid var(--bf-warning-border); border-radius: var(--bf-radius-sm); }
.os-acesso-editable { display: block; color: inherit; cursor: pointer; border-radius: var(--bf-radius); }
.os-acesso-editable:hover { color: inherit; }
.os-acesso-editable:hover .os-chip-row { opacity: 0.8; }

/* Dashboard: lista de projetos recentes */
.bf-list { list-style: none; margin: 0; padding: 0; }
.bf-list > li > a,
.bf-list > li > .bf-list-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--bf-border);
  color: var(--bf-text-2);
  font-size: var(--bf-fs-sm);
}
.bf-list > li:last-child > a,
.bf-list > li:last-child > .bf-list-row { border-bottom: 0; }
.bf-list > li > a:hover { background: var(--bf-hover); color: var(--bf-text); }
.bf-list > li > a[aria-current="true"] { color: var(--bf-text); font-weight: 600; }
.bf-list-meta { margin-left: auto; color: var(--bf-text-3); font-size: var(--bf-fs-xs); white-space: nowrap; }

/* ações rápidas: links em linha, não pilha de botões */
.bf-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* gráfico ApexCharts no sistema */
.apexcharts-canvas { font-family: var(--bf-font) !important; }
.apexcharts-tooltip { border: 1px solid var(--bf-border) !important; box-shadow: var(--bf-shadow-pop) !important; border-radius: var(--bf-radius) !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--bf-text-3); }

/* ------------------------------------------------------------
   15. Compatibilidade Bootstrap 3 → 5
   Classes das views legadas sem equivalente no bundle atual.
   ------------------------------------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.pull-left { float: left; }
.pull-right { float: right; }
.text-navy { color: var(--bf-text) !important; }
a.text-navy { color: var(--bf-text) !important; }
a.text-navy:hover { color: var(--bf-accent-text) !important; }
.white-bg { background: var(--bf-canvas) !important; }
.font-bold { font-weight: 600; }
.m-b { margin-bottom: 0; }
.img-circle { border-radius: 50%; }
.well {
  padding: 1rem;
  background: var(--bf-subtle);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
}
.radio.radio-inline { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 0.75rem 0.5rem 0; }
.form-control-static {
  display: block;
  padding: 0.4375rem 0;
  margin: 0;
  color: var(--bf-text);
  font-size: var(--bf-fs-md);
}
.close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
  color: var(--bf-text-3);
  background: transparent;
  border: 0;
  border-radius: var(--bf-radius);
  cursor: pointer;
}
.close:hover { color: var(--bf-text); background: var(--bf-muted-bg); }

/* .os-stat (versão anterior das métricas) */
.os-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  margin: 0 0.5rem 0.5rem 0;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius);
}
.os-stat .os-stat-value { font-size: 1.0625rem; font-weight: 600; color: var(--bf-text); font-variant-numeric: tabular-nums; }
.os-stat .os-stat-label { font-size: var(--bf-fs-xs); color: var(--bf-text-3); }
.os-tab-btn { text-align: left; }

/* .os-profile-form (Meus Dados, Projeto) — já coberto pelos campos
   globais; aqui só o checkbox com alvo de toque de 24px (WCAG 2.5.8) */
.os-profile-form .form-check { padding-block: 0.25rem; }
.os-profile-form .form-check-input { width: 18px; height: 18px; }
.os-profile-form .form-check-label { display: inline-flex; align-items: center; min-height: 24px; }

/* ------------------------------------------------------------
   16. Telas específicas
   ------------------------------------------------------------ */

/* Cronograma — coluna do nome congelada na rolagem horizontal */
#mainTable1 thead th:first-child,
#mainTable2 thead th:first-child,
#mainTable1 tbody td[name="tdNome"],
#mainTable2 tbody td[name="tdNome"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bf-canvas);
  border-right: 1px solid var(--bf-border);
}
#mainTable1 thead th:first-child,
#mainTable2 thead th:first-child { background: var(--bf-subtle); z-index: 2; }
.crono-valor { color: var(--bf-text); font-weight: 400; }

/* Relatório de Composição de Preço — 5 níveis por tipografia e fio */
.invoice-table tr.rel-n1 > td {
  padding-top: 1.25rem;
  font-weight: 600;
  color: var(--bf-text);
  border-top: 1px solid var(--bf-text) !important;
}
.invoice-table tr.rel-n2 > td { font-weight: 600; color: var(--bf-text); padding-top: 0.5rem; }
.invoice-table tr.rel-n3 > td { font-weight: 500; color: var(--bf-text-3); }
.invoice-table tr.rel-tarefa > td { background: var(--bf-subtle); font-weight: 600; color: var(--bf-text); }
.invoice-table tr.rel-insumo > td { color: var(--bf-text-3); font-weight: 400; }
.invoice-table tr.rel-espaco > td { padding: 0.25rem 0 !important; background: none; border: 0 !important; }

/* Editor de fórmula */
.formula-toolbar { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }

/* ------------------------------------------------------------
   17. Responsivo, movimento reduzido, impressão
   ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .bf-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .content-page > .container-fluid { padding: 0 1.25rem 2.5rem; }
  .app-topbar .topbar-menu { padding: 0 1rem; }
  .bf-form-section { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .bf-split-2 { grid-template-columns: minmax(0, 1fr); }
  .bf-metric { border-bottom: 1px solid var(--bf-border); }
}
@media (max-width: 767.98px) {
  .content-page > .container-fluid { padding: 0 1rem 2rem; }
  .bf-page-header, .page-heading { padding: 1.25rem 0 1rem; margin-bottom: 1.25rem !important; }
  .bf-page-actions, .title-action { justify-content: flex-start; }
  .bf-form-grid > .bf-span-2,
  .bf-form-grid > .bf-span-3,
  .bf-form-grid > .bf-span-4 { grid-column: span 6; }
  .bf-kv { grid-template-columns: minmax(0, 1fr); }
  .bf-kv > dt { padding-bottom: 0; border-bottom: 0; }
  .bf-kv > dd { padding-top: 0.125rem; }
  .bf-topbar-context .bf-hide-sm { display: none; }
  /* tabelas largas rolam dentro da seção, não a página */
  .ibox-content, .bf-section-body { overflow-x: auto; }
  .modal { --theme-modal-width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .modal.fade .modal-dialog { transform: none; }
}

@media print {
  .sidenav-menu, .app-topbar, .title-action, .bf-page-actions, .ibox-tools { display: none !important; }
  .content-page, .app-topbar { margin: 0 !important; }
  .ibox, .bf-section { border: 0; }
  .invoice-table thead { display: table-header-group; }
  .invoice-table tr { break-inside: avoid; page-break-inside: avoid; }
  .invoice-table tr.rel-n1 > td { break-after: avoid; page-break-after: avoid; }
}

/* utilitários pequenos */
.bf-strong { color: var(--bf-text); font-weight: 600; }
.bf-chart-body { padding: 0.75rem 0.75rem 0.25rem; min-height: 252px; }
.bf-pane > .ibox:last-child, .bf-pane > .bf-section:last-child { margin-bottom: 0; }

/* Botão de esconder/mostrar a árvore (Itemização, Setorização,
   Cronograma, Lançamentos…): ação utilitária, não primária. */
.ibox-tools a.btn[onclick^="showTree"],
#treeClosed a.btn {
  --theme-btn-color: var(--bf-text-3);
  --theme-btn-bg: transparent;
  --theme-btn-border-color: transparent;
  --theme-btn-hover-color: var(--bf-text);
  --theme-btn-hover-bg: var(--bf-muted-bg);
  --theme-btn-hover-border-color: transparent;
  --theme-btn-active-bg: var(--bf-border);
  --theme-btn-active-color: var(--bf-text);
  width: 28px;
  min-height: 28px;
  padding: 0;
  box-shadow: none;
}
#treeClosed { flex: 0 0 auto; width: auto; padding-top: 0.75rem; }
#treeClosed a.btn { border: 1px solid var(--bf-border) !important; background: var(--bf-canvas); width: 32px; min-height: 32px; }

/* badge clicável (alternar status) */
.bf-badge-btn { cursor: pointer; font-family: var(--bf-font); transition: border-color 0.12s var(--bf-ease); }
.bf-badge-btn:hover { border-color: var(--bf-border-strong) !important; }
.bf-badge-btn:focus-visible { outline: none; box-shadow: var(--bf-focus); }

.bf-inline-metric { display: inline-flex; align-items: baseline; gap: 0.375rem; font-size: var(--bf-fs-sm); }
.bf-inline-metric strong { color: var(--bf-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Barra de salvar fixa no rodapé de formulários longos */
.bf-form { padding-bottom: 1rem; }
.bf-form-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0 -2rem;
  padding: 0.75rem 2rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--bf-border);
}
@media (max-width: 991.98px) { .bf-form-footer { margin: 0 -1.25rem; padding: 0.75rem 1.25rem; } }
@media (max-width: 767.98px) { .bf-form-footer { margin: 0 -1rem; padding: 0.75rem 1rem; } }

/* Autenticação (Login / Registro) */
.bf-auth { min-height: 100vh; min-height: 100dvh; background: var(--bf-subtle); }
.bf-auth-lang { position: absolute; top: 1rem; right: 1rem; }
.bf-auth-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.bf-auth-logo { height: 28px; width: auto; margin-bottom: 1.75rem; }
.bf-auth-panel {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background: var(--bf-canvas);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.bf-auth-title { margin: 0 0 1.5rem; font-size: 1.125rem; font-weight: 600; }
.bf-auth-panel .btn-lg { margin-top: 0.5rem; }
.bf-auth-alt { margin: 1.25rem 0 0; font-size: var(--bf-fs-sm); color: var(--bf-text-3); }
.bf-auth-alt a { font-weight: 500; }
.validation-summary-errors-wrap:empty,
.validation-summary-errors-wrap.validation-summary-valid { display: none; }
.validation-summary-errors-wrap.validation-summary-errors { margin-bottom: 1.25rem; }

/* Painel de detalhe das telas com árvore, antes de selecionar um nó */
.ibox-content[data-empty]:not(:has(*)) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 2rem;
  background: none;
}
.ibox-content[data-empty]:not(:has(*))::before {
  content: attr(data-empty);
  max-width: 36ch;
  text-align: center;
  font-size: var(--bf-fs-sm);
  color: var(--bf-text-3);
}
.ibox:has(> .ibox-content[data-empty]:not(:has(*))) { border-style: dashed; background: var(--bf-subtle); }

/* Botões só com ícone (marcados por legacy-shim.js): sempre secundários,
   quadrados, com tooltip. A cor sólida fica reservada para ações com rótulo. */
.btn.bf-icon-only {
  width: 28px;
  min-height: 28px;
  padding: 0;
  float: none !important;
  margin: 0 !important;
}
.btn.bf-icon-only.btn-sm { width: 30px; min-height: 30px; }
.btn.bf-icon-only.btn-primary {
  --theme-btn-color: var(--bf-text-2);
  --theme-btn-bg: var(--bf-canvas);
  --theme-btn-border-color: var(--bf-border-strong);
  --theme-btn-hover-color: var(--bf-text);
  --theme-btn-hover-bg: var(--bf-subtle);
  --theme-btn-hover-border-color: var(--bf-border-strong);
  --theme-btn-active-color: var(--bf-text);
  --theme-btn-active-bg: var(--bf-muted-bg);
  --theme-btn-active-border-color: var(--bf-border-strong);
  --theme-btn-disabled-color: var(--bf-text-4);
  --theme-btn-disabled-bg: var(--bf-canvas);
  --theme-btn-disabled-border-color: var(--bf-border);
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
}
.btn.bf-icon-only + .btn.bf-icon-only { margin-left: 0.25rem !important; }

/* ícones dos nós da árvore: marcadores discretos, não azuis */
.jstree-default .jstree-anchor > .jstree-themeicon { color: var(--bf-text-4) !important; font-size: 0.8125rem; }
.jstree-default .jstree-anchor.jstree-clicked > .jstree-themeicon { color: var(--bf-accent) !important; }

/* Rodapés de drawer: ação primária sempre à direita, qualquer que seja a
   ordem no HTML legado (muitos trazem [Salvar][Cancelar]). */
.modal-footer { justify-content: flex-end; }
.modal-footer .btn-primary,
.modal-footer button[type="submit"] { order: 2; }
.modal-footer > form,
.modal-footer .form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; width: 100%; }

/* Lançamentos: o resumo mensal e a lista só cabem lado a lado em telas
   bem largas; abaixo disso empilham (a lista tem 9 colunas). */
@media (max-width: 1679.98px) {
  #itemizado.col-xxl-4,
  #tabs.col-xxl-8 { flex: 0 0 100%; width: 100%; max-width: 100%; }
}

/* listas agrupadas: o nome da tarefa não pode ser espremido pelas
   colunas numéricas (nowrap) */
.table:not(.invoice-table):has(td[colspan]) tr:not(:has(> td[colspan])) > td:first-child { min-width: 12rem; }

@media (max-width: 767.98px) {
  .bf-metric { padding: 0.875rem 1rem; }
  .bf-metric-value { font-size: 1.0625rem; }
  .bf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-metric:nth-child(2n) { border-right: 0; }
}
.bf-list > li > a.bf-report-row { padding-top: 0.875rem; padding-bottom: 0.875rem; }

/* Ação destrutiva separada à esquerda; ícones decorativos fora dos
   botões de rodapé (o rótulo já diz o que o botão faz). */
.modal-footer .btn-danger,
.modal-footer .btn-outline-danger { order: -1; margin-right: auto !important; }
.modal-footer .btn > i.fa,
.modal-footer .btn > i.ti,
.bf-form-footer .btn > i.fa { display: none; }

/* Login: marca do módulo na suíte e separador do botão "Entrar com NEXXUS 360" */
.bf-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; }
.bf-auth-brand .bf-auth-logo { margin-bottom: 0; }
.bf-auth-suite { font-size: var(--bf-fs-xs); color: var(--bf-text-3); }
.bf-auth-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font-size: var(--bf-fs-xs);
  color: var(--bf-text-3);
}
.bf-auth-or::before, .bf-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--bf-border); }