/* Template HTML/CSS que replica o visual do Power BI (Trevo Lácteos).
   Layout por grelha — os cartões alinham-se sozinhos (sem posicionamento por pixel). */

:root {
  --navy: #101830;
  --navy-2: #223154;
  --verde: #8faa9d;
  --verde-claro: #cdd9d2;
  --verde-esc: #6d8b7d;
  --texto: #3a4256;
  --rotulo: #8a92a6;
  --vermelho: #d1495b;
  --amarelo: #e6b800;
  --borda: #e7eaef;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; font-family: 'Segoe UI', system-ui, Arial, sans-serif; color: var(--texto); }

.app {
  display: flex;
  height: 100vh;
  width: 100%;
  background: #fff;
  overflow: hidden;
}

/* ---------- Barra lateral ---------- */
.sidebar {
  width: 84px; flex: 0 0 84px;
  background: var(--navy);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0;
}
.sidebar .logo { width: 62px; margin-bottom: 26px; }
.sidebar .logo img { width: 100%; display: block; }
.sidebar nav { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; overflow: auto; }
.sidebar a { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #aeb7cc; text-decoration: none; }
.sidebar a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.sidebar a.ativo { background: #33415f; color: #fff; }
.sidebar a:hover { color: #fff; }
.sidebar .rodape { margin-top: 14px; flex: 0 0 40px; }

/* ---------- Conteúdo ---------- */
.main { flex: 1; padding: 16px 22px 20px; display: flex; flex-direction: column; min-width: 0; }
.topo { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.titulo h1 { font-size: 26px; font-weight: 800; margin: 0; color: var(--navy); letter-spacing: .3px; }
.titulo .sub { font-size: 14px; color: var(--rotulo); margin-top: 2px; }
.filtros { display: flex; gap: 10px; align-items: center; }
.filtros label { font-size: 13px; color: var(--rotulo); display: flex; gap: 5px; align-items: center; }
.filtros select { font-size: 13px; padding: 4px 8px; border: 1px solid #cfd5df; border-radius: 6px; background: #fff; color: var(--texto); }
.atualizado { font-size: 13px; color: var(--texto); font-weight: 600; white-space: nowrap; }
.atualizado span { color: var(--rotulo); font-weight: 400; }

/* ---------- Grelha ---------- */
.grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "prod prod prod acum acum acum tend tend tend gaug gaug gaug"
    "estq estq estq fifo fifo bloq bloq cort cort gaug gaug gaug"
    "estq estq estq abse abse para para oeee oeee gaug gaug gaug";
  gap: 12px;
}
/* Grid da página Absenteísmo */
.grid-abs {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "adia adia adia adia adia amed amed amed atca atca atca atca"
    "adia adia adia adia adia aemp aemp aemp afun afun afun afun"
    "arnk arnk arnk arnk arnk atur atur atur amot amot amot amot";
}
.a-dia { grid-area: adia; } .a-med { grid-area: amed; } .a-tca { grid-area: atca; }
.a-emp { grid-area: aemp; } .a-fun { grid-area: afun; } .a-rnk { grid-area: arnk; }
.a-tur { grid-area: atur; } .a-mot { grid-area: amot; }
.a-med .big { font-size: 46px; justify-content: center; margin-top: 8px; }

/* Grid da página Paradas */
.grid-paradas {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "pmaq pmaq pmaq pmaq pmaq pkpi pkpi pequ pequ pequ pequ pequ"
    "pcod pcod pcod pcod pcod ptur ptur ptur ptip ptip ptip ptip"
    "ptab ptab ptab ptab ptab ptab ptab ptab ptab ptab ptab ptab";
}
.p-maq { grid-area: pmaq; } .p-kpi { grid-area: pkpi; } .p-equ { grid-area: pequ; }
.p-cod { grid-area: pcod; } .p-tur { grid-area: ptur; } .p-tip { grid-area: ptip; } .p-tab { grid-area: ptab; }
.p-kpi .bloco { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.p-kpi .bloco h4 { margin: 0; font-size: 14px; color: #6b7385; font-weight: 700; }
.p-kpi .bloco .v { font-size: 30px; font-weight: 800; color: var(--texto); line-height: 1.1; }

/* Grid da página Corte */
.grid-corte {
  grid-template-rows: minmax(0, 0.62fr) minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas:
    "k1 k1 k1 k2 k2 k2 k3 k3 k3 k4 k4 k4"
    "t5 t5 t5 t5 fa fa fa fa re re re re"
    "tb tb tb tb tb tb tb tb tb tb tb tb";
}
.c-k1 { grid-area: k1; } .c-k2 { grid-area: k2; } .c-k3 { grid-area: k3; } .c-k4 { grid-area: k4; }
.c-t5 { grid-area: t5; } .c-fa { grid-area: fa; } .c-re { grid-area: re; } .c-tb { grid-area: tb; }
.kpi-corte h3 { font-size: 15px; color: #6b7385; }
.kpi-corte .big { font-size: 40px; justify-content: center; margin-top: 6px; }

/* Grid da página Estoques */
.grid-estoque {
  grid-template-columns: 1.25fr 1.25fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "dep fam emb"
    "tab tab emb";
}
.a-dep { grid-area: dep; } .a-fam { grid-area: fam; } .a-emb { grid-area: emb; } .a-tab { grid-area: tab; }
.filtros-dep { display: flex; gap: 8px; margin-bottom: 10px; }
.filtros-dep button { flex: 1; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; color: var(--texto); font-size: 13px; font-weight: 600; cursor: pointer; }
.filtros-dep button.ativo { background: var(--verde); color: #fff; border-color: var(--verde); }

.a-prod { grid-area: prod; } .a-acum { grid-area: acum; } .a-tend { grid-area: tend; }
.a-gaug { grid-area: gaug; } .a-estq { grid-area: estq; } .a-fifo { grid-area: fifo; }
.a-bloq { grid-area: bloq; } .a-cort { grid-area: cort; } .a-abse { grid-area: abse; }
.a-para { grid-area: para; } .a-oeee { grid-area: oeee; }

/* ---------- Cartão ---------- */
.card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--borda);
  box-shadow: 0 2px 8px rgba(27,42,68,.06);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px; background: var(--navy); border-radius: 0 4px 4px 0; }
.card h3 { margin: 0 0 6px; padding-right: 30px; font-size: clamp(11.5px, 0.95vw, 15px); font-weight: 800; color: #6b7385; display: flex; align-items: center; gap: 4px; }
.card h3 .un { font-size: clamp(9.5px, 0.78vw, 12px); font-weight: 600; color: var(--rotulo); }
.card .icone { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; color: #aeb7cc; }
.card .icone svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* KPIs dentro dos cartões */
.linhas { display: flex; flex-direction: column; gap: 1px; }
.kv { font-size: 13px; color: var(--rotulo); }
.kv b { color: var(--texto); font-weight: 700; margin-left: 7px; }
.big { font-size: 34px; font-weight: 800; color: var(--texto); line-height: 1; display: flex; align-items: center; gap: 8px; }
.big.md { font-size: 26px; }
.big .st { font-size: 20px; }
.st.ok { color: var(--verde-esc); } .st.no { color: var(--vermelho); } .st.warn { color: var(--amarelo); }
.media { font-size: 12px; color: var(--rotulo); margin-top: auto; }
.media b { color: var(--texto); margin-left: 6px; }

.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-chart { flex: 1; min-height: 0; margin-top: 4px; }


.gauges { display: flex; flex-direction: column; height: 100%; }
.gauges .g { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gauges .g h4 { margin: 4px 0 0; font-size: 14px; font-weight: 800; color: #6b7385; }
.gauges .g .gc { flex: 1; min-height: 0; }

/* ---------- Tabela (Acuracidade) ---------- */
.card-tabela { grid-area: unset; }
.tabela-wrap { flex: 1; overflow: auto; min-height: 0; }
table.matriz { width: 100%; border-collapse: collapse; font-size: 15px; }
table.matriz th { text-align: right; font-weight: 600; color: #6b7385; padding: 8px 14px; border-bottom: 2px solid var(--borda); white-space: nowrap; }
table.matriz th.esq { text-align: left; }
table.matriz td { padding: 6px 14px; border-bottom: 1px solid #f1f3f6; text-align: right; white-space: nowrap; }
table.matriz td.esq { text-align: left; }
table.matriz tr.maq { cursor: pointer; }
table.matriz tr.maq > td { font-weight: 700; color: var(--texto); }
table.matriz tr.maq:hover > td { background: #f6f8fa; }
table.matriz tr.sku > td { font-weight: 400; color: #5a6172; }
table.matriz tr.sku td.esq { padding-left: 40px; font-size: 13.5px; color: #6b7385; }
table.matriz tr.total > td { font-weight: 800; color: var(--texto); border-top: 2px solid var(--borda); border-bottom: none; padding-top: 9px; }
table.matriz .toggle { display: inline-block; width: 16px; height: 16px; line-height: 14px; text-align: center; border: 1px solid #b9c0cd; border-radius: 3px; margin-right: 8px; font-size: 12px; color: #6b7385; }
table.matriz td.pct-ok { color: #1a9e57 !important; }
table.matriz td.pct-warn { color: #c8960a !important; }
table.matriz td.pct-no { color: #d1495b !important; }

.carregando { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); font-size: 18px; color: var(--rotulo); z-index: 100; }
.carregando.oculto { display: none; }

/* ---------- Botão Atualizar dados ---------- */
.atualizar-caixa { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; }
#btn-atualizar { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--verde-esc); border-radius: 8px; background: var(--verde-esc); color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; }
#btn-atualizar:hover:not(:disabled) { background: #5c7a6c; }
#btn-atualizar:disabled { opacity: .65; cursor: default; }
#btn-atualizar.a-girar svg { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
#sync-estado { font-size: 11px; color: var(--rotulo); white-space: nowrap; }
#link-completo { font-size: 10.5px; color: var(--rotulo); text-decoration: none; border-bottom: 1px dotted currentColor; }
#link-completo:hover { color: var(--verde-esc); }

/* ---------- Página OEE ---------- */
.grid-oee {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "opr opr opr okpi okpi okpi okpi okpi okpi ohr ohr ohr"
    "omaq omaq omaq omaq odia odia odia odia odia odia odia odia";
}
.o-pr { grid-area: opr; } .o-kpi { grid-area: okpi; } .o-hr { grid-area: ohr; }
.o-maq { grid-area: omaq; } .o-dia { grid-area: odia; }

/* cartões de valores com ícone (Produção Real/Teórica/Refugo e Horas) */
.val-lista { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 4px; }
.val-item .rot { font-size: 14px; font-weight: 800; color: #6b7385; }
.val-item .rot small { font-weight: 600; color: var(--rotulo); font-size: 11px; }
.val-item .linha { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.val-item .linha svg { width: 26px; height: 26px; flex: 0 0 26px; stroke: #aeb7cc; fill: none; stroke-width: 1.6; }
.val-item .v { font-size: 26px; font-weight: 800; color: var(--texto); line-height: 1; }

/* filtros + 4 indicadores do cartão central */
.oee-filtros { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.oee-filtros label { font-size: 12px; color: var(--rotulo); display: flex; flex-direction: column; gap: 3px; }
.oee-filtros input, .oee-filtros select { font-size: 13px; padding: 4px 8px; border: 1px solid #cfd5df; border-radius: 6px; background: #fff; color: var(--texto); font-family: inherit; }
.oee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; align-content: center; flex: 1; }
.oee-item .oee-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 3px solid var(--navy); padding-bottom: 3px; }
.oee-item .oee-topo span { font-size: 15px; font-weight: 800; color: #7c8496; letter-spacing: .4px; }
.hex { background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; padding: 5px 15px; min-width: 70px; text-align: center;
       clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); }
.barra { height: 9px; background: var(--verde-claro); border-radius: 5px; margin-top: 7px; overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--verde); border-radius: 5px; transition: width .4s; }
.sidebar a.sair:hover { color: #ff8b8b; background: rgba(255,120,120,.12); }

/* ---------- Página Utilizadores ---------- */
.util-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.form-novo { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-novo label { font-size: 12px; color: var(--rotulo); display: flex; flex-direction: column; gap: 4px; }
.form-novo input, .form-novo select { font-size: 14px; padding: 7px 10px; border: 1px solid #cfd5df; border-radius: 7px; font-family: inherit; color: var(--texto); }
.form-novo input { min-width: 260px; }
.form-novo button { padding: 8px 20px; border: 0; border-radius: 7px; background: var(--verde-esc); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.form-novo button:disabled { opacity: .6; cursor: default; }
.aviso { margin: 10px 0 0; padding: 9px 12px; border-radius: 7px; font-size: 13px; line-height: 1.5; }
.aviso.ok { background: #e8f3ec; color: #1a6b42; border: 1px solid #bcdcc9; }
.aviso.erro { background: #fdeaec; color: #a3263a; border: 1px solid #f0c2ca; }
td.acoes { text-align: right; white-space: nowrap; }
td.acoes button { margin-left: 6px; padding: 4px 10px; border: 1px solid #cfd5df; border-radius: 6px; background: #fff; color: var(--texto); font-size: 12px; cursor: pointer; font-family: inherit; }
td.acoes button:hover { background: #f3f5f8; }
td.acoes button.perigo { color: var(--vermelho); border-color: #f0c2ca; }
td.acoes button.perigo:hover { background: #fdeaec; }
.explica { margin: 0 0 10px; font-size: 12.5px; color: var(--rotulo); line-height: 1.5; }
.botoes-sync { display: flex; gap: 10px; flex-wrap: wrap; }
.botoes-sync button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.botoes-sync button:disabled { opacity: .6; cursor: default; }
.botoes-sync .principal { border: 1px solid var(--verde-esc); background: var(--verde-esc); color: #fff; }
.botoes-sync .secundario { border: 1px solid #cfd5df; background: #fff; color: var(--texto); }
.botoes-sync .secundario:hover:not(:disabled) { background: #f3f5f8; }
.botoes-sync .a-girar svg { animation: girar 1s linear infinite; }
.aviso.info { background: #eef2f7; color: #4a5468; border: 1px solid #d8dfe8; }

/* ---------- Cartões de KPI da Visão Geral: conteúdo centrado e maior ---------- */
/* números grandes ocupam o espaço livre e ficam centrados */
.a-fifo .big, .a-bloq .big, .a-cort .big, .a-abse .big, .a-para .big, .a-oeee .big {
  flex: 1; align-items: center; justify-content: center; margin: 4px 0;
  font-size: clamp(26px, 3.1vw, 52px);
}
.a-cort .big.md { font-size: clamp(24px, 2.7vw, 46px); }
.a-oeee .big { font-size: clamp(24px, 2.8vw, 50px); }
/* Bloqueio e Paradas: media com detalhes em coluna */
.a-bloq .media, .a-para .media { display: flex; flex-direction: column; gap: 2px; text-align: center; font-size: 12px; white-space: nowrap; }
.a-bloq .media b, .a-para .media b { font-size: 14px; }
/* Estoque P.A: total em destaque + duas colunas Refrig / UHT */
.a-estq .big { flex: 1; align-items: center; justify-content: center; margin: 0; font-size: clamp(28px, 3vw, 50px); }
.est-colunas { display: flex; gap: 16px; margin-top: auto; }
.est-col { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.est-col h4 { margin: 0 0 3px; font-size: clamp(11px, 0.85vw, 13px); font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .5px; }
.a-estq .kv { font-size: clamp(11px, 0.82vw, 13.5px); }
.a-estq .kv b { font-size: clamp(11.5px, 0.88vw, 14px); }
.est-total-linha { font-weight: 700; }
.est-total-linha, .est-total-linha b { color: var(--navy) !important; }
/* "Média Diária" centrada em baixo */
.a-fifo .media, .a-cort .media, .a-abse .media, .a-oeee .media { text-align: center; font-size: 12px; white-space: nowrap; }
.a-fifo .media b, .a-cort .media b, .a-abse .media b, .a-oeee .media b { font-size: 14px; }
.a-cort .media { display: flex; flex-direction: column; gap: 2px; }