/* ── Paleta Engedelta ──────────────────────────────────────────────────────── */
:root {
  /* Paleta derivada do LOGO: azul médio #3070a0 e ciano #30a0d0 do triângulo.
     Contraste conferido (WCAG AA, texto normal exige 4.5:1 sobre branco):
     navy 5.58:1 · blue 4.60:1 — ambos servem como texto E como fundo de texto branco. */
  --eng-navy:   #2a6d9c;   /* azul do logo — barra lateral, cabeçalhos, títulos */
  --eng-blue:   #1d7cb0;   /* azul de ação — botões, links, paginação */
  --eng-light:  #34a2d2;   /* ciano vivo do logo — acentos (sem texto em cima) */
  --eng-bg:     #f0f4f9;   /* fundo geral */
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--eng-bg);
  font-size: 0.92rem;
  margin: 0;
}

/* ── Login Screen ──────────────────────────────────────────────────────────── */
.login-overlay {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--eng-navy) 0%, var(--eng-blue) 100%);
}

.login-card {
  background: #fff;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background-color: var(--eng-navy);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.sidebar-brand img { flex-shrink: 0; }

.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  color: rgba(255,255,255,0.88);   /* subiu de .72: no azul mais claro .72 caía p/ 3.7:1 */
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
  cursor: pointer;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}

.sidebar-link.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-left-color: var(--eng-light);
}

.sidebar-link i { font-size: 1rem; flex-shrink: 0; }

.sidebar-footer {
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.4rem;
}

.sidebar-user-info { line-height: 1.3; }

.sidebar-badge {
  font-size: 0.68rem;
  /* fundo claro + texto azul: sobre a barra lateral (agora azul) qualquer azul
     de fundo somia e o selo virava texto solto */
  background: rgba(255,255,255,0.92);
  color: var(--eng-navy);
  font-weight: 700;
  border-radius: 0.3rem;
  padding: 0.05em 0.45em;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ── Main Content ──────────────────────────────────────────────────────────── */
#appLayout {
  display: flex;
  min-height: 100vh;
}

#mainContent {
  margin-left: 220px;
  flex: 1;
  min-width: 0; /* permite o item flex encolher (evita estouro horizontal por gráficos/tabelas largas) */
  padding: 1.5rem 1.75rem;
  min-height: 100vh;
}

.page-title {
  color: var(--eng-navy);
  font-weight: 700;
  margin-bottom: 1.25rem;
  font-size: 1.15rem;
}

/* ── Botões primários ──────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--eng-blue);
  border-color: var(--eng-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  /* escurece no hover: clarear para o ciano deixava o texto branco em 2.9:1 */
  background-color: var(--eng-navy);
  border-color: var(--eng-navy);
}

.btn-outline-primary {
  color: var(--eng-blue);
  border-color: var(--eng-blue);
}

.btn-outline-primary:hover {
  background-color: var(--eng-blue);
  border-color: var(--eng-blue);
}

/* ── Card header ───────────────────────────────────────────────────────────── */
.card-header.bg-primary {
  background-color: var(--eng-navy) !important;
}

/* ── Modal header ──────────────────────────────────────────────────────────── */
.modal-header.bg-primary {
  background-color: var(--eng-navy) !important;
}

/* ── Tabela ────────────────────────────────────────────────────────────────── */
.card {
  border-radius: 0.5rem;
}

.table thead th {
  background-color: #e6edf7;   /* clareado: com o novo azul, #dde5f0 dava 4.39:1 */
  color: var(--eng-navy);
  font-weight: 600;
  white-space: nowrap;
}

.table-dados thead th {
  white-space: normal;
  word-break: break-word;
}

.table td {
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
}

/* ── Status badges ─────────────────────────────────────────────────────────── */
.badge-status {
  font-size: 0.78rem;
  padding: 0.3em 0.6em;
  border-radius: 0.4rem;
}

