inventory/inventory/static/css/components/draw.css

:root { --tb-h: 34px; }

/* =========================================================
   GRID WIDGET (editor uses container queries, viewer does not)
   ========================================================= */

/* -------------------------
   Shared basics (both modes)
   ------------------------- */

.grid-widget { /* no container-type here */ }

/* drawing stack */
.grid-widget [data-grid] {
    position: relative;
    margin-inline: auto;
}

/* Overlay elements */
.grid-widget [data-canvas],
.grid-widget [data-dot],
.grid-widget [data-coords] { position: absolute; }

.grid-widget [data-canvas]{
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.grid-widget [data-dot]{
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.grid-widget [data-coords]{
  bottom: 10px;
  left: 10px;
  pointer-events: none;
}

/* -------------------------
   Toolbar styling
   ------------------------- */

.grid-widget [data-toolbar].toolbar{
  display: grid !important;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0.5rem;
  overflow: visible;
}

.grid-widget [data-toolbar] .toolbar-row{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex-wrap: nowrap;
}

.grid-widget [data-toolbar] .toolbar-row--primary,
.grid-widget [data-toolbar] .toolbar-row--secondary{
  overflow-x: auto;
  overflow-y: hidden;
}

.grid-widget [data-toolbar] .toolbar-row--secondary{ opacity: 0.95; }

/* container query only matters in editor (set below) */
@container (min-width: 750px){
  .grid-widget [data-toolbar].toolbar{
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .grid-widget [data-toolbar] .toolbar-row{ display: contents; }

  .grid-widget [data-toolbar] .toolbar-row--primary,
  .grid-widget [data-toolbar] .toolbar-row--secondary{ overflow: visible; }
}

.grid-widget [data-toolbar]::-webkit-scrollbar{ height: 8px; }

.grid-widget .toolbar-group{
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.02);
}

.grid-widget .btn,
.grid-widget .form-control,
.grid-widget .badge{ height: var(--tb-h); }

.grid-widget [data-toolbar] .badge,
.grid-widget [data-toolbar] .input-group-text{ white-space: nowrap; }

.grid-widget .toolbar .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
}

.grid-widget .toolbar .form-control-color{ width: var(--tb-h); padding: 0; }

.grid-widget .tb-btn{ flex-direction: column; gap: 2px; line-height: 1; }
.grid-widget .tb-btn small{ font-size: 11px; opacity: 0.75; }

.grid-widget .dropdown-toggle::after{ display: none; }

.grid-widget .toolbar .btn-group .btn{ border-radius: 0; }
.grid-widget .toolbar .btn-group .btn:first-child{
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.grid-widget .toolbar .btn-group .btn:last-child{
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.grid-widget .btn-check:checked + .btn{
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.18);
}

.grid-widget .dropdown-menu{
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  position: absolute;
  z-index: 1000;
  pointer-events: auto;
}

.grid-widget .dropdown-menu .form-range{ width: 100%; margin: 0; }

/* =========================================================
   EDITOR MODE (needs container queries)
   ========================================================= */

.grid-widget[data-mode="editor"]{
  container-type: inline-size; /* ONLY here */
  min-width: 375px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-widget[data-mode="editor"] [data-grid-wrap]{
  flex: 1 1 auto;
  width: 100%;
  min-height: 375px;
  position: relative;
  overflow: hidden;
}

.grid-widget[data-mode="editor"] [data-grid]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  z-index: 0;
}

/* Editor: toolbar should match snapped grid width */
.grid-widget[data-mode="editor"] [data-toolbar]{
  width: var(--grid-maxw, 100%);
  margin-inline: auto;   /* center it to match the centered grid */
  max-width: 100%;
  align-self: center;    /* don't stretch full parent width */
}

/* =========================================================
   VIEWER MODE (must shrink-wrap like an <img>)
   ========================================================= */

.grid-widget[data-mode="viewer"]{
  /* explicitly undo any containment */
  container-type: normal;   /* <-- the money line */
  contain: none;

  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: auto;
  min-width: 0;
  flex: none;
}

/* wrap is the sized box (JS sets px) */
.grid-widget[data-mode="viewer"] [data-grid-wrap]{
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 0; /* remove inline baseline gap */
}

/* grid must be in-flow and fill wrap */
.grid-widget[data-mode="viewer"] [data-grid]{
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  overflow: hidden;
}

/* viewer hides editor-only overlays */
.grid-widget[data-mode="viewer"] [data-coords],
.grid-widget[data-mode="viewer"] [data-dot]{ display: none !important; }