/*
 * MasterPlating V1044 — HENKATEN NO PADRÃO DO SISTEMA
 * Só aparência da lista (fpHenkaten). Reaproveita os padrões que já existem:
 *   cabeçalho de cartão V803 (barra laranja, título 15px) · tabela V804 · selo V804 · botões global-v156.
 * Carregada por último no index.html. Classes antigas "hk-*" continuam; aqui só se desfazem os desvios
 * (grade de 4 colunas da barra, cabeçalho azul próprio, fonte mono na data, botões de 36px, rodapé próprio).
 */
:root{--hkp-borda:#d6e2ef;--hkp-linha:#edf1f5;--hkp-suave:#5b6576;--hkp-azul:#1766b3}

/* selos que o padrão ainda não nomeava para estas classes (mesmas cores do V804) */
.hk-badge.neutro:not(.mpc-livre),.hk-status.neutro:not(.mpc-livre){color:var(--mps-neutro-fg,#4f5b6d) !important;background:var(--mps-neutro-bg,#eef1f5) !important;border-color:var(--mps-neutro-bd,#dce3ec) !important}

/* barra de filtros: busca ocupa o espaço, as demais ações ficam do tamanho do conteúdo */
#main .hk-shell .hk-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;padding:10px 14px;background:#fff;border:1px solid var(--hkp-borda);border-radius:12px;box-sizing:border-box}
#main .hk-shell .hk-search{flex:1 1 320px;min-width:240px;max-width:none;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid #c7d5e5;border-radius:8px;background:#fff;box-sizing:border-box;color:#6b7e93}
#main .hk-shell .hk-search:focus-within{border-color:var(--hkp-azul);box-shadow:0 0 0 3px rgba(23,102,179,.12)}
#main .hk-shell .hk-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0;font-size:13px;color:#1b2433;box-shadow:none}
#main .hk-shell .hk-check{display:inline-flex !important;align-items:center;gap:8px;margin:0;font-size:13px;color:#28445f;white-space:nowrap}
#main .hk-shell .hk-export{display:inline-flex !important;align-items:center;justify-content:center;gap:7px;width:auto !important;min-width:0;height:36px;padding:0 16px;flex:0 0 auto;font-size:12px;font-weight:600 !important}

/* cartão da tabela: cabeçalho padrão (barra laranja) e corpo sem desvios */
#main .hk-shell .hk-table-card{background:#fff;border:1px solid var(--hkp-borda);border-radius:12px;overflow:hidden}
#main .hk-shell .hk-table-wrap{overflow-x:auto;border:0;border-radius:0;box-shadow:none;background:transparent}
#main .hk-shell .hk-table{width:100%;min-width:1000px;table-layout:auto}
#main .hk-shell .hk-table th,#main .hk-shell .hk-table td{box-sizing:border-box;overflow-wrap:break-word}
#main .hk-shell .hk-table th:nth-child(1),#main .hk-shell .hk-table td:nth-child(1){width:112px;white-space:nowrap}
#main .hk-shell .hk-table th:nth-child(2),#main .hk-shell .hk-table td:nth-child(2){width:118px}
#main .hk-shell .hk-table th:nth-child(3),#main .hk-shell .hk-table td:nth-child(3){width:auto;min-width:240px}
#main .hk-shell .hk-table th:nth-child(4),#main .hk-shell .hk-table td:nth-child(4){width:190px}
#main .hk-shell .hk-table th:nth-child(5),#main .hk-shell .hk-table td:nth-child(5){width:140px}
#main .hk-shell .hk-table th:nth-child(6),#main .hk-shell .hk-table td:nth-child(6){width:132px}
#main .hk-shell .hk-table th:nth-child(7),#main .hk-shell .hk-table td:nth-child(7){width:148px;white-space:nowrap}
#main .hk-shell .hk-table th:nth-child(8),#main .hk-shell .hk-table td:nth-child(8){width:148px}
#main .hk-shell .hk-table td{font-size:13px;line-height:1.4}
#main .hk-shell .hk-table td.hk-date{font-family:inherit !important;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
#main .hk-shell .hk-table td strong{display:block;font-weight:600;color:#1b2433}
#main .hk-shell .hk-table td .hk-type{font-weight:600;color:#12315e}
#main .hk-shell .hk-table td .hk-emerg{display:flex;width:max-content;margin-top:4px}
#main .hk-shell .hk-table td small.hk-sub{display:block;margin-top:3px;font-size:12px;color:var(--hkp-suave)}
#main .hk-shell .hk-table tr.hk-cancelled td{color:#7a8798}

/* ordenação por coluna (agora funciona) */
#main .hk-shell .hk-table th.hk-th-ord{cursor:pointer;user-select:none;white-space:nowrap}
#main .hk-shell .hk-table th.hk-th-ord:hover{background:#ebf1f8 !important}
#main .hk-shell .hk-table th.hk-th-ord:focus-visible{outline:2px solid var(--hkp-azul);outline-offset:-2px}
#main .hk-shell .hk-table th span.hk-ord{float:none;display:inline-block;margin-left:6px;font-size:10px;color:#8aa0b8;opacity:1}
#main .hk-shell .hk-table th.ativa span.hk-ord{color:var(--hkp-azul)}

/* processo: valores sem repetição, no máximo duas linhas + "+n mais" */
.hk-proc{display:flex;flex-direction:column;gap:2px}
.hk-proc span{font-size:12.5px;line-height:1.35;color:#1b2433}
.hk-proc .hk-proc-mais{font-size:12px;color:var(--hkp-suave)}

/* ações: botões de 32 px no padrão (ícone de traço) */
#main .hk-shell .hk-actions{display:flex !important;align-items:center;justify-content:flex-start;gap:6px;white-space:nowrap}
#main .hk-shell .hk-icon-btn{width:32px;height:32px;min-width:32px;min-height:32px;flex:0 0 32px;padding:0;display:inline-grid;place-items:center;border:1px solid #c7d5e5;border-radius:7px;background:#fff;color:var(--hkp-azul);cursor:pointer}
#main .hk-shell .hk-icon-btn:hover{background:#eef5fc;border-color:#9bb8d8}
#main .hk-shell .hk-icon-btn.danger{color:#d33b35;border-color:#e4aaa7}
#main .hk-shell .hk-icon-btn.danger:hover{background:#fff3f2;border-color:#d33b35}
#main .hk-shell .hk-icon-btn svg{display:block}

/* rodapé e paginação */
#main .hk-shell .hk-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:10px 16px;border-top:1px solid var(--hkp-linha);font-size:12px;color:var(--hkp-suave)}
#main .hk-shell .hk-page{display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
#main .hk-shell .hk-page > span{font-size:12px;color:var(--hkp-suave);margin-right:2px}
#main .hk-shell .hk-page select{height:32px;min-width:64px;padding:0 8px;border:1px solid #c7d5e5;border-radius:7px;background:#fff;font-size:12px;color:#28445f;margin-right:6px}
#main .hk-shell .hk-page button{width:32px;height:32px;min-width:32px;padding:0;display:inline-grid;place-items:center;border:1px solid #c7d5e5;border-radius:7px;background:#fff;color:#28445f;font-size:12px;font-weight:600 !important;box-sizing:border-box}
#main .hk-shell .hk-page button:hover:not(:disabled){background:#eef5fc;border-color:#9bb8d8}
#main .hk-shell .hk-page button.active{background:var(--hkp-azul);border-color:var(--hkp-azul);color:#fff}
#main .hk-shell .hk-page button:disabled{opacity:.45;cursor:default}
#main .hk-shell .hk-page .hk-reticencias{color:#8aa0b8;padding:0 2px}

@media(max-width:700px){#main .hk-shell .hk-footer{flex-direction:column;align-items:flex-start}#main .hk-shell .hk-page{margin-left:0;flex-wrap:wrap}}


/* V1050 — Henkaten: grade explícita para o botão Remover nunca sair do cartão.
   Descrição ocupa a primeira linha; severidade, contenção e remoção ficam na segunda.
   Ajuste visual apenas: backend e lógica de cadastro permanecem intactos. */
.hk-riscos-box,
#hk-riscos,
#hk-riscos .hk-risco{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
#hk-riscos .hk-risco{
  display:grid !important;
  grid-template-columns:56px minmax(0,1fr) 36px !important;
  grid-template-rows:auto auto;
  align-items:center;
  gap:6px 8px;
  overflow:visible;
}
#hk-riscos .hk-risco > input{
  display:block;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  margin:0;
}
#hk-riscos .hk-risco > input[data-r="descricao"]{
  grid-column:1 / -1 !important;
  grid-row:1;
}
#hk-riscos .hk-risco > input[data-r="severidade"]{
  grid-column:1;
  grid-row:2;
}
#hk-riscos .hk-risco > input[data-r="contencao"]{
  grid-column:2;
  grid-row:2;
}
#hk-riscos .hk-risco > button[data-r-rem]{
  grid-column:3 !important;
  grid-row:2 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  justify-self:stretch;
  align-self:stretch;
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  height:36px;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  border:1px solid #e4aaa7;
  border-radius:7px;
  background:#fff;
  color:#c83b35;
  cursor:pointer;
}
#hk-riscos .hk-risco > button[data-r-rem]:hover{
  background:#fff3f2;
  border-color:#d33b35;
}
@media(max-width:700px){
  #hk-riscos .hk-risco{
    grid-template-columns:48px minmax(0,1fr) 36px !important;
    gap:6px;
  }
  #hk-riscos .hk-risco > input[data-r="descricao"]{grid-column:1 / -1 !important;grid-row:1}
  #hk-riscos .hk-risco > input[data-r="severidade"]{grid-column:1;grid-row:2}
  #hk-riscos .hk-risco > input[data-r="contencao"]{grid-column:2;grid-row:2}
  #hk-riscos .hk-risco > button[data-r-rem]{grid-column:3 !important;grid-row:2 !important}
}