.status-atrasado  { background-color: #f8d7da; color: #842029; }
.status-adiantado { background-color: #d1e7dd; color: #0f5132; }
.status-prazo     { background-color: #cce4ff; color: #0d2347; }
.status-outro     { background-color: #e2e3e5; color: #41464b; }

/* ── Progress bar ──────────────────────────────────────────────────────────── */
#progressArea .progress {
  height: 1.4rem;
  border-radius: 0.4rem;
}

#progressArea .progress-bar {
  background-color: var(--eng-blue);
}

/* ── Tabela scroll ─────────────────────────────────────────────────────────── */
.table-responsive {
  max-height: 520px;
  overflow-y: auto;
}

/* Cronograma (Atividades em Destaque): preenche a viewport ao rolar até o fim, com
   scroll interno próprio. Só cresce quando há linhas suficientes (max-height). */
#tab-dashboard .table-responsive.cronograma-scroll {
  max-height: calc(100vh - 130px);
}
/* Cabeçalho fixo durante o scroll interno do cronograma */
#tab-dashboard .cronograma-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e9eef5;
}
/* Larguras fixas: EDT/Nome compactos e à esquerda; Anotações (única coluna SEM largura
   no thead) absorve a sobra e fica larga. As larguras saem do thead em index.html.
   O min-width protege a coluna Anotações: as demais somam 888px, então sem ele
   (tela estreita / menu lateral aberto) a coluna sem largura era espremida a quase
   zero e o texto ficava ilegível. Agora o contêiner rola na horizontal. */
#tab-dashboard .cronograma-scroll table { table-layout: fixed; min-width: 1180px; }
/* Topo, e não meio: nas linhas de 1 linha não muda nada; nas que a anotação quebra
   em várias, o EDT/Nome ficam alinhados com a 1ª linha do texto. */
#tab-dashboard .cronograma-scroll td { overflow-wrap: anywhere; vertical-align: top; }

/* Anotações: aparece INTEIRA, com a linha crescendo só o necessário.
   - pre-wrap  → respeita quebras de linha vindas do CSV e quebra o que passar;
   - break-word → só parte palavra que não cabe sozinha (não pica no meio à toa);
   - line-height/padding enxutos → altura justa, sem sobra. */
#tab-dashboard .cronograma-scroll td.col-anotacoes {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* ── Paginação ─────────────────────────────────────────────────────────────── */
.pagination .page-link {
  cursor: pointer;
  color: var(--eng-blue);
}

.pagination .page-item.active .page-link {
  background-color: var(--eng-blue);
  border-color: var(--eng-blue);
}

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.text-truncate-cell {
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
}

/* ── Tabela de dados importados: colunas iguais com quebra de linha ───────── */
.table-dados {
  table-layout: fixed;
  width: 100%;
}

.table-dados th,
.table-dados td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  vertical-align: middle;
  font-size: 0.82rem;
}

/* Coluna Nome (5ª) mais larga; as 15 restantes dividem igualmente os ~86% */
.table-dados th:nth-child(5),
.table-dados td:nth-child(5) {
  width: 14%;
}

/* ── Dashboard ─────────────────────────────────────────────────────────────── */

/* Multiselects de filtro */
.dash-select {
  min-height: 110px;
  font-size: 0.85rem;
}

/* Card de cada gráfico */
.chart-card {
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 0.85rem 1rem 1rem;
  height: 100%;
}

.chart-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--eng-navy);
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

/* Badge de semáforo no painel de indicadores */
.dash-badge {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

/* Célula larga da tabela resumo */
#dashResumoBody td:first-child {
  max-width: 260px;
}

/* Spinner centralizado */
#dashLoading .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 0.3em;
  color: var(--eng-blue);
}

/* ── Linha em destaque (coluna Dest. preenchida) ───────────────────────────── */
tr.row-destaque td {
  background-color: #CCEFFE !important;
  font-weight: 700;
}

