/* HF212 — Imagens de Cadastros. Complementa HF203 sem alterar o grid de dois níveis.
 * O seletor e o zoom são portais, não herdam o recorte dos cards/formulários. */
.cadastro-material-list .cadastro-material-card{
  grid-template-rows:minmax(52px,auto) 48px;
}
.cadastro-material-list .cadastro-material-card-header{padding:5px 10px}
.cadastro-material-list .cadastro-material-card-thumb-zoom{
  display:flex;flex:0 0 44px;width:44px;height:44px;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:5px;background:transparent;
}
.cadastro-material-list .cadastro-material-card-thumb{
  width:44px;height:44px;flex:0 0 44px;padding:3px;object-fit:contain;
}
/* Campo imagem de banco é uma única célula horizontal com controles lado a lado. */
.cadastro-material-list .cadastro-material-card-field.is-image-bank{
  max-width:none;flex:0 0 auto;overflow:visible;min-height:38px;
}
.cadastro-material-list .cadastro-material-card-field.is-image-bank dd{
  display:flex;align-items:center;max-width:none;width:auto;overflow:visible;
}
.cadastro-material-list .cadastro-material-card-field.is-image-bank .table-image-picker{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
  gap:6px;min-width:248px;max-width:none;width:max-content;
}
.cadastro-material-list .cadastro-material-card-field.is-image-bank .table-image-picker>span{
  display:block;flex:0 1 78px;min-width:36px;max-width:78px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cadastro-inline-image-actions{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;gap:4px}
.cadastro-inline-image-actions button{min-height:30px!important;padding:4px 7px!important;white-space:nowrap}
.cadastro-image-zoom-trigger{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  padding:0;margin:0;min-width:0;line-height:0;overflow:hidden;
  border:0;background:transparent;cursor:zoom-in;
}
.cadastro-image-zoom-trigger:focus-visible{
  outline:2px solid var(--cutflow-orange,#ff6b00);outline-offset:2px;
}
.cadastro-inline-image-zoom{width:40px;height:34px;border-radius:5px}
.cadastro-material-list .cadastro-material-card-field.is-image-bank .cadastro-inline-image-thumb{
  width:40px;height:34px;max-width:none;object-fit:contain;
  border:1px solid #e2e8f0;border-radius:5px;background:#fff;
}
/* Também preserva alinhamento no editor de cadastro, inclusive no mobile. */
.image-picker-selected.compact{
  flex-wrap:nowrap;max-width:100%;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
}
.image-picker-selected.compact .image-picker-info{flex:1 1 120px;min-width:100px}
.image-picker-selected.compact>button{flex:0 0 auto;white-space:nowrap}
.cadastro-image-picker-selected-zoom{width:54px;height:48px}
.cadastro-image-picker-selected-thumb{width:54px;height:48px;object-fit:contain;background:#fff;border:1px solid #e2e8f0;border-radius:5px}
.cadastro-image-library-zoom{width:100%;height:110px;flex:0 0 auto}
.image-library-card .cadastro-image-library-zoom img{width:100%;height:110px;object-fit:contain}
/* A regra genérica de .modal>.modal-header+div não pode expandir a faixa de busca.
 * Ela consumia a altura livre do modal e encolhia a grade e o preview. */
.modal.image-picker-modal{width:min(1120px,96vw);min-width:0;max-height:calc(100dvh - 36px)}
.modal.image-picker-modal>.modal-header+.image-picker-search{
  flex:0 0 auto;min-height:0;max-height:none;overflow:visible;
  padding:12px 18px;border-bottom:1px solid #e5e7eb;
}
.modal.image-picker-modal>.image-picker-body{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);
  flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;
  gap:16px;padding:16px 18px;box-sizing:border-box;
}
.modal.image-picker-modal .image-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  grid-auto-rows:max-content;align-content:start;max-height:none;min-height:220px;
  overflow:visible;gap:12px;
}
.modal.image-picker-modal .image-card{min-width:0;min-height:174px}
.modal.image-picker-modal .cadastro-image-option-zoom{width:100%;height:128px}
.modal.image-picker-modal .cadastro-image-option-thumb{width:100%;height:128px;object-fit:contain}
.modal.image-picker-modal .cadastro-image-option-select{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;padding:4px 2px;text-align:left;color:var(--cutflow-navy,#071a33);
  background:transparent;border:0;min-width:0;white-space:normal;
}
.modal.image-picker-modal .cadastro-image-option-select span{font-weight:700;font-size:.78rem}
.modal.image-picker-modal .cadastro-image-option-select small{font-size:.72rem;color:#64748b}
.modal.image-picker-modal .cadastro-image-option-hint{font-size:.68rem!important;font-weight:500!important;color:#475569}
.modal.image-picker-modal .cadastro-image-option-select:focus-visible{outline:2px solid var(--cutflow-orange,#ff6b00);outline-offset:1px}
.modal.image-picker-modal .image-card img{width:100%;height:128px;object-fit:contain}
.modal.image-picker-modal .image-preview-panel{min-width:0;min-height:340px}
.cadastro-image-preview-zoom{display:flex;width:100%;height:clamp(220px,38dvh,410px)}
.modal.image-picker-modal .image-preview-large{
  width:100%;height:100%;max-width:100%;max-height:none;object-fit:contain;
  box-sizing:border-box;
}
/* Modal do zoom: totalmente independente do card, sem modificar a imagem original. */
.cadastro-image-lightbox-backdrop{z-index:20000}
.cadastro-image-lightbox{
  display:flex;flex-direction:column;width:min(1180px,100%);max-width:100%;
  max-height:calc(100dvh - 28px);min-height:0;overflow:hidden;
  border:1px solid var(--cutflow-border,#e2e8f0);border-radius:12px;
  background:#fff;box-shadow:0 18px 60px rgba(0,0,0,.3);
}
.cadastro-image-lightbox-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--cutflow-border,#e2e8f0);
  color:var(--cutflow-navy,#071a33);
}
.cadastro-image-lightbox-header strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadastro-image-lightbox-header button{flex:0 0 auto}
.cadastro-image-lightbox-canvas{
  display:flex;justify-content:center;align-items:center;flex:1 1 auto;min-height:0;
  overflow:auto;padding:12px;background:#f8fafc;
}
.cadastro-image-lightbox-canvas img{
  display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 140px);
  object-fit:contain;background:#fff;
}
@media(max-width:760px){
  .cadastro-material-list .cadastro-material-card{grid-template-rows:minmax(50px,auto) 48px}
  .cadastro-material-list .cadastro-material-card-thumb-zoom{width:40px;height:40px;flex-basis:40px}
  .cadastro-material-list .cadastro-material-card-thumb{width:40px;height:40px;flex-basis:40px}
  .modal.image-picker-modal{width:100%;max-height:100dvh}
  .modal.image-picker-modal>.image-picker-body{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
  .modal.image-picker-modal .image-grid{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;max-height:36dvh;overflow-y:auto}
  .modal.image-picker-modal .image-card{min-height:132px}
  .modal.image-picker-modal .image-card img{height:92px}
  .modal.image-picker-modal .cadastro-image-option-zoom,
  .modal.image-picker-modal .cadastro-image-option-thumb{height:92px}
  .modal.image-picker-modal .image-preview-panel{min-height:240px}
  .cadastro-image-preview-zoom{height:220px}
  .cadastro-image-lightbox{max-height:calc(100dvh - 16px)}
}