/* =========================================
   Relatório de Ocupação Diário (escopo)
   ========================================= */
.relatorioocupacao .accordion-button.day-header{
  position: relative;
  display: grid;                      /* 3 colunas: data | chips | caret */
  grid-template-columns: minmax(14ch,1fr) minmax(220px,auto) 1.25rem;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  padding-left: .75rem;               /* espaço da fita */
  white-space: normal !important;     /* permite quebra */
  overflow: visible !important;       /* nada fica cortado */
  background-clip: padding-box;
}

/* fita lateral + cor SEMPRE */
.relatorioocupacao .accordion-button.day-header::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  border-radius:6px 0 0 6px;
}
.relatorioocupacao .accordion-button.day-header.low::before    { background:#dc3545; }
.relatorioocupacao .accordion-button.day-header.medium::before { background:#ffc107; }
.relatorioocupacao .accordion-button.day-header.high::before   { background:#198754; }

.relatorioocupacao .accordion-button.day-header.low    { background:rgba(220,53,69,.06) !important; }
.relatorioocupacao .accordion-button.day-header.medium { background:rgba(255,193,7,.10) !important; }
.relatorioocupacao .accordion-button.day-header.high   { background:rgba(25,135,84,.10) !important; }

/* mata o chevron padrão do Bootstrap */
.relatorioocupacao .accordion-button.day-header::after{ display:none !important; }

/* --- células do grid --- */
.relatorioocupacao .day-title{
  min-width: 14ch;                    /* a data NUNCA some */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relatorioocupacao .day-badges{
  min-width: 220px;                   /* chips sempre têm espaço mínimo */
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;                    /* quebram se faltar espaço */
  align-items: center;
  justify-content: flex-end;          /* à direita por padrão */
}
.relatorioocupacao .day-badges .badge{ font-weight:600; white-space:nowrap; }

/* nosso chevron (não empurra conteúdo) */
.relatorioocupacao .day-caret{
  justify-self: end;
  opacity: .6;
  transition: transform .2s ease;
}
.relatorioocupacao .accordion-button.day-header.collapsed .day-caret{
  transform: rotate(-90deg);
}

/* telas menores: chips vão para baixo e alinham à esquerda */
@media (max-width: 768px){
  .relatorioocupacao .accordion-button.day-header{
    grid-template-columns: 1fr 1.25rem;     /* título | caret */
    grid-auto-rows: auto;
  }
  .relatorioocupacao .day-badges{
    grid-column: 1 / -1;                    /* quebra para linha de baixo */
    justify-content: flex-start;
    min-width: 0;
  }
}
/* anti-trunc (caso algum .text-truncate/.overflow-hidden global esteja ativo) */
.relatorioocupacao .accordion-button.day-header,
.relatorioocupacao .day-title,
.relatorioocupacao .day-badges{
  overflow: visible !important;
  text-overflow: clip !important;
}



/* ======== POWER BI THEME — COMPARATIVO (apenas quando existir #cmp-chart-comparativo) ======== */

/* Escopo: só o card do comparativo */
.relatorioocupacao:has(#cmp-chart-comparativo) .card-header {
  background:#fff;
}

/* ---------- GRID dos 4 campos de data ---------- */
/* Se o seu HTML tiver o container "row g-3 align-items-end" (ex.: do snippet anterior) */
.relatorioocupacao:has(#cmp-chart-comparativo) .row.g-3.align-items-end{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:12px;
  margin-bottom:10px;
}
@media (max-width: 1200px){
  .relatorioocupacao:has(#cmp-chart-comparativo) .row.g-3.align-items-end{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}
@media (max-width: 640px){
  .relatorioocupacao:has(#cmp-chart-comparativo) .row.g-3.align-items-end{
    grid-template-columns: 1fr;
  }
}

/* Fallback caso não exista a .row.g-3: limita largura dos inputs de data e deixa quebra automática */
#cmpA-start-comparativo, #cmpA-end-comparativo,
#cmpB-start-comparativo, #cmpB-end-comparativo{
  max-width: 320px;
}

/* ---------- Toolbar compacta para os filtros (onde o JS injeta #cmp-controls-comparativo) ---------- */
/* 1) Deixa o bloco de controles com cara de “barra” */
.relatorioocupacao:has(#cmp-chart-comparativo) #cmp-controls-comparativo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  padding:.5rem .75rem;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  margin:.25rem 0 .75rem;
}

/* 2) Segmento “Reservas” (botões Todas/Válidas) */
.relatorioocupacao:has(#cmp-chart-comparativo) #cmp-controls-comparativo .btn-group>.btn{
  background:#fff;
  color:#374151;
  border:1px solid #e5e7eb;
}
.relatorioocupacao:has(#cmp-chart-comparativo) #cmp-controls-comparativo .btn-group>.btn.active{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
  box-shadow:0 2px 10px rgba(37,99,235,.24);
}

/* 3) Checkboxes/labels da barra */
.relatorioocupacao:has(#cmp-chart-comparativo) #cmp-controls-comparativo label{
  font-weight:600;
  color:#475569;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:0;
}

/* ---------- Presets e switches (onde quer que estejam) ---------- */
#preset-b-prev-month, #preset-b-prev-year{
  background:#fff;
  color:#374151;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:.28rem .6rem;
}
#preset-b-prev-month:hover, #preset-b-prev-year:hover{
  background:#f8fafc;
}

/* Switch “Alinhar por dia” */
#cmp-align-dom-comparativo.form-check-input{
  width:2.3em; height:1.2em;
}
.form-check-label[for="cmp-align-dom-comparativo"]{
  font-weight:600; color:#475569; margin-left:.35rem;
}

/* ---------- Botões de ação ---------- */
#cmp-apply-comparativo{
  background:#2563eb; border-color:#2563eb; color:#fff;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(37,99,235,.26);
}
#cmp-apply-comparativo:hover{ filter:brightness(0.98); }

#cmp-clear-comparativo{
  background:#fff; color:#374151; border:1px solid #e5e7eb;
  border-radius:10px;
}
#cmp-clear-comparativo:hover{ background:#f9fafb; }

