SmartestHome/workshop/frontend/style.css

/* workshop inventory editor styling.
 *
 * Deliberately NOT the purple/magenta holo theme from docs/workshop-assistant.md: that
 * is for the canvas surfaces the assistant draws on, where the look is the point. This
 * is a form you sit at and correct data in, and a glow behind a text field is a cost
 * with no benefit. The theme belongs on the display; the editor belongs to your eyes.
 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #14101c;
  color: #e9e2f5;
  font-family: system-ui, sans-serif;
}

#top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(200, 120, 255, 0.22);
}

#top h1 { margin: 0; font-size: 20px; }

main { padding: 20px 24px 60px; max-width: 1100px; }

.muted { color: #a98fc4; font-size: 14px; }
.error { color: #ff8080; font-size: 14px; }

#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

#controls input[type="search"] { flex: 1; min-width: 220px; }

input, select, button {
  min-height: 42px;
  padding: 6px 10px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid rgba(200, 120, 255, 0.24);
  background: #1d1629;
  color: #e9e2f5;
}

button { cursor: pointer; }
button.primary { background: #c084fc; color: #17101f; border-color: transparent; font-weight: 600; }
button.danger { border-color: rgba(255, 120, 120, 0.4); color: #ff9c9c; }

#add-form {
  border: 1px solid rgba(200, 120, 255, 0.24);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
  background: rgba(28, 12, 44, 0.5);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.grid label, .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #a98fc4;
}

.grid label.wide { grid-column: 1 / -1; }

.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* --- rows ------------------------------------------------------------------------ */
.item {
  border: 1px solid rgba(200, 120, 255, 0.18);
  border-left-width: 5px;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(28, 12, 44, 0.35);
}

/* Status carried on the left edge, so a long list is scannable without reading every
 * row — and reinforced by the sentence under each one, because reserved and in-use are
 * the pair people confuse and a colour alone would not settle it. */
.status-available { border-left-color: #35d488; }
.status-assigned  { border-left-color: #e0a000; }
.status-in_use    { border-left-color: #ff3ec8; }
.status-retired   { border-left-color: #5b4a6e; opacity: 0.7; }

.item-head { display: flex; gap: 10px; flex-wrap: wrap; }
.item-head .designation { flex: 2; min-width: 200px; font-weight: 600; }
.item-head .kind { flex: 1; min-width: 120px; }
.item-head .quantity { width: 90px; }

.item-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.item .hint { margin: 8px 0 0; font-size: 13px; color: #a98fc4; }

.item-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.row-status { font-size: 13px; }

/* --- Tabs, cameras, health ---------------------------------------------------------- */
#tabs { display: flex; gap: 6px; }
.tab {
  min-height: 36px;
  padding: 4px 14px;
  background: transparent;
  border-color: transparent;
  color: #a98fc4;
}
.tab.active { background: rgba(200, 120, 255, 0.18); color: #e9e2f5; }

.panel { display: none; }
.panel.active { display: block; }

/* The health pill sits in the header and is never a page you have to remember to open:
 * health you only see when you go looking for it is health you learn about from the
 * failure instead. Colour AND text, because a coloured dot alone is a guess. */
.pill {
  margin-left: auto;
  min-height: 34px;
  padding: 2px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.pill.ok { background: rgba(53, 212, 136, 0.18); border-color: #35d488; color: #9ff0c4; }
.pill.problem { background: rgba(224, 160, 0, 0.18); border-color: #e0a000; color: #ffd98a; }
.pill.unreachable { background: rgba(255, 90, 90, 0.18); border-color: #ff5a5a; color: #ffb3b3; }
.pill.unknown { background: rgba(255, 255, 255, 0.08); color: #a98fc4; }

#health-dialog {
  border: 1px solid rgba(200, 120, 255, 0.3);
  border-radius: 14px;
  background: #1a1226;
  color: #e9e2f5;
  max-width: 640px;
  width: 90vw;
}
#health-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.health-row { border-left: 4px solid #5b4a6e; padding-left: 12px; margin: 14px 0; }
.health-row.ok { border-left-color: #35d488; }
.health-row.problem { border-left-color: #e0a000; }
.health-row.unreachable { border-left-color: #ff5a5a; }
.health-row h3 { margin: 0 0 4px; font-size: 16px; }
.health-row p { margin: 2px 0; font-size: 14px; }
.health-row ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: #a98fc4; }

.camera-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}
.camera { margin: 0; }
.camera iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(200, 120, 255, 0.24);
  border-radius: 10px;
  background: #000;
}
.camera figcaption { font-size: 14px; color: #a98fc4; padding-top: 6px; }

/* --- Fleet scripts ------------------------------------------------------------------ */
.script-body {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 120, 255, 0.24);
  background: #120d1b;
  color: #e9e2f5;
  resize: vertical;
}
.script-note { flex: 1; min-width: 160px; }
.versions { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: #a98fc4; }
.versions li { margin: 4px 0; }
.versions code { color: #c084fc; }
#fleet h2 { font-size: 17px; margin: 22px 0 4px; }