/* Workshop Inventory theme. Add these classes to existing elements; retain IDs,
   geometry, events and data. This is a class contract, not a drop-in selector map. */
.workshop {
  color-scheme: dark;
  --ws-bg: #11171b;
  --ws-panel: #1c252b;
  --ws-text: #f5f1e8;
  --ws-muted: #bac5cd;
  --ws-line: #657580;
  --ws-orange: #ff8417;
  --ws-orange-ink: #17130e;
  --ws-red: #e84747;
  --ws-match: #c6ccd0;
  --ws-drawer: #354652;
  --ws-radius: 12px;
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(ellipse at top, #28343c 0, var(--ws-bg) 65%);
  color: var(--ws-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
.workshop *, .workshop *::before, .workshop *::after { box-sizing: border-box; }
.workshop button, .workshop input, .workshop textarea { font: inherit; }
.workshop button { cursor: pointer; touch-action: manipulation; }
.workshop button:disabled { cursor: default; opacity: .55; }
.workshop [hidden] { display: none !important; }
.workshop :where(button,input,textarea,a):focus-visible {
  outline: 3px solid #ffe1a8;
  outline-offset: 3px;
}
.ws-shell { width: min(100%, 760px); margin-inline: auto; padding: 0 10px max(16px, env(safe-area-inset-bottom)); }
.ws-header {
  display: flex; align-items: center; gap: 10px; padding: 15px 0;
  background-image: radial-gradient(circle, #080c0e 2px, transparent 3px);
  background-size: 15px 15px;
}
.ws-title, .ws-heading {
  font-family: "Arial Narrow", "Roboto Condensed", Impact, system-ui, sans-serif;
  font-weight: 800; line-height: 1.12; letter-spacing: -.025em;
}
.ws-title { flex: 1; min-width: 0; margin: 0; font-size: clamp(20px, 4.5vw, 31px); }
.ws-logo { flex: none; width: 32px; height: 32px; color: var(--ws-orange); }
.ws-icon { width: 22px; height: 22px; flex: none; display: inline-block; vertical-align: middle; }
.ws-panel {
  position: relative; margin-bottom: 14px; overflow: visible;
  border: 1px solid #7b8a94; border-radius: var(--ws-radius);
  background: linear-gradient(145deg, #26323b, #171e23 75%);
  box-shadow: inset 0 0 0 2px #11181d, inset 0 3px 0 #ffffff14, 0 4px 9px #0005;
}
/* Optional decorative screw heads: apply ws-panel--bolted to a panel. */
.ws-panel--bolted::before, .ws-panel--bolted::after {
  content: ""; position: absolute; top: 8px; width: 11px; height: 11px;
  border: 1px solid #0a0e11; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, transparent 43%, #10171b 44% 56%, transparent 57%), linear-gradient(#9aa8b0, #35424a);
  box-shadow: 0 1px 2px #0009;
}
.ws-panel--bolted::before { left: 8px; }
.ws-panel--bolted::after { right: 8px; }
.ws-map-area { padding: 18px 12px 12px; }
/* Attach ws-shop-map to the existing spatial layout; DO NOT replace its
   coordinates with an evenly spaced grid. Geometry comes from the live app. */
.ws-shop-map { position: relative; }
.ws-case {
  appearance: none; position: relative; min-width: 0; padding: 2px;
  border: 2px solid #9caab3; border-radius: 5px;
  color: var(--ws-text); background: linear-gradient(135deg, #34434e, #10171d);
  box-shadow: inset 0 0 0 2px #0b1014, 0 2px 3px #0009;
}
.ws-case-label {
  position: absolute; z-index: 1; top: 3px; left: 5px;
  font-size: clamp(12px, 3vw, 20px); font-weight: 850; line-height: 1.2;
  text-shadow: 0 1px 3px #000; pointer-events: none;
}
.ws-case-mini { display: grid; width: 100%; height: 100%; gap: 2px; pointer-events: none; }
.ws-case-mini > span { min-width: 0; border: 1px solid #8ea0ae; border-radius: 1px; background: #3a4d5d; }
/* Search match and selection are separate states. A case may have both. */
.ws-case.is-match { background: var(--ws-match); border-color: #edf1f3; }
.ws-case.is-match .ws-case-label { color: #121b21; text-shadow: none; }
.ws-case.is-match .ws-case-mini > span { background: #a4b0b8; border-color: #647480; }
.ws-case.is-selected { outline: 3px solid var(--ws-orange); outline-offset: 2px; }
.ws-search-section { padding: 12px; border-top: 1px solid #67778166; }
.ws-search { display: flex; align-items: stretch; gap: 8px; margin: 0; }
.ws-input, .ws-textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px;
  color: var(--ws-text); background: #131b21;
  border: 1px solid #7d909e; border-radius: 10px;
  box-shadow: inset 0 2px 3px #0004; font-size: 16px;
}
.ws-input::placeholder, .ws-textarea::placeholder { color: #b8c3cd; opacity: 1; }
.ws-textarea { min-height: 120px; resize: vertical; }
.ws-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 44px; padding: 9px 13px; flex: none;
  border: 1px solid #ffb36d; border-radius: 9px;
  background: linear-gradient(#ff961e, #fa7310); color: var(--ws-orange-ink);
  font-weight: 750; box-shadow: inset 0 1px 0 #ffffff33, 0 2px 3px #0004;
}
.ws-button--outline { border: 2px solid var(--ws-orange); background: #151e25; color: var(--ws-text); }
.ws-button--quiet { border-color: #768691; background: #1d2830; color: var(--ws-text); }
.ws-button:active { transform: translateY(1px); }
.ws-help { margin: 10px 0 0; font-size: 12px; color: var(--ws-muted); line-height: 1.5; }
.ws-status { margin: 8px 0 0; color: var(--ws-text); font-size: 13px; }
.ws-detail { padding: 15px 12px; }
.ws-heading { margin: 0 0 12px; font-size: 22px; }
.ws-drawer-frame {
  padding: 6px; border: 2px solid #a7b4bc; border-radius: 7px;
  background: #10181f; box-shadow: inset 0 0 0 2px #465560, 0 2px 3px #0005;
}
/* Grid dimensions are supplied by the selected case's actual model.
   Set --ws-cols / --ws-rows only from real data, never a global fixed count. */
.ws-drawer-grid {
  display: grid; grid-template-columns: repeat(var(--ws-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ws-rows), minmax(44px, 1fr)); gap: 4px;
  min-height: calc(var(--ws-rows) * 48px - 4px);
}
.ws-drawer {
  appearance: none; min-width: 0; min-height: 44px; padding: 2px;
  border: 1px solid #91a5b4; border-radius: 3px;
  background: linear-gradient(135deg, #405463, #2c3b47); color: #f5f1e8;
  box-shadow: inset 0 0 0 2px #c9d8e31c;
}
.ws-drawer.is-match {
  background: linear-gradient(135deg, #8e2529, #5d2026);
  border: 2px solid #ff7377; box-shadow: inset 0 0 0 1px #ff737744;
}
.ws-drawer.is-selected {
  outline: 3px solid var(--ws-orange); outline-offset: -3px;
  box-shadow: inset 0 0 0 5px #ff841724;
}
/* Both states stay visible: red match fill plus orange selected outline. */
.ws-selected-info { margin-top: 12px; overflow-wrap: anywhere; }
.ws-selection-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ws-selection-row p, .ws-contents { margin: 0; }
.ws-contents { margin-top: 5px; white-space: pre-wrap; }
.ws-empty { color: var(--ws-muted); }
.ws-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Optional native dialog styling; reuse the existing editor instead if present. */
.ws-dialog {
  color: var(--ws-text); background: var(--ws-panel); border: 1px solid #7d909e;
  border-radius: 12px; width: min(92vw, 480px); max-height: 85svh; overflow: auto; padding: 20px;
}
.ws-dialog::backdrop { background: #000b; }
.ws-field-label { display: block; margin: 12px 0 6px; }
.ws-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (hover: hover) {
  .ws-case:hover { filter: brightness(1.13); }
  .ws-drawer:hover { filter: brightness(1.15); }
  .ws-button:hover { filter: brightness(1.08); }
}
@media (min-width: 480px) {
  .ws-shell { padding-inline: 14px; }
  .ws-map-area, .ws-search-section, .ws-detail { padding-inline: 16px; }
  .ws-drawer-grid {
    grid-template-rows: repeat(var(--ws-rows), minmax(54px, 1fr));
    min-height: calc(var(--ws-rows) * 58px - 4px);
  }
  .ws-help { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ws-button:active { transform: none; } }
@media (forced-colors: active) {
  .ws-case.is-selected, .ws-drawer.is-selected { outline: 3px solid Highlight; }
  .ws-case.is-match, .ws-drawer.is-match { border: 3px dashed Highlight; }
}

/* Inventory overview: wood work surface with labeled steel organizers. */
.workshop .ws-map-panel {
  background-color: #76502f;
  background-image:
    repeating-linear-gradient(3deg, #ffffff08 0 2px, transparent 2px 18px),
    repeating-linear-gradient(91deg, #20130820 0 1px, transparent 1px 46px),
    linear-gradient(135deg, #93643b, #654329 58%, #805533);
}
.workshop .ws-map-area { padding-top: 30px; }
.workshop .bin-thumb.ws-case { overflow: visible; }
.workshop .ws-case-label {
  top: -17px; left: 6px; transform: none; z-index: 2;
  min-width: 20px; padding: 1px 5px 2px;
  border: 1px solid #b5a17c; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: #eee2c8; color: #202426;
  font-size: clamp(12px, 2.8vw, 16px); font-weight: 900; line-height: 1;
  text-align: center; text-shadow: none; pointer-events: none;
  box-shadow: inset 0 1px 0 #fff8;
}
.workshop .ws-case.is-match .ws-case-label { background: #d4d9db; color: #202426; }
.workshop .ws-case.is-selected .ws-case-label { background: var(--ws-orange); border-color: #ffb36d; }
.workshop .ws-case::after {
  content: ""; position: absolute; bottom: -5px; left: 50%;
  width: 16px; height: 4px; border: 1px solid #bd5b0d; border-radius: 0 0 4px 4px;
  background: linear-gradient(#ff9b35, #e5660a); transform: translateX(-50%);
  pointer-events: none;
}
.workshop .ws-search-section {
  border-top-color: #d6b18366; border-radius: 0 0 10px 10px;
  background: linear-gradient(145deg, #26323b, #171e23 75%);
  box-shadow: inset 0 2px 4px #0004;
}

/* The same section geometry renders mini maps and the selected full-size bin. */
.workshop .ws-bin-layout {
  display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0;
}
.workshop .ws-bin-layout--mini { height: 100%; gap: 1px; pointer-events: none; }
.workshop .ws-bin-section {
  display: grid; flex: 1 1 0; min-width: 0; min-height: 0;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
}
.workshop .ws-bin-layout--mini .ws-bin-section { gap: 1px; }
.workshop .ws-mini-cell {
  display: block; min-width: 0; min-height: 0; padding: 0;
  border: 1px solid #a5b1b8; border-radius: 1px;
  background: linear-gradient(145deg, #465b68, #273742);
  box-shadow: inset 0 0 0 1px #e3edf21c;
}
.workshop .ws-bin-layout--detail { gap: 4px; }
.workshop .ws-bin-layout--detail[data-bin-type="large"] { height: clamp(300px, 70vw, 520px); }
.workshop .ws-bin-layout--detail[data-bin-type="small"] { height: clamp(384px, 85vw, 640px); }
.workshop .ws-bin-layout--detail[data-bin-type="mixed"] { height: clamp(390px, 85vw, 640px); }
.workshop .ws-bin-layout--detail .ws-bin-section.ws-drawer-grid {
  flex: 1 1 0; min-height: 0; gap: 4px;
  grid-template-rows: repeat(var(--ws-rows), minmax(44px, 1fr));
}
.workshop #binFull.ws-drawer-frame { height: auto; aspect-ratio: auto; }

/* Inventory page integration: keep the production app's real markup and grid model. */
.workshop .ws-title { position: static; padding: 0; }
.workshop {
  --bin-outline: #7b8a94;
  --bin-label: var(--ws-text);
  --bin-bg: #10181f;
  --highlight-bin: var(--ws-match);
  --highlight-drawer: var(--ws-red);
  --drawer-bg: var(--ws-drawer);
  --drawer-border: #91a5b4;
}
.workshop .ws-search-section { display: block; }
.workshop .ws-search { min-width: 0; }
.workshop .ws-case, .workshop .ws-drawer { cursor: pointer; touch-action: manipulation; }
.workshop .ws-case-label {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--ws-text); font-size: clamp(24px, 5vw, 48px);
  font-weight: 900; line-height: 1; text-shadow: 0 2px 5px #000;
}
.workshop .ws-input-wrap { position: relative; flex: 1 1 200px; min-width: 0; }
.workshop .ws-input-wrap .ws-input { height: 100%; padding-left: 42px; }
.workshop .ws-search-icon { position: absolute; z-index: 1; top: 50%; left: 12px; color: var(--ws-muted); transform: translateY(-50%); pointer-events: none; }
.workshop #btnSearch { min-width: 108px; }
.workshop #binFull.ws-drawer-frame {
  width: 100%; max-width: 720px; min-width: 0; margin: 8px auto 0;
  aspect-ratio: 5 / 4; border: 2px solid #a7b4bc; border-radius: 7px;
  background: #10181f; box-shadow: inset 0 0 0 2px #465560, 0 2px 3px #0005;
}
.workshop .bin-title.ws-heading { margin: 0 0 12px; }
.workshop .layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.workshop .ws-case-mini .drawer {
  min-width: 0; min-height: 0; border: 1px solid #8ea0ae; border-radius: 1px;
  background: #3a4d5d; box-shadow: inset 0 0 0 1px #c9d8e31c;
}
.workshop .drawer.full.ws-drawer.fullstate-empty,
.workshop .drawer.full.ws-drawer.fullstate-has {
  border-color: #91a5b4; background: linear-gradient(135deg, #405463, #2c3b47);
}
.workshop .drawer.full.match.ws-drawer.is-match {
  border-color: #ff7377; background: linear-gradient(135deg, #8e2529, #5d2026);
}
.workshop .drawer.full.selected.ws-drawer.is-selected {
  outline: 3px solid var(--ws-orange); outline-offset: -3px; border-color: var(--ws-orange);
  box-shadow: inset 0 0 0 5px #ff841724;
}
.workshop .drawer.full.match.selected.ws-drawer.is-match.is-selected {
  background: linear-gradient(135deg, #8e2529, #5d2026);
}

.workshop [role="button"]:focus-visible { outline: 3px solid #ffe1a8; outline-offset: 3px; }
.workshop .ws-case:focus-visible { outline: 3px solid #ffe1a8; outline-offset: 3px; }
.workshop .drawer.full.ws-drawer:focus-visible:not(.is-selected) { outline: 3px solid #ffe1a8; outline-offset: 1px; }
.workshop .drawer.full.selected.ws-drawer.is-selected:focus-visible { outline: 3px double #ffe1a8; outline-offset: 0; }
.workshop .ws-icon { color: currentColor; }
.workshop .ws-contents { overflow-wrap: anywhere; }
.workshop .content-editor textarea.ws-textarea {
  flex: 1 1 20rem; width: min(560px, 100%); min-width: 0; max-width: 100%; min-height: 120px;
  padding: 10px 12px; border: 1px solid #7d909e; border-radius: 10px;
  background: #131b21; color: var(--ws-text); box-shadow: inset 0 2px 3px #0004;
}
.workshop .content-editor .ws-button { min-width: 84px; }

@media (max-width: 640px) {
  .workshop .layout { gap: 8px; }
  .workshop #binFull.ws-drawer-frame { aspect-ratio: auto; }
}

@media (max-width: 480px) {
  .workshop .ws-search { gap: 7px; }
  .workshop #btnSearch { min-width: 44px; padding-inline: 10px; }
  .workshop #btnSearch .ws-icon { display: none; }
}

/* Keep these production selectors after the legacy compatibility rules above. */
.workshop .ws-case-label {
  top: -17px; left: 6px; transform: none; z-index: 2;
  min-width: 20px; padding: 1px 5px 2px;
  border: 1px solid #b5a17c; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: #eee2c8; color: #202426;
  font-size: clamp(12px, 2.8vw, 16px); font-weight: 900; line-height: 1;
  text-align: center; text-shadow: none; pointer-events: none;
  box-shadow: inset 0 1px 0 #fff8;
}
.workshop .ws-case.is-match .ws-case-label { background: #d4d9db; color: #202426; }
.workshop .ws-case.is-selected .ws-case-label { background: var(--ws-orange); border-color: #ffb36d; }
.workshop .ws-bin-layout--mini .ws-case-mini .ws-mini-cell:not(.is-match) {
  background: linear-gradient(145deg, #465b68, #273742);
  box-shadow: inset 0 0 0 1px #e3edf21c;
}
.workshop .drawer.full.selected.ws-drawer.is-selected {
  border-color: var(--ws-orange); background: linear-gradient(135deg, #805027, #56351f);
}
.workshop .drawer.full.match.selected.ws-drawer.is-match.is-selected {
  background: linear-gradient(135deg, #8e2529, #5d2026);
}
.workshop #binFull.ws-drawer-frame { height: auto; aspect-ratio: auto; }

/* Mirrored selection state for miniature and full-size drawer identities. */
.workshop { --ws-amber: #ffbd38; }
.ws-case .ws-mini-cell.is-match {
  background: #9b252b;
  border-color: #ff7377;
}
.ws-case .ws-mini-cell.is-selected {
  outline: 2px solid var(--ws-amber);
  outline-offset: -1px;
  position: relative;
  z-index: 1;
}
.workshop .drawer.full.selected.ws-drawer.is-selected {
  outline: 3px solid var(--ws-amber);
  border-color: var(--ws-amber);
}
.workshop .drawer.full.match.selected.ws-drawer.is-match.is-selected {
  background: linear-gradient(135deg, #8e2529, #5d2026);
}

#binFull .drawer.full {
  position: relative;
  border: 7px solid #ff8417;
  border-radius: 7px;
  background: radial-gradient(
    ellipse at 50% 100%, #354d5c, #13242f 90%
  );
  box-shadow:
    inset 0 5px 8px #000c,
    inset 3px 0 5px #0008,
    inset 0 -1px 0 #d5e8f233,
    0 1px 0 #ffbd67;
}

#binFull [data-bin-type="small"] .drawer.full,
#binFull [data-bin-type="mixed"] [data-section="top"] .drawer.full {
  border-width: 4px;
}

#binFull .drawer.full.is-match {
  background: linear-gradient(#b1262c, #75151d);
}

#binFull .drawer.full.is-selected {
  border-color: #ffd05b;
  outline: 2px solid #ffe79b;
  outline-offset: -3px;
  background: linear-gradient(#73501f, #382818);
}

#binFull .drawer.full.is-match.is-selected {
  background: linear-gradient(#b1262c, #75151d);
}

#binFull.bin-full {
  padding: 7px;
  border: 3px solid #8296a2;
  border-radius: 10px;
  background: #0c1820 !important;
  box-shadow:
    inset 0 0 0 3px #354d5b,
    inset 0 5px 5px #000b;
}

#layout .drawer.ws-mini-cell.is-match {
  background: #a8242c;
  border-color: #ff746b;
}

#layout .drawer.ws-mini-cell.is-selected {
  outline: 2px solid #ffe074;
  outline-offset: -1px;
}