/* ---------- Pequenos retoques visuais para inputs ---------- */
.relatorioocupacao:has(#cmp-chart-comparativo) .input-group-text{
  background:#fff; border-color:#e5e7eb;
}
.relatorioocupacao:has(#cmp-chart-comparativo) input[type="date"].form-control{
  border-color:#e5e7eb;
}

/* ---------- Layout da “segunda linha” de filtros/ações ---------- */
/* Se você tem aquele bloco com .d-flex.flex-wrap.align-items-center.mt-3.gap-3, vira uma mini-toolbar */
.relatorioocupacao:has(#cmp-chart-comparativo) .d-flex.flex-wrap.align-items-center.mt-3.gap-3{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:.5rem .75rem;
  gap:.75rem;
}

/* Responsividade: empurra botões pro fim em telas largas e quebra em telas pequenas */
@media (min-width: 992px){
  /* tenta jogar os botões pra direita se estiverem no mesmo container dos filtros */
  #cmp-apply-comparativo, #cmp-clear-comparativo{
    margin-left:auto;
  }
}
/* ===== COMPARATIVO — layout Power BI só com CSS (sem mudar HTML) ===== */

/* 1) Transformar o corpo do card em grid responsivo */
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body{
  position: relative;
  display: grid;
  gap: 12px 16px;                              /* espaço entre itens */
  grid-template-columns: repeat(12, minmax(0,1fr));
}

/* 2) Itens que devem ocupar a linha inteira do grid */
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body > 
  :is(#loadingOverlay-comparativo,
      .alert,
      #bi-compare-toolbar,
      
      #cmp-controls-comparativo,
      .d-flex.flex-wrap.align-items-center.mt-3.gap-3,
      #cmp-chart-comparativo,
      #cmp-chart-comparativo-rn,
      #cmp-table-wrap-comparativo){
  grid-column: 1 / -1;
}

