/* Prism Gang Sheet Builder */
.prism-gsb { width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 16px 18px; border: 1px solid #e2e2e6; border-radius: 8px; background: #fff; }
.prism-gsb-head { margin-bottom: 10px; }
.prism-gsb-head strong { display: block; color: #004E89; font-size: 16px; }
.prism-gsb-sub { color: #666; font-size: 13px; }

.prism-gsb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.prism-gsb-upload { cursor: pointer; }
.prism-gsb-hint { color: #888; font-size: 12px; }

.prism-gsb-stage-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.prism-gsb-stage { position: relative; flex: 0 0 320px; max-width: 360px; max-height: 540px; overflow: auto; border: 1px solid #e6e6e6; border-radius: 6px; background: #f4f4f5; }
.prism-gsb-stage canvas { display: block; }
.prism-gsb-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #999; font-size: 13px; padding: 20px; }

.prism-gsb-side { flex: 1 1 240px; min-width: 220px; }
.prism-gsb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.prism-gsb-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid #ececec; border-radius: 6px; background: #fafafa; }
/* The builder lives inside .woocommerce-product-gallery, whose CSS forces
   images to width:100% !important. Override hard so our thumbnails + canvas
   stay their intended size and the rows don't render full-page-huge. */
.prism-gsb img,
.prism-gsb .prism-gsb-thumb { max-width: none !important; }
.prism-gsb .prism-gsb-thumb { width: 46px !important; height: 46px !important; object-fit: contain; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="5" height="5" fill="%23eee"/><rect x="5" y="5" width="5" height="5" fill="%23eee"/></svg>'); border: 1px solid #eee; border-radius: 4px; flex: 0 0 46px; }
.prism-gsb canvas#prism-gsb-canvas { max-width: 100% !important; height: auto; }
.prism-gsb .prism-gsb-stage { width: auto; }
.prism-gsb-item-fields { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.prism-gsb-item-name { flex-basis: 100%; font-size: 12px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prism-gsb-item-fields label { font-size: 12px; color: #555; }
.prism-gsb-item-fields input { width: 64px; padding: 3px 5px; }
.prism-gsb-item-fields input.gsb-q { width: 48px; }

.gsb-dpi { font-size: 11px; padding: 1px 6px; border-radius: 10px; background: #eee; color: #555; }
.gsb-dpi-ok { background: #e6f4ea; color: #2e7d32; }
.gsb-dpi-warn { background: #fff4e5; color: #b26a00; }
.gsb-dpi-block { background: #fde7e9; color: #b32d2e; }

.gsb-del { margin-left: auto; border: none; background: transparent; color: #b32d2e; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.gsb-del:hover { color: #7d1d1f; }

.prism-gsb-summary { padding: 10px 12px; border: 1px solid #e6e6e6; border-radius: 6px; background: #f8fafc; font-size: 14px; line-height: 1.7; }
.prism-gsb-summary strong { color: #004E89; }
.prism-gsb-note { font-size: 12px; margin-top: 4px; }
.gsb-note-warn { color: #b26a00; }
.gsb-note-block { color: #b32d2e; font-weight: 600; }

.prism-gsb-error { margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: #fde7e9; color: #b32d2e; font-size: 13px; }
.prism-gsb-error.prism-gsb-info { background: #fff4e5; color: #8a5a00; }

@media (max-width: 600px) {
  .prism-gsb-stage { flex-basis: 100%; max-width: 100%; }
}