/* Story 2692 - the unified screen: a global top bar, a left pane that edits, a right pane that is
   always the preview. Everything is scoped to ws- classes or to body.ws-on. */

.ws-frame[hidden], .ws-stage[hidden], .ws-aux[hidden] { display: none !important; }

/* The global top bar. */
.ws-frame {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px; min-height: 40px; box-sizing: border-box;
  background: var(--panel); border-bottom: 1px solid var(--line-dark);
}
.ws-place { font-size: 15px; color: var(--ink); max-width: 260px; display: inline-block; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ws-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--ink);
  background: transparent; border: 0; border-radius: 8px; padding: 7px 8px; cursor: pointer;
}
.ws-menu-item:hover:not(:disabled), .ws-menu-item:focus-visible { background: var(--teal-soft); }
.ws-menu-item.current { box-shadow: inset 3px 0 0 var(--teal); }
.ws-menu-item:disabled { opacity: .55; cursor: default; }
.ws-card-icon { font-size: 20px; flex: none; }
.ws-card-icon img { width: 28px; height: 28px; }
.ws-card-text { display: grid; min-width: 0; }
.ws-card-text small { color: var(--muted); font-size: 12px; }
body.ws-on #bin-actions { display: none !important; }

/* Two persistent panes beneath the bar: about 40% left, the preview keeps the rest. */
body.ws-on .app-shell { height: calc(100vh - 79px - var(--ws-chrome, 0px)); }