/* 3) “Caixinha” visual para o bloco de datas (aplicada ao card-body) */
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body{
  --box-pad: 10px;
  padding-top: calc(var(--box-pad) + 2px);    /* espaço para a box */
}
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body::before{
  content:"";
  position:absolute;
  left:0; right:0;
  /* A box começa antes do primeiro campo de data e termina logo após o último
     (como não temos wrapper, fazemos a “faixa” ocupar a largura toda) */
  top:  calc( var(--box-pad) );
  height: 0;                                   /* cresce com os itens (efeito visual de faixa) */
  border: 1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  pointer-events:none;
  /* Truque: usamos outline para “pegar” a altura dos filhos; o before vira só o fundo/borda */
  outline: 9999px solid transparent;
}

/* 4) Colocar CADA wrapper de input de data ocupando 3/12 colunas (4 por linha)  */
/* Seleciona o CONTÊINER imediato que possui cada input pelo ID */
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpA-start-comparativo),
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpA-end-comparativo),
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpB-start-comparativo),
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpB-end-comparativo){
  grid-column: span 3;                         /* 4 colunas na mesma linha */
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px;
}

/* Responsividade: 2 por linha (≥640px) e 1 por linha (<640px) */
@media (max-width: 1200px){
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpA-start-comparativo),
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpA-end-comparativo),
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpB-start-comparativo),
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpB-end-comparativo){
    grid-column: span 6;                       /* 2 por linha */
  }
}
@media (max-width: 640px){
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpA-start-comparativo),
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpA-end-comparativo),
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpB-start-comparativo),
  .relatorioocupacao:has(#cmp-chart-comparativo) .card-body > :has(> #cmpB-end-comparativo){
    grid-column: 1 / -1;                       /* 1 por linha (mobile) */
  }
}

/* 5) Acabamento Power BI nos inputs */
.relatorioocupacao:has(#cmp-chart-comparativo) .input-group-text{ 
  background:#fff; border-color:#e5e7eb; 
}
.relatorioocupacao:has(#cmp-chart-comparativo) input[type="date"].form-control{
  border-color:#e5e7eb;
}
/* =======================
   Header + Filterbar (Power BI look)
   ======================= */
.relatorioocupacao .pbi-header{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  padding:14px 16px;
}

.relatorioocupacao .pbi-headbar{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

/* Título */
.relatorioocupacao .pbi-header .card-title{
  font-weight:800;
  color:#111827;
}
.relatorioocupacao #ocupacaoPeriod-comparativo{
  font-weight:600;
  color:#6b7280!important;
}

/* =======================
   FILTERBAR como GRID
   ======================= */
.relatorioocupacao .pbi-filterbar{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap:12px;
  align-items:end;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* Cada campo ocupa 3 colunas (4 por linha) no desktop */
.relatorioocupacao .pbi-filterbar .pbi-field{
  grid-column: span 3;
  min-width: 220px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px;
}

/* Rótulos dos campos */
.relatorioocupacao .pbi-filterbar .pbi-field > label{
  display:block;
  margin:0 0 .35rem;
  font-weight:600;
  color:#334155;
  font-size:.9rem;
}

/* Inputs / input-group */
.relatorioocupacao .pbi-filterbar .pbi-input .input-group-text{
  background:#fff;
  border-color:#e5e7eb;
}
.relatorioocupacao .pbi-filterbar .pbi-input .form-control{
  border-color:#e5e7eb;
  min-height:38px;
  border-radius:10px;
}
.relatorioocupacao .pbi-filterbar .pbi-input .form-control:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
  outline:0;
}

/* Segmento (Todas / Válidas) */
.relatorioocupacao .pbi-filterbar .pbi-seg.btn-group>.btn{
  background:#fff;
  color:#374151;
  border:1px solid #e5e7eb;
  border-radius:10px;
}
.relatorioocupacao .pbi-filterbar .pbi-seg.btn-group>.btn.active{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
  box-shadow:0 2px 10px rgba(37,99,235,.24);
}

/* Ações (presets, switches, checkboxes, botões) */
.relatorioocupacao .pbi-actions{
  grid-column: 10 / span 3;           /* encosta à direita em telas largas */
  justify-self:end;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
}

.relatorioocupacao .pbi-ghost{
  background:#fff;
  color:#374151;
  border:1px solid #e5e7eb;
  border-radius:10px;
}
.relatorioocupacao .pbi-ghost:hover{ background:#f9fafb; }

.relatorioocupacao .pbi-primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(37,99,235,.26);
}
.relatorioocupacao .pbi-primary:hover{ filter:brightness(.98); }