/* ── Cores por nível de EDT (tabela Atividades em Destaque) ─────────────────── */
/* Cor de fundo é por NÍVEL. O NEGRITO é por HIERARQUIA (por ramo): só as linhas-PAI
   (que têm sub-níveis) ficam em negrito; as FOLHAS (último nível de cada ramo, sem
   filhos) ficam em texto simples — mesmo que tenham cor (ex.: 1.1.1). */
tr.edt-nivel-1 td { background-color: #9ec5fe !important; }
tr.edt-nivel-2 td { background-color: #c5dbfd !important; }
tr.edt-nivel-3 td { background-color: #e6f0ff !important; }
#tab-dashboard .cronograma-scroll tr.linha-pai td { font-weight: 600; }

/* ── Atas de reunião (Reunião de Alinhamento — Eng. e Fábrica) ── */
.ata-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media(max-width:768px){.ata-grid{grid-template-columns:1fr}}
.ata-setor{border-left:3px solid var(--eng-navy,#1a4f9c);padding:2px 0 2px 10px}
.ata-setor-tit{font-size:.78rem;font-weight:700;color:var(--eng-navy,#1a4f9c);text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px}
.ata-setor-txt{font-size:.9rem;color:#333;white-space:normal}

/* ── Atas: lista limpa (master-detail) ── */
.ata-lista .ata-item{cursor:pointer;padding:14px 18px}
.ata-lista .ata-item .text-primary{font-size:.92rem}
.ata-status{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em}

/* ── Atas de Obra: grupos visuais ── */
.grupo-card{border:1px solid #e3e8ef;border-radius:10px;overflow:hidden;background:#fff}
.grupo-head{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;
  padding:9px 16px;color:#fff;border:0}
.grupo-eng    .grupo-head{background:#1a4f9c}
.grupo-eqp    .grupo-head{background:#0891b2}
.grupo-frota  .grupo-head{background:#b45309}
.grupo-anexos .grupo-head{background:#6d28d9}
.grupo-obs    .grupo-head{background:#475569}
.grupo-card .ata-setor{border-left:3px solid #cbd5e1}

/* ── Anexos ── */
.ata-anexos{display:flex;flex-wrap:wrap;gap:12px}
.ata-anexo{position:relative;width:120px;border:1px solid #e3e8ef;border-radius:8px;padding:8px;background:#fafbfc;text-align:center}
.ata-anexo-img{width:100%;height:80px;object-fit:cover;border-radius:5px;cursor:pointer;background:#eef1f6}
.ata-anexo-file{height:80px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#6d28d9;cursor:pointer}
.ata-anexo-nome{font-size:.72rem;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:#1a4f9c}
.ata-anexo-tam{font-size:.66rem;color:#94a3b8}
.btn-anexo-rm{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;
  background:#dc2626;color:#fff;font-size:.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── Apresentação: lightbox de visualização de anexos ── */
#tab-apresentacao .ata-anexo-img,
#tab-apresentacao .ata-anexo-file,
#tab-apresentacao .ata-anexo-nome{cursor:zoom-in}
.apres-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:1080;
  display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.apres-lightbox[hidden]{display:none}
.apres-lightbox img{max-width:95%;max-height:95%;border-radius:6px;box-shadow:0 12px 48px rgba(0,0,0,.55);cursor:default}
.apres-lightbox-video{max-width:95%;max-height:95%;border-radius:6px;box-shadow:0 12px 48px rgba(0,0,0,.55);background:#000;cursor:default}
.apres-lightbox img[hidden],.apres-lightbox-video[hidden]{display:none}
#tab-apresentacao .ata-anexo-video{color:#1a4f9c;background:#eef3fb}
.apres-lightbox-close{position:absolute;top:12px;right:26px;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer}
.apres-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);color:#fff;font-size:2rem;line-height:1;
  cursor:pointer;user-select:none;background:rgba(0,0,0,.35);padding:14px 16px;border-radius:12px;z-index:2}
.apres-lightbox-nav:hover{background:rgba(0,0,0,.65)}
.apres-lightbox-prev{left:22px}
.apres-lightbox-next{right:22px}
.apres-lightbox-nav[hidden]{display:none}
.apres-lightbox-contador{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;
  background:rgba(0,0,0,.5);padding:4px 14px;border-radius:999px;font-size:.9rem;z-index:2}
.apres-lightbox-contador[hidden]{display:none}

/* ── Apresentação: tela cheia de um quadrante ── */
.apres-quad-expand{float:right;cursor:pointer;color:#93a8c0;line-height:1}
.apres-quad-expand:hover{color:#1a4f9c}
.apres-quadfull{position:fixed;inset:0;background:rgba(13,35,71,.78);z-index:1075;
  display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.apres-quadfull[hidden]{display:none}
.apres-quadfull-card{background:#fff;border-radius:12px;width:min(96vw,1500px);height:min(92vh,900px);
  padding:20px 24px;display:flex;flex-direction:column;cursor:default;box-shadow:0 12px 48px rgba(0,0,0,.45)}
.apres-quadfull-tit{font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.02em;
  color:#0d2347;border-bottom:1px solid #e2e8f0;padding-bottom:10px;margin-bottom:14px}
.apres-quadfull-body{flex:1;min-height:0;overflow:auto;position:relative}
.apres-quadfull-body .ata-anexos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.apres-quadfull-body .ata-anexo-img,.apres-quadfull-body .ata-anexo-file{height:300px}
@media print{.apres-quad-expand{display:none}}

/* ── Apresentação: botão "Ata" (azul mais escuro) e card sobreposto da Reunião Geral ── */
.apres-btn-ata{background:#0a1f3c;color:#fff;border:0;font-weight:600;line-height:1.1}
.apres-btn-ata:hover,.apres-btn-ata:focus{background:#061529;color:#fff}
.apres-ata-overlay{position:fixed;inset:0;z-index:1085;display:flex;align-items:flex-start;
  justify-content:center;padding:6vh 16px;background:rgba(13,35,71,.18)}
.apres-ata-card{background:#fff;border-radius:12px;box-shadow:0 12px 44px rgba(0,0,0,.4);
  width:min(760px,94vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.apres-ata-head{background:#0a1f3c;color:#fff;padding:12px 16px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between}
.apres-ata-close{background:transparent;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.apres-ata-body{padding:16px 18px;overflow-y:auto}
.apres-ata-texto{white-space:normal;word-break:break-word}
@media print{.apres-btn-ata{display:none}}

/* ── Apresentação: anexos grandes, 3 por linha preenchendo o quadrante ── */
#tab-apresentacao .ata-anexos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#tab-apresentacao .ata-anexo{width:auto;min-width:0;padding:10px}
#tab-apresentacao .ata-anexo-img,
#tab-apresentacao .ata-anexo-file{height:240px}
#tab-apresentacao .ata-anexo-file{font-size:3.4rem}
#tab-apresentacao .ata-anexo-nome,
#tab-apresentacao .ata-anexo-tam{display:none}

/* ── Apresentação: quadrantes com borda ── */
#tab-apresentacao .apres-quad{border:1px solid #d4dbe4;border-radius:10px;padding:14px;background:#fff}
#tab-apresentacao .apres-obs{min-height:0}
#tab-apresentacao .apres-quad-tit{font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;
  color:#64748b;margin-bottom:10px;border-bottom:1px solid #eef1f6;padding-bottom:6px}
#tab-apresentacao .apres-obs{min-height:0;white-space:normal}

/* ── Recolher/expandir barra lateral ── */
#sidebar{transition:transform .2s ease}
#mainContent{transition:margin-left .2s ease}
#sidebarToggle{position:fixed;top:14px;left:178px;z-index:101;width:32px;height:32px;border:0;border-radius:7px;
  background:var(--eng-blue);color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);transition:left .2s ease}
#sidebarToggle:hover{filter:brightness(1.12)}
body.sidebar-collapsed #sidebar{transform:translateX(-100%)}
body.sidebar-collapsed #mainContent{margin-left:0}
body.sidebar-collapsed #sidebarToggle{left:8px}

/* ── Fundo escuro da gaveta (só existe no celular) ───────────────────────── */
#sidebarBackdrop{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:99;
  opacity:0;pointer-events:none;transition:opacity .2s ease;display:none}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE (até 991px) — a barra lateral de 220px consumia mais da metade de
   uma tela de 390px. Aqui ela vira GAVETA: fica fora da tela por padrão e o
   botão (#sidebarToggle) passa a ser o hambúrguer que a abre sobre o conteúdo.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  #sidebar{width:min(280px,84vw);transform:translateX(-100%);box-shadow:0 0 24px rgba(0,0,0,.35)}
  body.sidebar-open #sidebar{transform:translateX(0)}
  /* no celular a gaveta flutua: o conteúdo ocupa a largura toda */
  #mainContent{margin-left:0 !important;padding:1rem .9rem}
  /* o toggle vira hambúrguer fixo no canto e não acompanha mais a barra */
  #sidebarToggle{left:10px !important;top:10px;width:40px;height:40px;font-size:1.15rem}
  /* com a gaveta aberta ele vai para o canto superior DIREITO dela — em cima do
     logo (left:10px) o X cobria a marca */
  body.sidebar-open #sidebarToggle{left:calc(min(280px,84vw) - 50px) !important}
  body.sidebar-open #sidebarBackdrop{display:block;opacity:1;pointer-events:auto}
  body.sidebar-open{overflow:hidden}          /* trava o fundo com a gaveta aberta */
  /* o cabeçalho da página não pode ficar embaixo do hambúrguer */
  #mainContent > div > .page-title:first-child,
  #mainContent .page-title{margin-left:52px}
  /* links da gaveta com alvo de toque confortável */
  .sidebar-link{padding-top:.7rem;padding-bottom:.7rem}
  /* < 16px faz o Safari do iPhone dar zoom ao focar o campo */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,textarea{font-size:16px !important}
  /* Tabelas largas: .table-responsive só rola se a tabela for MAIOR que a caixa.
     Sem min-width a tabela encolhe até caber e os títulos quebram letra a letra
     ("Ob ra", "Anota çõ es"). Com min-width ela mantém colunas legíveis e o
     contêiner rola na horizontal. */
  .table-responsive{-webkit-overflow-scrolling:touch}
  .table-responsive > table{min-width:680px}
  .table-responsive > table th{white-space:nowrap}
  /* filtros e barras de ação empilham em vez de espremer */
  .card-body > .row > [class*="col-"]{margin-bottom:.5rem}
}

/* Telas muito estreitas: título menor para não quebrar em três linhas */
@media (max-width: 400px) {
  .page-title{font-size:1.15rem}
}

/* ── Apresentação no celular ─────────────────────────────────────────────────
   Os 4 filtros têm min-width inline (150+170+190+190px) numa linha que não
   quebrava: somavam 810px e a página PÚBLICA estourava 432px num telefone.
   Aqui eles empilham e ocupam a largura toda (o !important vence o inline). */
@media (max-width: 991.98px) {
  .apres-filtros{flex-wrap:wrap;width:100%}
  .apres-filtros > div{flex:1 1 100%}
  .apres-filtros select,
  .apres-filtros .dropdown,
  .apres-filtros .dropdown > button{min-width:0 !important;width:100%}
  .apres-filtros > button{flex:1 1 100%}
  .apres-filtros .dropdown-menu{min-width:0 !important;width:100%}
  /* quadros da apresentação: um por linha no celular */
  #tab-apresentacao .apres-quad{padding:12px}
}