/* V1053 — Opções de tipo de mudança em cards/flags, com tipografia do sistema.
   Seletores globais porque o painel lateral é renderizado fora de #main .hk-shell. */
.hk-tipo-mudanca{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  font-family:inherit;
  color:inherit;
  box-sizing:border-box;
}
.hk-tipo-mudanca legend{
  display:block;
  float:none;
  width:100%;
  margin:0 0 8px;
  padding:0;
  color:var(--texto-secundario,#536b86);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  box-sizing:border-box;
}
.hk-tipo-mudanca legend span{color:#d94841}
.hk-tipo-opcao{
  position:relative;
  display:flex !important;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:64px;
  margin:0;
  padding:12px 14px;
  box-sizing:border-box;
  border:1px solid var(--borda,#cbd9e9);
  border-radius:9px;
  background:var(--superficie,#fff);
  color:var(--texto,#28445f);
  font-family:inherit;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.hk-tipo-opcao:hover{border-color:#8db4df;background:#f8fbff}
.hk-tipo-opcao.is-selected{border-color:#2875cb;background:#eef5ff;box-shadow:inset 0 0 0 1px #2875cb}
.hk-tipo-opcao input[type=radio]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hk-tipo-marcador{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;border:1.5px solid #9aadc2;border-radius:50%;box-sizing:border-box;background:#fff}
.hk-tipo-opcao.is-selected .hk-tipo-marcador{border:5px solid #2875cb}
.hk-tipo-opcao strong{display:block;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;color:inherit}
.hk-tipo-opcao small{display:block;margin-top:3px;color:var(--texto-suave,#7488a2);font-family:inherit;font-size:12px;font-weight:400;line-height:1.4;white-space:normal}
.hk-tipo-opcao:focus-within{outline:2px solid #8db4df;outline-offset:2px}
@media(max-width:620px){.hk-tipo-mudanca{grid-template-columns:minmax(0,1fr)}}


/* V1054 — Cards KPI Henkaten alinhados ao padrão de indicadores do MasterPlating.
   Apenas apresentação; não altera dados, cálculos ou integração com o backend. */
#main .hk-shell .hk-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 12px;
  padding:0;
  width:100%;
  min-width:0;
}
#main .hk-shell .hk-kpi{
  --hk-kpi-cor:#176fc1;
  --hk-kpi-fundo:#f1f6fd;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  min-height:86px;
  padding:12px 13px 12px 14px;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--hk-kpi-cor) 28%,#fff);
  border-left:4px solid var(--hk-kpi-cor);
  border-radius:12px;
  background:var(--hk-kpi-fundo);
  color:#173f68;
  box-shadow:none;
}
#main .hk-shell .hk-kpi > div{order:1;display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0}
#main .hk-shell .hk-kpi > div small{order:0;display:block;margin:0;color:#526b85;font-size:12px;font-weight:600;line-height:1.3;white-space:normal}
#main .hk-shell .hk-kpi > div strong{order:1;display:block;margin:0;color:var(--hk-kpi-cor);font-size:28px;font-weight:700;line-height:1.08;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#main .hk-shell .hk-kpi > div .hk-kpi-desc{display:block;margin-top:3px;color:#5b7188;font-size:11px;font-weight:400;line-height:1.35;white-space:normal}
#main .hk-shell .hk-kpi .hk-kpi-icon{
  order:2;display:flex;align-items:center;justify-content:center;flex:0 0 40px;
  width:40px;height:40px;min-width:40px;box-sizing:border-box;
  border:5px solid var(--hk-kpi-cor);border-radius:50%;
  background:transparent;color:transparent;font-size:0;line-height:0;
}
#main .hk-shell .hk-kpi.hk-warn{--hk-kpi-cor:#c78300;--hk-kpi-fundo:#fff8e8}
#main .hk-shell .hk-kpi.hk-ok{--hk-kpi-cor:#258654;--hk-kpi-fundo:#f1f8f4}
#main .hk-shell .hk-kpi.hk-danger{--hk-kpi-cor:#d93636;--hk-kpi-fundo:#fff4f4}
@media(max-width:1000px){#main .hk-shell .hk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  #main .hk-shell .hk-kpis{grid-template-columns:minmax(0,1fr);gap:8px}
  #main .hk-shell .hk-kpi{min-height:78px;padding:10px 12px}
  #main .hk-shell .hk-kpi .hk-kpi-icon{flex-basis:36px;width:36px;height:36px;min-width:36px}
  #main .hk-shell .hk-kpi > div strong{font-size:26px}
}