/* Ajustes visuais de switches/checkboxes dentro da filterbar */
.relatorioocupacao .pbi-filterbar .form-check-label{
  font-weight:600;
  color:#475569;
}
.relatorioocupacao #cmp-align-dom-comparativo.form-check-input{
  width:2.3em; height:1.2em;
}

/* Responsivo: 2 colunas (tablet) e 1 coluna (mobile) */
@media (max-width: 1200px){
  .relatorioocupacao .pbi-filterbar .pbi-field{ grid-column: span 6; }
  .relatorioocupacao .pbi-actions{ grid-column: 1 / -1; justify-self:start; }
}
@media (max-width: 640px){
  .relatorioocupacao .pbi-filterbar .pbi-field{ grid-column: 1 / -1; }
  .relatorioocupacao .pbi-actions{ grid-column: 1 / -1; }
}

/* =======================
   Conteúdo abaixo do header
   ======================= */
.relatorioocupacao #cmp-alert-comparativo{ margin:12px 0 6px; }
.relatorioocupacao #cmp-chart-comparativo{ margin-top:8px; }

/* Botões fora da filterbar que usam os mesmos IDs */
.relatorioocupacao #cmp-apply-comparativo{
  background:#2563eb; border-color:#2563eb; color:#fff; border-radius:10px;
  box-shadow:0 4px 14px rgba(37,99,235,.26);
}
.relatorioocupacao #cmp-apply-comparativo:hover{ filter:brightness(.98); }
.relatorioocupacao #cmp-clear-comparativo{
  background:#fff; color:#374151; border:1px solid #e5e7eb; border-radius:10px;
}
.relatorioocupacao #cmp-clear-comparativo:hover{ background:#f9fafb; }
/* Evita números “fantasmas” injetados por plugins/tema nas células da tabela */
.relatorioocupacao .bi-azul-table td::before,
.relatorioocupacao .bi-azul-table td::after,
.relatorioocupacao .bi-azul-table th::before,
.relatorioocupacao .bi-azul-table th::after{
  content: none !important;
}
.relatorioocupacao .bi-azul-table{ table-layout:fixed; }
.relatorioocupacao .bi-azul-table th,
.relatorioocupacao .bi-azul-table td{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Mata qualquer conteúdo automático na tabela do comparativo */
.relatorioocupacao #cmp-table td::before,
.relatorioocupacao #cmp-table td::after,
.relatorioocupacao #cmp-table th::before,
.relatorioocupacao #cmp-table th::after{
  content: none !important;
}
/* =========================================================================
   TABELA MODERNA — aplica só na tabela do comparativo (#cmp-table)
   ========================================================================= */

/* Wrapper: cantos arredondados + sombra leve */
.relatorioocupacao #cmp-table-wrap-comparativo .bi-azul-table-wrapper{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
  overflow:hidden; /* mantém cabeçalho/coluna sticky com cantos */
}

/* Scroll com “sombra” indicando overflow */
.relatorioocupacao #cmp-table-wrap-comparativo .table-scroll{
  position:relative;
}
.relatorioocupacao #cmp-table-wrap-comparativo .table-scroll::before,
.relatorioocupacao #cmp-table-wrap-comparativo .table-scroll::after{
  content:"";
  position:absolute; top:0; bottom:0; width:16px; pointer-events:none; z-index:3;
}
.relatorioocupacao #cmp-table-wrap-comparativo .table-scroll::before{
  left:0; background:linear-gradient(90deg, rgba(15,23,42,.08), rgba(15,23,42,0));
}
.relatorioocupacao #cmp-table-wrap-comparativo .table-scroll::after{
  right:0; background:linear-gradient(270deg, rgba(15,23,42,.08), rgba(15,23,42,0));
}

/* Base */
.relatorioocupacao #cmp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.95rem;
  color:#0f172a;
}

/* Cabeçalho azul moderno (sticky) */
.relatorioocupacao #cmp-table thead th{
  position:sticky; top:0; z-index:4;
  background: linear-gradient(180deg,#2563eb 0%, #1d4ed8 100%);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  padding:.65rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.25);
  white-space:nowrap;
}
.relatorioocupacao #cmp-table thead tr:first-child th{
  padding:.7rem .75rem .55rem;
  font-size:.96rem;
}

