/* 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; align-items: center; }
.sidebar a { width: 40px; height: 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: auto; }

/* ---------- 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; font-size: 15px; font-weight: 800; color: #6b7385; display: flex; align-items: center; gap: 4px; }
.card h3 .un { font-size: 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: 3px; }
.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); }

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

/* Estoque: duas colunas de kv */
.est-grid { display: grid; grid-template-columns: 1fr; gap: 1px; }
.est-sep { height: 6px; }

.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; }