/* The right pane is only ever the preview of the whole Space while one is open. */
body.ws-on.ws-open .view-tabs,
body.ws-on.ws-open #preview-state,
body.ws-on.ws-open .workspace-footer,
body.ws-on.ws-open .canvas-wrap[data-canvas="drawer"] .dl-hint { display: none !important; }
body.ws-on.ws-open:not(.ws-task-settings) #drawer-canvas { cursor: pointer; }
/* Story 2704: the open screen has nothing selected, so the right pane shows no preview. */
body.ws-on.ws-task-picker .workspace { visibility: hidden; }
/* Layout and nothing-selected show the existing print list beneath the one bin tree. */
body.ws-on.ws-task-none .controls > :not(#ws-stage):not(#drawer-panel),
body.ws-on.ws-task-settings .controls > :not(#ws-stage):not(#drawer-panel):not(#space-head),
body.ws-on.ws-task-none #ws-aux,
body.ws-on.ws-task-settings #ws-aux,
body.ws-on.ws-task-none #drawer-panel > :not([aria-label="Inventory"]) { display: none !important; }

/* The ordinary editor already lives in these control sections, outside #drawer-panel.
   Peek exposes that same form; the print list and other Space chrome step aside. */
body.ws-on.ws-task-peek .controls > :not(#ws-stage):not(.control-section),
body.ws-on.ws-task-peek #space-head,
body.ws-on.ws-task-peek #ws-aux { display: none !important; }
.controls > .ws-stage.receiving { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal); }

/* (A) the selector: pinned and bounded, it scrolls within itself. (B) is the rest of the pane. */
.controls > .ws-stage {
  position: sticky; top: 0; z-index: 6; max-height: 325px; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #f8faf9; border-bottom: 2px solid var(--line-dark);
}
/* The header row stays put; only the list of rows beneath it scrolls. */
.ws-sel { padding: 8px 12px 8px; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ws-sel > .ws-items { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ws-sel > .ws-sel-head, .ws-sel > .field-error { flex: none; }
.ws-sel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.ws-sel-head h2 { margin: 0; font-size: 14pt; font-weight: 700; color: var(--ink); }
.ws-sel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ws-row { display: flex; align-items: stretch; gap: 4px; }
.ws-row > .ws-rowbtn { flex: 1 1 auto; width: auto; min-width: 0; }
.ws-out { flex: none; font: inherit; font-size: 13px; font-weight: 700; background: white; border: 1px solid var(--line-dark); border-radius: 8px; padding: 3px 10px; cursor: pointer; color: #111; }
.ws-out:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.ws-out.printed { color: #0b6b2a; }
.ws-out.unprinted { color: #111; }
.ws-out:disabled { cursor: default; background: #f4f6f6; }
.ws-out.printed:disabled { color: #4f7f5e; }
.ws-out.unprinted:disabled { color: #55585a; }
.ws-rowbtn {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); background: white; border: 1px solid var(--line-dark); border-radius: 8px; padding: 5px 10px; cursor: pointer; min-height: 30px;
}
.ws-rowbtn:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.ws-rowbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.ws-rowbtn:disabled { cursor: default; opacity: .7; }
.ws-rowbtn.selected { background: var(--teal-soft); border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); color: var(--teal-dark); }
.ws-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-note { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-group { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 4px; }
/* The hierarchy shows by indentation: container a third of an inch in, bins two-thirds of an inch in (Story 2840). */
.ws-row.ws-level-1 { margin-left: .33in; }
.ws-row.ws-level-2 { margin-left: .67in; }
.ws-empty { color: var(--muted); font-size: 13px; padding: 4px 0; }

/* Print Space and New Space take the editor region (B) for a while. */
.ws-aux { padding: 12px 14px 20px; }
.ws-page h2 { margin: 0 0 8px; font-size: 18px; }
.ws-toprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ws-aux .ws-item, .ws-aux .ws-group { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.ws-aux .ws-item > label {
  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; box-sizing: border-box;
  background: white; border: 1px solid var(--line-dark); border-radius: 8px; padding: 5px 10px;
}
.ws-item input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--teal); flex: none; }
.ws-printcount { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--teal-dark); }
.ws-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ws-choice {
  display: grid; gap: 4px; justify-items: start; width: 100%; text-align: left; font: inherit; color: var(--ink); background: white; cursor: pointer;
  border: 1px solid var(--line-dark); border-radius: 11px; padding: 10px 12px;
}
.ws-choice:hover { border-color: var(--teal); background: var(--teal-soft); }
.ws-choice:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.ws-choice img { width: 100%; max-width: 120px; height: 90px; object-fit: contain; }
.ws-choice small { color: var(--muted); font-size: 12px; }
.ws-links { margin: 8px 4px 0; font-size: 13px; color: var(--muted); }

/* Print Space / New Space show only their own editor under the selector. */
body.ws-task-print .controls > :not(#ws-stage):not(#ws-aux),
body.ws-task-newspace .controls > :not(#ws-stage):not(#ws-aux),
body.ws-task-picker .controls > :not(#ws-stage):not(#ws-aux) { display: none !important; }

/* Each editor stands alone: only its own part of the sidebar shows. */
body.ws-task-bin #space-head,
body.ws-task-container #space-head .space-head-title,
body.ws-task-container #space-actions > .button-row { display: none; }
body.ws-task-settings #space-head .space-head-title { display: none; }
/* Space details reuse the setup form for name and usable size for every kind.
   Container construction settings remain in the container editor. */

/* Story 2743 / 2841: no empty bordered card above the details; the head shows only while it holds something
   visible (the kind's field group, an error or folder help). */
body.ws-task-settings #space-head:not(:has(
  #space-head-edit-host:not([hidden]), #space-actions,
  .space-type-fields:not([hidden]),
  #space-error:not([hidden]), #space-folder-help:not([hidden]))) { display: none; }

/* Story 2834: the same for the Storage box / Storage Drawers design view, where the title and the
   button row are hidden above; the empty card is not shown above "<kind> design". */
body.ws-task-container #space-head:not(:has(
  #space-structural:not([hidden]), #space-head-edit-host:not([hidden]),
  #space-error:not([hidden]), #space-folder-help:not([hidden]))) { display: none; }

/* Edit has no onboarding note. */
body.ws-task-settings #space-note { display: none !important; }

/* Big message in the middle section while switching views. */
.workspace { position: relative; }
.ws-switching {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(248, 250, 249, .92); color: var(--teal-dark); font-size: 32px; font-weight: 700; pointer-events: all;
}
.ws-switching[hidden] { display: none; }

/* Setup is a full-screen task of its own. */
body.ws-on #welcome-dialog[open] {
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border-radius: 0; overflow: auto;
}

/* Story 2747: New Space setup takes the left side, at the width of the editing column used for bins and Spaces. */
body.ws-on #welcome-dialog[open]:has(#space-form:not([hidden])) {
  inset: 0 auto 0 0; width: max(420px, min(var(--sidebar-width), calc(100vw - 448px))); max-width: 100vw;
}

/* Story 2735: while switching items the old preview is cleared; the Building geometry notice stands in. */
body.ws-item-switching .canvas-wrap > canvas { visibility: hidden; }

/* Story 2752: small drawer buttons in the Layout row. */
.ws-drawers { display: flex; gap: 4px; align-items: center; }
.ws-drawers-word { font-size: 12px; }
.ws-drawerbtn { min-width: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.ws-drawerbtn:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.ws-drawerbtn.selected { font-weight: 700; border-color: var(--teal); box-shadow: inset 0 -3px var(--teal); }
.ws-drawerbtn:disabled { opacity: .5; cursor: default; }