/* Células corpo/rodapé */
.relatorioocupacao #cmp-table tbody td,
.relatorioocupacao #cmp-table tfoot td{
  padding:.6rem .75rem;
  border-bottom:1px solid #eef2f7;
  background:#fff; /* base para sticky-col herdar */
}

/* Zebra + hover */
.relatorioocupacao #cmp-table tbody tr{
  --row-bg:#fff;
  transition: background .15s ease;
}
.relatorioocupacao #cmp-table tbody tr:nth-child(odd){
  --row-bg:#fbfdff;
}
.relatorioocupacao #cmp-table tbody tr:hover{
  --row-bg:#f5f8ff;
  background:var(--row-bg);
}

/* Coluna fixa (primeira) com sombra divisória e seguindo o hover */
.relatorioocupacao #cmp-table .sticky-col{
  position:sticky; left:0; z-index:2;
  background:var(--row-bg, #fff);
  box-shadow: 1px 0 0 0 #eef2f7; /* divisória à direita */
  font-weight:600;
}
/* Cabeçalho da sticky precisa manter o azul */
.relatorioocupacao #cmp-table thead .sticky-col{
  background: linear-gradient(180deg,#2563eb 0%, #1d4ed8 100%) !important;
  color:#fff; z-index:5;
  box-shadow: 1px 0 0 0 rgba(255,255,255,.25);
}

/* Alinhamentos e tipografia */
.relatorioocupacao #cmp-table td.text-end{ text-align:right; }
.relatorioocupacao #cmp-table .small-muted{ color:#6b7280; font-size:.85rem; }

/* Barrinha de % (aproveita sua .pct-bar; aqui só refinamos) */
.relatorioocupacao #cmp-table .pct-bar{
  height:22px; border-radius:10px; background:#eef2ff;
}
.relatorioocupacao #cmp-table .pct-bar > div{
  font-weight:800; color:#0f172a;
}

/* “Pílulas” de delta (positivo/negativo/zero) — já usadas no seu JS */
.relatorioocupacao #cmp-table .delta .pill{
  border-radius:999px; font-weight:800; padding:.1rem .55rem;
}
.relatorioocupacao #cmp-table .delta.pos .pill{
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0;
}
.relatorioocupacao #cmp-table .delta.neg .pill{
  background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
}
.relatorioocupacao #cmp-table .delta.zero .pill{
  background:#f3f4f6; color:#374151; border:1px solid #e5e7eb;
}

/* Totais com leve destaque */
.relatorioocupacao #cmp-table tfoot td{
  background:#f8fafc;
  font-weight:700;
}

/* Compacta um pouco as colunas numéricas (sem quebrar) */
.relatorioocupacao #cmp-table colgroup col:nth-child(3),
.relatorioocupacao #cmp-table colgroup col:nth-child(4),
.relatorioocupacao #cmp-table colgroup col:nth-child(5),
.relatorioocupacao #cmp-table colgroup col:nth-child(7),
.relatorioocupacao #cmp-table colgroup col:nth-child(8),
.relatorioocupacao #cmp-table colgroup col:nth-child(9),
.relatorioocupacao #cmp-table colgroup col:nth-child(10),
.relatorioocupacao #cmp-table colgroup col:nth-child(11){
  width: 9% !important;
}

/* Garante que nada “injetado” por tema apareça */
.relatorioocupacao #cmp-table td::before,
.relatorioocupacao #cmp-table td::after,
.relatorioocupacao #cmp-table th::before,
.relatorioocupacao #cmp-table th::after{
  content:none !important;
}
/* Rodapé (Totais) fixo no fim do container de scroll */
.relatorioocupacao #cmp-table tfoot th,
.relatorioocupacao #cmp-table tfoot td{
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -1px 0 rgba(0,0,0,.03);
}
/* Sem scroll interno: deixa a tabela fluir e o card crescer */
.relatorioocupacao .bi-azul-table-wrapper { overflow: visible; }
.relatorioocupacao .table-scroll { 
  overflow: visible !important; 
  max-height: none !important; 
}

