/* The inspector, and the status bar under the plan.
   Part 4 of 6 under roomcad/web/styles/. index.html loads them in
   this order, and that order IS the cascade order — do not reorder the links. */
/* ── Inspector ───────────────────────────────────────── */

#inspector {
  width: var(--inspector-width);
  min-width: 0;
  flex: 0 0 var(--inspector-width);
  /* The gap goes on the INSIDE edge. The inspector's own scrollbar lives at
     its right edge, and pushing that away from the screen edge would leave the
     scrollbar floating in the middle of nothing. */
  margin-left: var(--edge-gap);
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  /* No padding on the right edge. A scroll container puts its scrollbar at the
     inside edge of its own padding box, so right padding out here lands to the
     RIGHT of the scrollbar — it holds the scrollbar off the screen edge and
     lets the text run straight into it. The gap belongs on the other side of
     the bar, so it goes on the scrolling element instead. */
  padding: 14px 0 12px 14px;
}

#inspector-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* Keeps the text clear of the scrollbar rather than the scrollbar clear of
     the panel edge. Moving the gap from one side of the bar to the other costs
     no width — the same 14 px, just on the other side. Reserving a gutter as
     well DOES cost width, and took enough of it to clip the labels. */
  padding-right: 14px;
}

/* The footer is outside the scrolling area, so it needs the inset itself. */
#app-footer {
  padding-right: 14px;
}

#app-version {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.rooms-error {
  color: var(--muted);
  font-size: 12px;
  padding: 6px;
  text-align: center;
}

#inspector h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.field .value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The panel is resizable, and these rows could not shrink: an input at its
     content width plus a 58 px readout is wider than a narrow sidebar, so the
     row overflowed — under the scrollbar and out past the edge of the panel.
     Measured at the minimum width, the readout ended 24 px BEYOND the
     scrollbar. Wrapping is what a row of controls should do when the space runs
     out; padding that holds text off the scrollbar only works if the content
     stays inside it. */
  flex-wrap: wrap;
  row-gap: 6px;
}

/* A flex item's default minimum size is its own content, which is what stops
   these shrinking at all. */
.field .value-row > * {
  min-width: 0;
}

.field input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.field .readout {
  /* A floor of nothing, not a fixed width: it may shrink when the panel is
     narrow rather than push the row past the edge. */
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text);
}

.field input[type="text"],
.field input[type="number"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--panel-2);
}

.field input[type="number"] {
  width: 72px;
  text-align: right;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
}

.stat-row span:first-child {
  color: var(--muted);
}

.inspector-button {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12.5px;
  cursor: pointer;
  margin-top: 6px;
  color: var(--text);
}

.inspector-button:hover {
  background: var(--accent-soft);
}

.inspector-button.danger {
  color: var(--danger);
  border-color: rgba(255, 107, 94, 0.35);
}

.inspector-button.danger:hover {
  background: rgba(255, 107, 94, 0.12);
}

.seg-row {
  display: inline-flex;
  background: var(--panel-2);
  border-radius: 7px;
  padding: 2px;
}

.seg-btn {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.seg-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.inspector-note {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* A note that changes how the numbers above it should be read — here, that the
   plan was too detailed to decompose, so the floor area is only an outline and
   no wall is being held. Coloured so it is not mistaken for the usual hint. */
.inspector-note.warn {
  color: var(--danger);
}

.inspector-sep {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}

/* ── Status bar ──────────────────────────────────────── */

#statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12px;
}

#status-message {
  font-weight: 500;
}

#status-hint {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}