/* Shared workspace finish; view-specific controls keep their original behavior. */
:root {
  --md-sys-color-background: #f4f7fa;
  --md-sys-color-outline-variant: #d3dde4;
  --md-sys-color-on-surface-variant: #4d6070;
  --md-sys-elevation-1: 0 2px 8px rgb(23 49 66 / 6%);
  --md-sys-elevation-2: 0 6px 20px rgb(23 49 66 / 10%);
  --md-sys-elevation-3: 0 16px 48px rgb(23 49 66 / 16%);
}
.app-shell { background: var(--md-sys-color-background); }
.top-app-bar { background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.top-app-bar.is-scrolled { background: rgb(255 255 255 / 98%); box-shadow: 0 3px 12px rgb(23 49 66 / 5%); }
.top-app-bar__title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 600; }
.nav-rail { background: #fff; gap: 12px; padding-top: 14px; }
.nav-rail__header { flex: none; }
.nav-rail__items { min-height: 0; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; }
.nav-rail__footer { flex: none; padding-top: 10px; border-top: 1px solid #e6edf1; }
.nav-item { text-decoration: none !important; }
.nav-rail.is-expanded .nav-item { height: 46px; border-radius: 12px; padding: 0 14px; }
.nav-rail.is-expanded .nav-item:hover { background: #f3f7fa; }
.nav-rail.is-expanded .nav-item.is-active { color: #00687e; background: #e6f4f7; box-shadow: inset 3px 0 #007e95; }
.nav-rail.is-expanded .nav-item__label { font-size: 13px; font-weight: 600; }
.nav-item__indicator { height: 34px; }
.nav-item.is-active .nav-item__indicator { background-color: #e0f1f5; }
.nav-rail.is-expanded .nav-item__indicator { background: none; }
.page-header { padding-top: 30px; padding-bottom: 24px; gap: 20px; }
.page-header__title { font-weight: 650; letter-spacing: -.65px; }
.page-header__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.35px; }
.page-header__desc { font-size: 14px; line-height: 1.65; max-width: 68ch; }
.page-header__actions { gap: 10px; }
.md-button { border-radius: 10px; min-height: 42px; }
.md-button--filled { box-shadow: 0 3px 8px rgb(0 104 126 / 12%); }
.md-button--outlined { background-color: #fff; border-color: #b8c9d2; }
.md-card, .toolbar { border-radius: 18px; }
.md-card--outlined { border-color: var(--md-sys-color-outline-variant); box-shadow: 0 2px 7px rgb(24 49 63 / 3%); }
.md-card__head { border-bottom-color: #e6edf1; }
.toolbar { padding: 16px; gap: 16px; box-shadow: 0 2px 7px rgb(24 49 63 / 3%); }
.data-table thead th { background-color: #f6f9fb; color: #526675; font-size: 12px; font-weight: 650; }
.data-table tbody tr:hover { background: #f8fbfc; }
.data-table th, .data-table td { border-bottom-color: #e6edf1; }
.user-chip { border: 1px solid #e0e8ed; border-radius: 12px; background: #fff; }
.stream-chip { border: 1px solid #cfe9d7; }
.network-pulse { border-color: #dce5eb; background: #f8fafc; }
.network-pulse__bar { max-width: 70px; }
.sp-stage { border-radius: 20px; }
.sp-step, .sp-status { border-radius: 18px; }
.devices-details { border: 1px solid #dce5eb; border-radius: 16px; background: #fff; min-width: 0; }
.devices-details > summary { padding: 14px 16px; cursor: pointer; color: #395561; font-size: 13px; font-weight: 600; line-height: 20px; }
.devices-details > summary:hover { color: #00687e; }
.devices-details > summary:focus-visible { outline: 2px solid #00687e; outline-offset: 2px; border-radius: 12px; }
.devices-details[open] > summary { border-bottom: 1px solid #e6edf1; }
.devices-details__body { padding: 14px 16px; }
.devices-details__body > p + p { margin-top: 10px; }
.devices-connection { margin-bottom: 16px; }
.devices-connection .mqtt-bar { margin: 0; border: 0; border-radius: 0 0 16px 16px; padding: 16px; }
.rollout-panel .rollout__limit { background: #fdfaf2; border-color: #e4d7b0; border-radius: 16px; }
.devices-details--inline { margin-top: 10px; background: rgb(255 255 255 / 65%); border-color: #e4d7b0; }
.devices-details--inline > summary { font-size: 12px; padding: 10px 12px; }
.devices-details--inline .devices-details__body { padding: 12px; }
@media (prefers-reduced-motion: reduce) {
  .view-root { animation: none; }
  .app-shell, .nav-rail, .nav-item { transition: none; }
}
@media (max-width: 1023px) {
  .top-app-bar__title > span { font-size: 15px; }
  .top-app-bar__actions { gap: 6px; }
}
@media (max-width: 599px) {
  .page-header { padding-top: 22px; gap: 16px; }
  .page-header__title { font-size: 25px; }
  .page-header__desc { font-size: 13px; }
  .page-header__actions .md-button { flex: 1 1 auto; }
  .nav-bar { background: #fff; padding-bottom: max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -3px 14px rgb(24 49 63 / 5%); }
  .nav-bar .nav-item { min-height: 52px; gap: 2px; }
  .nav-bar .nav-item__label { font-size: 10px; letter-spacing: 0; }
  .nav-bar .nav-item__indicator { max-width: 50px; height: 30px; }
  .toolbar { border-radius: 14px; padding: 12px; gap: 12px; }
}