/* Se você aplicou rodapé sticky antes, desative para modo auto-grow */
.relatorioocupacao #cmp-table tfoot th,
.relatorioocupacao #cmp-table tfoot td{
  position: static;  /* não fixa no container */
  box-shadow: none;
}
/* 1) Garante que o bloco inteiro do alerta ocupe a largura do grid do card */
.relatorioocupacao:has(#cmp-chart-comparativo) .card-body > #cmp-alert-comparativo{
  grid-column: 1 / -1;
}

/* 2) Dentro do alerta, cada “faixa” ocupa 100% (evita que a nota
      “suba” e fique ao lado do primeiro card) */
.relatorioocupacao #cmp-alert-comparativo{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
}

/* 3) Largura e centragem consistentes para grid de KPIs, nota e badges */
.relatorioocupacao #cmp-alert-comparativo > .kpi2-grid,
.relatorioocupacao #cmp-alert-comparativo > .kpi-note,
.relatorioocupacao #cmp-alert-comparativo > .kpi-badges{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 8px;
}

/* 4) “Seguro contra flutuações”: neutraliza quaisquer floats/clearfix
      que algum CSS global possa estar aplicando */
.relatorioocupacao #cmp-alert-comparativo .kpi-note,
.relatorioocupacao #cmp-alert-comparativo .kpi-badges{
  float: none !important;
  clear: both !important;
  display: block;
}
/* ——— Tabela comparativo: centralizações finas ——— */
.relatorioocupacao #cmp-table thead tr:first-child th{
  text-align:center;                     /* títulos de grupos (Período A / B / Diferença) */
}

/* 1) Centraliza as barras de % dentro das colunas % A e % B */
.relatorioocupacao #cmp-table td:nth-child(3) .pct-bar,
.relatorioocupacao #cmp-table td:nth-child(7) .pct-bar{
  width: 140px;                          /* ajuste fino: 120–160px se preferir */
  margin: 0 auto;                        /* centraliza o bloco da barrinha */
}

/* 1.1) Centraliza o texto dentro da barrinha (sobrescreve .text-end do JS/Bootstrap) */
.relatorioocupacao #cmp-table td:nth-child(3) .pct-bar > div,
.relatorioocupacao #cmp-table td:nth-child(7) .pct-bar > div{
  text-align: center !important;
}

/* 2) Centraliza números nas colunas RN/Avail (A e B) + Totais */
.relatorioocupacao #cmp-table th:nth-child(4),
.relatorioocupacao #cmp-table td:nth-child(4),  /* RN A */
.relatorioocupacao #cmp-table th:nth-child(5),
.relatorioocupacao #cmp-table td:nth-child(5),  /* Avail A */
.relatorioocupacao #cmp-table th:nth-child(8),
.relatorioocupacao #cmp-table td:nth-child(8),  /* RN B */
.relatorioocupacao #cmp-table th:nth-child(9),
.relatorioocupacao #cmp-table td:nth-child(9),  /* Avail B */
.relatorioocupacao #cmp-table tfoot td:nth-child(4),
.relatorioocupacao #cmp-table tfoot td:nth-child(5),
.relatorioocupacao #cmp-table tfoot td:nth-child(8),
.relatorioocupacao #cmp-table tfoot td:nth-child(9){
  text-align: center !important;         /* vence .text-end do Bootstrap */
}

/* 3) (Opcional) Mantém as colunas de variações centralizadas também */
.relatorioocupacao #cmp-table th:nth-child(10),
.relatorioocupacao #cmp-table td:nth-child(10),
.relatorioocupacao #cmp-table th:nth-child(11),
.relatorioocupacao #cmp-table td:nth-child(11){
  text-align:center;
}
/* ===========================
   VISUAL PBI+ PARA O COMPARATIVO
   (cole no final do seu CSS)
   =========================== */

.relatorioocupacao {
  --pbi-accent: #2563eb;         /* azul principal */
  --pbi-accent-2: #1e40af;       /* azul escuro */
  --pbi-bg: #ffffff;
  --pbi-surface: #f8fafc;        /* fundo zebra */
  --pbi-surface-2: #eef2ff;      /* hover */
  --pbi-border: #e5e7eb;
  --pbi-text-1: #0f172a;
  --pbi-text-2: #334155;
  --pbi-shadow: 0 8px 24px rgba(2, 6, 23, .06);
}

