/* Drawer layout mode. Everything is scoped to the mode or to dl- classes so
   the bin editor's own styles are untouched. */

/* In the mode the sidebar shows only the drawer panel, and the bin editor's
   chrome (placed parts, its error panel, footer, design file buttons) steps
   aside. */
body.drawer-mode .controls > :not(#drawer-panel):not(#space-head):not(#ws-stage):not(#ws-aux),
body.drawer-mode #error-panel,
body.drawer-mode .workspace-footer,
body.drawer-mode #preview-state,
body.drawer-mode #new-design,
body.drawer-mode #save-design,
body.drawer-mode .header-actions .file-button { display: none !important; }

.drawer-panel { min-height: 100%; display: flex; flex-direction: column; }
.drawer-panel > .control-section { flex: none; }

.dl-card {
  margin: 10px 12px 0; padding: 12px 14px 14px; background: var(--panel);
  border: 1px solid var(--line-dark); border-left: 3px solid var(--teal); border-radius: 11px;
}
.dl-drawer-row { display: flex; gap: 8px; align-items: end; margin-bottom: 10px; }
.dl-drawer-row label { flex: 1; font-size: 12px; font-weight: 700; color: var(--muted); }
.dl-drawer-row select { font-size: 14px; font-weight: 650; color: var(--ink); }
.button.dl-small { padding: 7px 10px; font-size: var(--type-small-button); }
.dl-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.45; }
.dl-sp-front-note { font-size: 12px; }
#dl-sp-action-note { white-space: pre-line; }
.dl-warning { color: #8a4e12; }
.dl-details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.dl-details summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--teal-dark); }
.dl-details[open] summary { margin-bottom: 8px; }
.dl-details .field-grid { margin-top: 6px; }
.dl-details .button-row { margin-top: 10px; }
.dl-stats { display: grid; gap: 9px; margin-bottom: 14px; }
.dl-problems {
  margin: 0; padding: 8px 10px 8px 26px; border: 1px solid #e0aaa5; border-radius: 7px;
  background: #fff4f2; color: #7e302b; font-size: 11px; line-height: 1.5;
}
.dl-problems { max-height: 180px; overflow-y: auto; }
.dl-problems li.height { color: #8a4e12; }

.dl-inv-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(78px, .8fr) minmax(78px, .8fr); gap: 6px; align-items: end; margin-bottom: 10px; }
.dl-inv-tools label { display: flex; flex-direction: column; justify-content: end; gap: 3px; min-width: 0; font-size: 11px; font-weight: 700; }
.dl-inv-tools input, .dl-inv-tools select { width: 100%; min-width: 0; height: 36px; margin: 0; padding: 7px 8px; font-size: 12px; }
.dl-inv-tools .dl-search-label input { font-weight: 400; }
.dl-inv-list { display: grid; gap: 6px; }
.dl-bin {
  display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 6px 6px 6px 6px; border: 1px solid var(--line); border-radius: 9px; background: white;
}
.dl-bin[draggable="true"] { cursor: grab; }
.dl-bin:hover { border-color: var(--line-dark); }
.dl-bin[data-editable="true"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dl-bin.selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(20,108,112,.18); }
.dl-bin.too-tall { border-color: #e0aaa5; }
.dl-swatch {
  width: 38px; min-height: 38px; border-radius: 7px; display: grid; place-items: center;
  text-align: center; font-size: 10px; font-weight: 800; border: 1px solid rgba(23,37,45,.2);
}
.dl-bin-main { display: flex; flex-direction: column; min-width: 0; }
.dl-bin-main strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-bin-main small { font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-bin-main .dl-flags { color: #8a4e12; font-weight: 650; }
.dl-row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; padding-left: 26px; }
.dl-row-actions .button { padding: 4px 7px; font-size: var(--type-row-action); }
.dl-bin-main .dl-status { color: var(--teal-dark); font-weight: 700; }
.dl-bin.printed .dl-bin-main .dl-status { color: #1f6b45; }
.dl-empty {
  padding: 14px; border: 1px dashed var(--line-dark); border-radius: 8px; color: var(--muted);
  font-size: 12px; text-align: center; line-height: 1.5;
}

.dl-savebar {
  position: sticky; bottom: 0; margin-top: auto; padding: 10px 14px 12px; background: white;
  border-top: 1px solid var(--line-dark); box-shadow: 0 -6px 16px rgba(30,51,61,.06); z-index: 2;
}
.drawer-panel > .control-section:last-of-type { margin-bottom: 12px; }
.dl-savebar .save-location-row { margin-bottom: 8px; }
.dl-save-row { display: flex; align-items: center; gap: 8px; }
.dl-save-row .checkbox-row { margin: 0; }
.dl-save-status { flex: 1; min-width: 0; font-size: 11px; color: var(--ink); }
.dl-save-status.error { color: var(--danger); font-weight: 650; }
.dl-save-status.dirty { color: #8a4e12; font-weight: 650; }

.dl-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.dl-print-select { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.dl-print-placeholder { display: block; width: 16px; height: 16px; }
.dl-bin.print-selected { background: var(--teal-soft); }
.dl-batch-tools { display: grid; gap: 7px; margin: 0 0 8px; }
.dl-batch-tools[hidden] { display: none; }
.dl-batch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dl-batch-summary { font-size: 11px; color: var(--ink); flex: 1 1 100%; min-height: 14px; }
.dl-batch-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.dl-batch-actions .button { min-width: 0; padding: 7px 6px; line-height: 1.25; }
/* The drawer canvas and its floating controls. The staging rail (Unplaced
   bins) sits immediately beside the physical Space. */
/* Drawer mode hides the workspace toolbar, so this wrap would otherwise fall
   into the auto first row of .workspace and fill only the top of the pane. */
.canvas-wrap[data-canvas="drawer"].active { display: flex; grid-row: 2; }
.canvas-wrap[data-canvas="drawer"] #drawer-canvas { flex: 1 1 0; width: auto; min-width: 0; height: 100%; }
.dl-empty-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: grid; gap: 3px; justify-items: center; padding: 12px 16px; border-radius: 8px;
  color: var(--muted); background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(0,0,0,.08);
  pointer-events: none; text-align: center; white-space: nowrap;
}
.dl-empty-hint[hidden] { display: none; }
.dl-empty-hint strong { color: var(--ink); font-size: 16px; font-weight: 650; }
.dl-empty-hint span { font-size: 13px; }
/* Fix 1091: legend for the yellow/red bin-height rims; sits above the hint. */
.canvas-wrap[data-canvas="drawer"] .dl-height-legend { left: 10px; bottom: 54px; }
.dl-height-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 3px; border-radius: 2px; }
.dl-height-swatch.yellow { background: #e0a100; }
.dl-height-swatch.red { background: #d43d2f; }
.dl-height-legend { white-space: nowrap; overflow-x: auto; max-width: calc(100% - 20px); }
/* Dragging a placed bin from the Space over the bin list: release to unplace it. */
.dl-inv-list.receiving { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal); border-radius: 8px; }
.canvas-wrap[data-canvas="drawer"] { background: radial-gradient(circle at 50% 40%, #fff 0, #f6f7f5 60%, #eceeea 100%); }
#drawer-canvas.panning { cursor: grabbing; }
.dl-tilt-control input[type="range"] { width: 104px; margin: 0; accent-color: var(--teal); }
.dl-tilt-control { padding: 6px 10px; }
.field-grid input:disabled { background: var(--surface-soft, #f3f4f2); color: var(--muted); }

/* Space camera: full text labels at normal zoom; +/- stay compact. */
.dl-view-controls .camera-controls-row { flex-wrap: wrap; }
.dl-view-controls .camera-views { flex-wrap: wrap; }
.dl-view-controls .camera-views-row { flex-wrap: wrap; }
.dl-view-controls .camera-views button { flex: 0 0 auto; min-width: 0; padding: 10px 14px; font-size: var(--type-camera-button); white-space: nowrap; }
.dl-view-controls .zoom-controls button { flex: 0 0 auto; min-width: 40px; padding: 10px 12px; }


/* Space header: what the Space is, and which editor (Space or Design) owns the
   left panel. Shown above either editor. */
.space-head {
  margin: 10px 12px 0; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line-dark); border-left: 3px solid var(--teal); border-radius: 11px;
}
.space-head-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.space-head-type-wrap { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.space-head-type-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.space-head-title strong, .space-head-type {
  font-size: 24px; line-height: 1.1; font-weight: 800; color: var(--ink); overflow-wrap: anywhere;
}
.space-head-type { text-transform: none; letter-spacing: normal; }
.space-head-view .muted { margin-top: 3px; font-size: 12px; line-height: 1.4; }
.space-head-view .button-row { margin-top: 8px; }
.space-head-edit-host .space-form,
.space-head-edit-host .space-type-fields { display: grid; gap: 8px; margin: 0; padding: 0; }
.space-head-edit-host .space-buttons { margin-top: 10px; }
/* The Space header and the Bin build section sit flush at the top of the controls column. */
.controls > #space-head,
.controls > .control-section[data-section="build"] {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 700px) {
  .canvas-wrap[data-canvas="drawer"] .dl-view-controls, .canvas-wrap[data-canvas="drawer"] .dl-hint, .canvas-wrap[data-canvas="drawer"] .dl-height-legend { left: 10px; }
  .canvas-wrap[data-canvas="drawer"] .dl-height-legend { max-width: calc(100% - 20px); }
  .canvas-wrap[data-canvas="drawer"] .dl-view-controls { top: 146px; }
  .canvas-wrap[data-canvas="drawer"].active { flex-direction: column; }
}

/* Spacers: below Inventory, collapsed until wanted. */
.dl-spacers { margin: 10px 12px 0; border: 1px solid var(--line-dark); border-radius: 11px; background: var(--panel); }
.dl-spacers > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 750; color: var(--teal-dark); }
.dl-spacers[open] > summary { border-bottom: 1px solid var(--line); }
.dl-spacers > .section-body { padding: 10px 14px 14px; }
/* Fix 088: quiet gap hint in the collapsed summary + wall toggles. */
.dl-sp-hint { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.dl-sp-walls { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px 8px; margin: 0 0 10px; }
.dl-sp-walls > legend { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.dl-sp-walls .checkbox-row { margin: 2px 8px 2px 0; }
.dl-spacers[hidden] { display: none; }

/* Space Actions: the Space-level buttons in the Space header. */
.space-actions { margin-top: 8px; }
.space-actions .button-row { margin-top: 0; }
.space-structural { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.space-structural[hidden] { display: none; }
.space-structural-summary { margin: 0 0 6px; font-size: 12px; }
.space-structural-summary[hidden] { display: none; }
.dl-tilt-control.disabled { opacity: 0.45; }
.dl-tilt-control input[type="range"]:disabled { cursor: not-allowed; accent-color: #9aa5a8; }

.dl-stack-icon { display: inline-block; vertical-align: -1px; margin-left: 6px; color: #146c70; flex: none; }