/**
 * workstation.css — the room page as a workstation: the always-visible
 * inspector panel, Inspection Mode's banner, the filter row, search, the
 * zoom/pan control strip, and the compact stats line. Every value here
 * comes from tokens.css; nothing here invents a new color/radius/spacing
 * value the rest of the system doesn't already use.
 */

/* ── Elevated panels ──
   Every transient panel that appears above the base layout — the expanded
   Mark-as/Filter rows, the room-actions overflow menu, and (via
   overlays.css's .popup, already on this token set) search results and
   the shortcuts help — shares this exact treatment, so each one reads as
   floating above the page rather than each inventing its own look.
   --surface-raised is the one token in the system meant for this (see its
   own comment in tokens.css); --shadow-elevated is likewise reserved for
   floating content, never an ordinary docked panel. */
.floating-panel {
  background: var(--surface-raised);
  border: var(--border-divider);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-elevated);
}

/* ── Sidebar legend + stats (moved out of the header/footer — see
   .sidebar-legend further down) ── */
.room-stats {
  font-family: var(--font-mono);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--text-muted);
}

/* .toolbar-row is shared with issues.html's own filter row — kept here
   (not room.js-specific) even though the room page's old horizontal
   toolbar that used to combine it with .toolbar-primary/.toolbar-spacer is
   gone; every room-page control now lives in the sidebar instead (see
   .sidebar-section below). */
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mode-group,
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
}

/* Only .filter-row is ever independently hidden (toggled in the toolbar);
   .mode-group's visibility is controlled by its parent #sidebar-mode in
   the inspector sidebar instead — see .sidebar-mode below. */
.filter-row[hidden] {
  display: none;
}

.filter-btn {
  padding: var(--space-1) var(--space-2);
}

.filter-btn[aria-pressed="true"] {
  background: var(--focus);
  border-color: var(--focus);
  color: var(--surface);
}

/* Inspection Mode toggle (collapsed/off state) and the Filter disclosure
   button both read as pressed/expanded via aria-* rather than a color
   change of their own — the mode picker and filter row appearing (or the
   button's own label changing for Filter) already say "this is active". */
#btn-mode-toggle[aria-pressed="true"] {
  background: var(--surface-muted);
  border-color: var(--line-strong);
}

#btn-filter-toggle[aria-expanded="true"] {
  background: var(--surface-muted);
  border-color: var(--line-strong);
}

/* ── Room actions overflow menu — administrative actions (undo, export,
   reset) tucked away from the core inspect-a-device loop. ── */
.overflow-wrap {
  position: relative;
}

.overflow-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: var(--space-1);
}

.overflow-menu[hidden] {
  display: none;
}

.overflow-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.overflow-item:hover:not(:disabled) {
  background: var(--surface-muted);
  color: var(--text);
}

.overflow-item:disabled {
  color: var(--text-muted);
  cursor: default;
}

.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 0 6px;
  line-height: 1.6;
}

/* ── Inspection Mode banner — the mode must be obvious, not just a
   pressed button somewhere in the toolbar, and exiting it can't rely on a
   sentence mentioning Esc: the banner carries its own clickable Exit
   button so the mode can be entered AND left entirely by mouse/touch,
   with no keyboard required. Esc still works exactly as before — the
   button is additive, not a replacement. Lives in the sidebar (see
   .sidebar-mode below), which is narrower than the toolbar it used to sit
   in, so it's allowed to wrap the Exit button onto its own line rather
   than forcing everything onto one cramped row. */
.mode-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  font-size: var(--text-body);
  font-weight: 600;
  border: 1.5px solid var(--line);
  background: var(--surface-muted);
  color: var(--text);
}
.mode-banner[hidden] { display: none; }
.mode-banner[data-status="working"] { background: var(--status-working-bg);   border-color: var(--status-working);   color: var(--status-working-strong); }
.mode-banner[data-status="minor"]   { background: var(--status-minor-bg);     border-color: var(--status-minor);     color: var(--status-minor-strong); }
.mode-banner[data-status="major"]   { background: var(--status-major-bg);     border-color: var(--status-major);     color: var(--status-major-strong); }
.mode-banner[data-status="not-applicable"] { background: var(--surface-muted); border-color: var(--line-strong); color: var(--text-muted); }

.mode-banner-text { flex: 1 1 auto; }

/* currentColor + color:inherit means this button always matches its own
   banner's status color (working/minor/major/n-a) with no per-status
   override rules of its own — no new color values anywhere. */
.mode-banner-exit {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-control);
  color: inherit;
  cursor: pointer;
  transition: var(--transition);
}
.mode-banner-exit:hover {
  background: var(--surface-muted);
}

/* ── Inspection Mode's sidebar section — the picker + banner as a group,
   replacing the normal inspector content (#inspector-normal) below it
   while armed. See setMode() in room.js for the hidden/visible swap. */
.sidebar-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar-mode[hidden] { display: none; }

/* ── Filters fade non-matching devices; they never disappear — spatial
   context (what's near what) has to survive a filter. ── */
.filtered-out {
  opacity: 0.25;
}