/* Wrapper com cantos arredondados + sombra */
.relatorioocupacao .bi-azul-table-wrapper{
  background: var(--pbi-bg);
  border: 1px solid var(--pbi-border);
  border-radius: 14px;
  box-shadow: var(--pbi-shadow);
  overflow: hidden;              /* garante cantos arredondados do thead */
}

/* Fonte com algarismos tabulares = números “alinhadinhos” */
.relatorioocupacao #cmp-table{
  font-variant-numeric: tabular-nums;
  border-collapse: separate;
  border-spacing: 0;
}

/* Head agrupado “bi” com gradiente + sticky */
.relatorioocupacao #cmp-table thead th{
  color:#fff;
  text-transform: uppercase;
  letter-spacing:.03em;
  font-weight: 800;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 0;
  position: sticky; top: 0; z-index: 3;
}
.relatorioocupacao #cmp-table thead tr:first-child th{
  background: linear-gradient(180deg, var(--pbi-accent) 0%, var(--pbi-accent-2) 100%);
}
.relatorioocupacao #cmp-table thead tr:nth-child(2) th{
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
}
.relatorioocupacao #cmp-table thead th + th{
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12); /* risquinho separador */
}

/* Primeira coluna já é sticky — reforço do contraste */
.relatorioocupacao #cmp-table .sticky-col{
  background: #f1f5ff;          /* leve */
  color: var(--pbi-text-1);
  font-weight: 700;
  position: sticky; left: 0; z-index: 2;
  box-shadow: inset -1px 0 0 var(--pbi-border);
}

/* Zebra + hover suave */
.relatorioocupacao #cmp-table tbody tr:nth-child(even){ background: var(--pbi-surface); }
.relatorioocupacao #cmp-table tbody tr:hover{ background: var(--pbi-surface-2); }

/* Linha de Totais destacada + sticky no rodapé (funciona bem com tabelas longas) */
.relatorioocupacao #cmp-table tfoot tr{
  position: sticky; bottom: 0; z-index: 2;
  background: linear-gradient(180deg,#edf2ff 0%,#e7ecff 100%);
  box-shadow: 0 -8px 16px rgba(2,6,23,.06);
}
.relatorioocupacao #cmp-table tfoot td{
  font-weight: 800;
}

/* Células: mais ar e separador sutil */
.relatorioocupacao #cmp-table th,
.relatorioocupacao #cmp-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--pbi-border);
  color: var(--pbi-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Centralizações (você já pediu): barras % + colunas RN/Avail centralizadas */
.relatorioocupacao #cmp-table td:nth-child(3) .pct-bar,
.relatorioocupacao #cmp-table td:nth-child(7) .pct-bar{
  width: 140px; margin: 0 auto;
}
.relatorioocupacao #cmp-table td:nth-child(3) .pct-bar>div,
.relatorioocupacao #cmp-table td:nth-child(7) .pct-bar>div{
  text-align:center !important;
}
.relatorioocupacao #cmp-table th:nth-child(4),
.relatorioocupacao #cmp-table td:nth-child(4),
.relatorioocupacao #cmp-table th:nth-child(5),
.relatorioocupacao #cmp-table td:nth-child(5),
.relatorioocupacao #cmp-table th:nth-child(8),
.relatorioocupacao #cmp-table td:nth-child(8),
.relatorioocupacao #cmp-table th:nth-child(9),
.relatorioocupacao #cmp-table td:nth-child(9){
  text-align:center !important;
}

