/* Bambu Express — dark navy dashboard theme.
   Drop-in replacement for the hosted website's style.css.
   Preserves the existing portrait and printer-row layout. */
:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #e2eaf2;
  background: #101923;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #101923; }
.shell { max-width: 1100px; margin: 32px auto; padding: 0 18px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
h1 { margin: 0; font-size: 1.6rem; letter-spacing: .07em; color: #e2eaf2; }
header p { margin: 5px 0; color: #9dafc0; }

/* Connection freshness: subdued blue when healthy, restrained warm tint when stale. */
.freshness { font-size: .9rem; border: 1px solid #354b60; border-radius: 20px; padding: 8px 13px; background: #223449; color: #b4c6d7; }
.freshness.good { background: #1a354b; border-color: #35678b; color: #91c5e9; }
.freshness.bad { background: #3a2933; border-color: #835262; color: #f1b5bd; }

/* Five-row dashboard: status icon, portrait, and printer details. */
.printer {
  background: #192838;
  border: 1px solid #2a3c50;
  border-radius: 13px;
  padding: 19px 22px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 75px 128px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  box-shadow: 0 3px 12px #080e1640;
}
.symbol { font-size: 2.3rem; display: flex; align-items: center; justify-content: center; color: #6bade0; }
.symbol.offline { color: #8192a4; }
.symbol.paused { color: #d1a66c; }
.name { font-size: 1.25rem; font-weight: 750; color: #e2eaf2; }
.job { color: #9dafc0; margin: 3px 0 13px; overflow-wrap: anywhere; }

/* Print progress and metadata. */
.progressrow { display: flex; align-items: center; gap: 12px; }
.track { height: 12px; background: #2a3c50; border-radius: 12px; overflow: hidden; flex: 1; }
.fill { height: 100%; background: #428bc4; border-radius: 12px; width: 0; }
.percent { font-weight: 700; color: #6bade0; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
/* Four stable columns: status, nozzle, bed, and right-aligned remaining time. */
.details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 11px; color: #b2c2d0; font-size: .9rem; }
.detail-cell { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.detail-label { font-size: .78rem; color: #9dafc0; }
.detail-value { color: #e2eaf2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.detail-cell:last-child { align-items: flex-end; text-align: right; }

/* Custom portraits remain at their established dimensions. */
.portrait-slot { width: 128px; height: 128px; flex: none; }
.portrait { display: block; width: 128px; height: 128px; object-fit: cover; border-radius: 9px; border: 1px solid #3b5167; }
.empty { padding: 30px; background: #192838; border: 1px solid #2a3c50; border-radius: 12px; color: #9dafc0; }
footer { margin: 22px 0; color: #8fa8c0; font-size: .85rem; }

/* Narrow displays: smaller portraits and tighter spacing. */
@media (max-width: 600px) {
  .shell { margin: 18px auto; }
  header { align-items: flex-start; flex-direction: column; }
  .printer { grid-template-columns: 36px 48px minmax(0, 1fr); gap: 9px; padding: 15px; }
  .portrait-slot, .portrait { width: 48px; height: 48px; }
  .symbol { font-size: 1.6rem; }
  .details { gap: 6px; font-size: .78rem; }
  .detail-label { font-size: .7rem; }
  .name { font-size: 1.1rem; }
}