/* ── Selected-device highlight (persists while the inspector has it
   open, independent of hover/focus-visible) ── */
.pc.selected,
.printer.selected {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  z-index: 15;
}

/* ── App-shell: floor plan and sidebar as two distinct regions, not one
   flat horizontal flow. The header stays full-width above — this split is
   specifically the content area below it; every control that used to live
   in a toolbar between the two now lives inside the sidebar itself (see
   .sidebar-section below). `stretch` (rather than the old `flex-start`)
   makes both regions share the taller one's height, which is what lets
   the sidebar scroll independently instead of growing the whole page; the
   divider between them is the sidebar's own left border, not a gap, so it
   reads as one seam rather than a gap plus a border. ── */
.workstation {
  display: flex;
  align-items: stretch;
}

.floor-pane {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-right: var(--space-4);
}

.inspector-panel {
  width: 320px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-raised);
  border-left: var(--border-divider);
  padding: var(--space-4);
}

/* Mobile-only bottom-sheet handle — see .sheet-handle in responsive.css
   for its display:block/sizing; hidden here so it takes no space and
   isn't reachable above the 700px breakpoint. */
.sheet-handle {
  display: none;
}

/* Everything scrolls together as one region — six sections deep, each its
   own clearly separated group (see .sidebar-section) rather than a single
   pinned header over an undifferentiated scroll area. */
.inspector-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Sidebar sections — Primary actions / View / Inspection Mode /
   Secondary actions / Legend & Stats / Inspector, each visually distinct
   via a divider rather than blended into one wall of controls. Only
   sections after the first get the divider — the first sits right under
   the panel's own top edge and needs no separator above it. */
.sidebar-section + .sidebar-section {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-divider);
}

.sidebar-section-label {
  display: block;
  margin: 0 0 var(--space-2);
}

.sidebar-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-block-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Filter / overflow (⋯) / help — used less often than the primary loop
   above, so a size step down (still --text-meta, the same size .kbd and
   .save-status already use for de-emphasized text) reads as visually
   lighter without inventing a new value. */
.sidebar-secondary-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sidebar-secondary-row > * {
  flex: 1 1 auto;
}
.sidebar-secondary-row .toolbar-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-meta);
}
/* #btn-more is nested a level deeper, inside .overflow-wrap — that wrapper
   is the actual flex item (via the rule above), so its own button needs to
   fill it explicitly rather than getting a flex-basis of its own. */
.overflow-wrap .toolbar-btn {
  width: 100%;
}

.inspector-empty {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: 1.6;
}

.inspector-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.inspector-head h3 {
  font-size: var(--text-section-title);
}

.save-status {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--text-muted);
  white-space: nowrap;
}

.inspector-meta {
  font-size: var(--text-meta);
  color: var(--text-muted);
  margin: var(--space-2) 0 var(--space-3);
  border-top: var(--border-divider);
  padding-top: var(--space-2);
}

.inspector-meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
}

.mono { font-family: var(--font-mono); }

/* ── Sidebar Legend + Stats — its own clearly separate, collapsible
   sub-section (divider comes from the shared .sidebar-section rule above),
   reusing the exact same disclosure look .site-toggle already has
   elsewhere (navigation.css) so it reads as an extension of the existing
   system, not a new one. Defaults collapsed (see setLegendOpen(false) in
   room.js) now that five other sections share the sidebar with it. */
.legend-stats-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.legend-stats-body[hidden] { display: none; }

/* ── Zoom/pan control strip — now grouped in the sidebar's own "View"
   section (see .sidebar-view in room.js's markup) since it directly
   controls the adjacent canvas, rather than floating over the canvas
   itself. */
.zoom-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.zoom-controls .toolbar-btn {
  padding: var(--space-1) var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.zoom-hint {
  flex: 1 1 100%;
  font-size: var(--text-meta);
  color: var(--text-muted);
}

/* Dragging to pan should show a grab cursor, not the device crosshair,
   over empty floor-plan background. */
.room-viewport { cursor: grab; }
.room-viewport:active { cursor: grabbing; }

/* ── Search ── */
.popup-search { max-width: 480px; }

.search-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.search-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: var(--surface-muted);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text);
  transition: var(--transition);
}
.search-result:hover { border-color: var(--line-strong); }

.search-result-room {
  color: var(--text-muted);
  font-size: var(--text-meta);
}

.search-hint {
  color: var(--text-muted);
  font-size: var(--text-body);
  padding: var(--space-2) 0;
}

/* ── Empty state (e.g. a not-yet-finalized room reached directly by URL
   — see renderNotFinalized() in room.js) — a single centered card, reusing
   .floating-panel for the same look every other elevated surface has. ── */
.empty-state {
  margin-top: var(--space-6);
  padding: var(--space-6);
  max-width: 480px;
}
.empty-state-title {
  font-size: var(--text-section-title);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.empty-state-body {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.empty-state-action {
  display: inline-flex;
}

/* ── Keyboard shortcuts help ── */
.shortcut-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.shortcut-list > div {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.shortcut-list dd {
  color: var(--text-secondary);
  font-size: var(--text-body);
}