/* Barras de %: paleta “PBI” por faixa */
.relatorioocupacao .pct-bar{ background:#e9eefc; border-radius:10px; height:22px; overflow:hidden }
.relatorioocupacao .pct-bar::before{ content:""; position:absolute; inset:0 0 0 0; width:var(--bar,0%) }
.relatorioocupacao .pct-bar > div{ position:relative; z-index:1; font-weight:800; color:#111827; padding:0 6px }
.relatorioocupacao .pct-bar.pct-good::before{ background:linear-gradient(90deg,#22c55e,#16a34a) }
.relatorioocupacao .pct-bar.pct-warn::before{ background:linear-gradient(90deg,#f59e0b,#d97706) }
.relatorioocupacao .pct-bar.pct-bad::before { background:linear-gradient(90deg,#ef4444,#b91c1c) }

/* Pills de variação: um pouco mais “chip” */
.relatorioocupacao #cmp-table .delta .pill{
  border-radius: 999px;
  padding:.2rem .55rem;
  font-weight: 800;
}
.relatorioocupacao #cmp-table .delta.pos .pill{ background:#ecfdf5; color:#047857; border:1px solid #a7f3d0 }
.relatorioocupacao #cmp-table .delta.neg .pill{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca }
.relatorioocupacao #cmp-table .delta.zero .pill{ background:#f1f5f9; color:#334155; border:1px solid #e5e7eb }

/* “Data A/B” com tipografia monoespaçada leve (melhora legibilidade do ISO) */
.relatorioocupacao #cmp-table td:nth-child(2),
.relatorioocupacao #cmp-table td:nth-child(6){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
  color:#475569;
}

/* Marcação visual para finais de semana (classe .weekend — ver JS opcional) */
.relatorioocupacao #cmp-table tbody tr.weekend{
  background: #fff7ed !important;        /* pêssego clarinho */
}
.relatorioocupacao #cmp-table tbody tr.weekend .sticky-col{
  background:#ffedd5;                     /* reforça 1ª coluna no fds */
}
/* leve realce na célula da data */
.bi-azul-table td.weekday-a,
.bi-azul-table td.weekday-b{
  background: #f8fafc;
}

/* badge básico */
.bi-azul-table .wd-badge{
  display:inline-flex; align-items:center;
  font-weight:700; font-size:.72rem;
  padding:.05rem .4rem; border-radius:9999px;
  margin-right:.35rem; border:1px solid transparent;
}

/* cores por dia da semana */
.bi-azul-table td.wd-seg .wd-badge{ /* Monday */
  background:#dbeafe; border-color:#bfdbfe; color:#1e3a8a;
}
.bi-azul-table td.wd-ter .wd-badge{ /* Tuesday */
  background:#e0e7ff; border-color:#c7d2fe; color:#3730a3;
}
.bi-azul-table td.wd-qua .wd-badge{ /* Wednesday */
  background:#ccfbf1; border-color:#99f6e4; color:#065f46;
}
.bi-azul-table td.wd-qui .wd-badge{ /* Thursday */
  background:#cffafe; border-color:#a5f3fc; color:#155e75;
}
.bi-azul-table td.wd-sex .wd-badge{ /* Friday */
  background:#d1fae5; border-color:#a7f3d0; color:#065f46;
}
.bi-azul-table td.wd-sab .wd-badge{ /* Saturday */
  background:#fef3c7; border-color:#fde68a; color:#92400e;
}
.bi-azul-table td.wd-dom .wd-badge{ /* Sunday */
  background:#fee2e2; border-color:#fecaca; color:#991b1b;
}
/* Totais fixo ao fundo da viewport */
.bi-azul-table tfoot tr{
  position: sticky;
  bottom: 0;
  background: #f8fafc;
  box-shadow: 0 -6px 14px rgba(0,0,0,.06);
  z-index: 2;
}
.bi-azul-table tfoot td{ font-weight:800; }
/* faixa sutil no início de cada semana */
.bi-azul-table tbody tr.week-start td{
  border-top: 2px solid #c7d2fe;
  background-image: linear-gradient(to right, rgba(99,102,241,.06), transparent 40%);
}

/* selo "Sem XX" no 1º col (gruda no topo da linha) */
.bi-azul-table tbody td.has-week-label{
  position: relative;
}
.bi-azul-table tbody td.has-week-label::before{
  content: attr(data-week-label);
  position: absolute;
  top: -0.9rem; left: 8px;
  font-size:.7rem; font-weight:800; letter-spacing:.3px;
  color:#4338ca; background:#eef2ff;
  border:1px solid #c7d2fe; border-radius:9999px;
  padding:.05rem .4rem;
}