.ns-tasks { margin-bottom: 24px; overflow: hidden; }
.ns-task-open, .ns-task-open:visited { color: var(--ink); text-decoration: none; }
.ns-task-open:hover { color: var(--accent-strong); text-decoration: underline; }
.ns-task-map-link { display: inline-block; margin-top: 16px; color: var(--accent-strong); font-size: 12px; }
.ns-view-switch { display: flex; gap: 6px; margin-bottom: 16px; }
.ns-calendar { overflow: hidden; }
.ns-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; }
.ns-calendar-heading h2 { margin: 6px 0; font-size: 22px; letter-spacing: -.02em; }
.ns-calendar-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.ns-week-controls, .ns-calendar-toolbar, .ns-calendar-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ns-calendar-toolbar { padding: 0 22px 18px; justify-content: space-between; }
.ns-calendar-scroll { overflow-x: auto; }
.ns-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 1120px; min-height: 440px; border-block: 1px solid var(--line); }
.ns-calendar-day { min-width: 0; border-right: 1px solid var(--line); }
.ns-calendar-day:last-child { border-right: 0; }
.ns-day-heading { display: flex; align-items: center; gap: 8px; padding: 14px 10px; background: var(--surface-muted); border-bottom: 1px solid var(--line); }
.ns-day-heading > span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.ns-day-heading strong { font-size: 21px; }
.ns-day-heading small { margin-left: auto; color: var(--muted); font-size: 10px; }
.is-today .ns-day-heading { background: var(--accent-soft); box-shadow: inset 0 3px var(--accent); }
.is-today .ns-day-heading strong, .is-today .ns-day-heading small { color: var(--accent-strong); }
.ns-day-tasks { display: grid; align-content: start; gap: 10px; padding: 10px 8px; }
.ns-calendar-task, .ns-calendar-task:visited { display: grid; gap: 8px; padding: 12px 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--surface-muted); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ns-calendar-task:hover, .ns-calendar-task:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline-offset: 3px; }
.ns-calendar-task.ns-kind-service { border-left-color: #e8aa54; }
.ns-calendar-task.ns-kind-configuration { border-left-color: #a898e8; }
.ns-calendar-task.ns-kind-general { border-left-color: #78bca8; }
.ns-calendar-time { font-size: 11px; font-weight: 750; line-height: 1.5; }
.ns-calendar-topline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; }
.ns-calendar-topline .ns-calendar-flag { padding: 3px 6px; font-size: 9px; line-height: 1.4; white-space: nowrap; }
.ns-calendar-client { color: var(--accent-strong); font-size: 11px; font-weight: 650; }
.ns-calendar-task strong { font-size: 12px; line-height: 1.5; }
.ns-calendar-due { color: var(--muted); font-size: 10px; line-height: 1.5; }
.ns-day-empty { text-align: center; color: var(--muted); font-size: 11px; margin: 24px 0; }
.ns-calendar-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 16px 22px 0; color: var(--muted); font-size: 11px; }
.ns-undated { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.ns-undated summary { cursor: pointer; font-size: 13px; }
.ns-undated > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.ns-detail-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ns-detail-sidebar { display: grid; gap: 16px; min-width: 0; }
.ns-detail-summary, .ns-detail-section { padding: 22px; }
.ns-detail-summary h2, .ns-detail-section h2 { margin: 0 0 14px; font-size: 16px; }
.ns-detail-summary h2 { margin-top: 18px; }
.ns-detail-fields { display: grid; gap: 13px; margin: 0 0 16px; }
.ns-detail-fields dt { color: var(--muted); font-size: 11px; }
.ns-detail-fields dd { margin: 4px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-detail-address, .ns-detail-copy { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-detail-map { overflow: hidden; }
.ns-map-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding: 22px; }
.ns-map-heading h2 { margin: 6px 0; font-size: 20px; }
.ns-map-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.ns-map-actions { display: flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: 14px; }
.ns-larger-map { color: var(--accent-strong); white-space: nowrap; font-size: 12px; }
.ns-map-site-fields { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0 22px 18px; margin: 0; border-bottom: 1px solid var(--line); }
.ns-detail-map iframe { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 0; background: var(--surface-muted); }
.ns-map-caption { padding: 0 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }
@media (max-width: 900px) {
  .ns-calendar-heading { align-items: flex-start; flex-direction: column; }
  .ns-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .ns-detail-map { position: static; grid-row: 1; }
}
.ns-tasks-heading { display: flex; justify-content: space-between; gap: 20px; padding: 24px 24px 18px; }
.ns-tasks-heading h2 { margin: 5px 0 7px; font-size: 24px; letter-spacing: -.5px; }
.ns-tasks-heading p, .ns-source > span:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.ns-source { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.ns-task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 24px 18px; }
.ns-task-toolbar nav { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-filter { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 8px 12px; border-radius: 7px; font: inherit; font-size: 12px; cursor: pointer; }
.ns-filter.is-active { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent); }
.ns-filter span { font-weight: 700; }
.ns-overdue-count { color: var(--warning); font-size: 12px; }
.ns-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 24px; }
.ns-task-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; border-top: 3px solid var(--accent); }
.ns-task-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.ns-task-card h3 { font-size: 17px; line-height: 1.45; margin: 14px 0 8px; overflow-wrap: anywhere; }
.ns-task-customer { color: var(--muted); font-size: 13px; margin: 0 0 20px; line-height: 1.5; }
.ns-task-deadline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.ns-task-schedule { font-size: 12px; color: var(--muted); line-height: 1.6; }
.ns-task-reference { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--muted); margin: 16px 0; }
.ns-task-details { border-top: 1px solid var(--line); font-size: 13px; }
.ns-task-parts { border-top: 1px solid var(--line); padding-bottom: 14px; font-size: 12px; }
.ns-task-parts summary { padding-top: 14px; color: var(--accent-strong); font-weight: 600; cursor: pointer; }
.ns-task-parts summary span { margin-left: 8px; color: var(--muted); font-weight: 400; }
.ns-task-parts ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ns-task-parts li { border-top: 1px solid var(--line); padding: 12px 0; overflow-wrap: anywhere; }
.ns-part-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.ns-part-heading strong { font-size: 13px; }
.ns-part-heading span { color: var(--muted); }
.ns-task-parts li p { margin: 5px 0 0; line-height: 1.5; color: var(--muted); }
.ns-part-description { font-size: 11px; }
.ns-parts-note { font-size: 11px; line-height: 1.5; color: var(--muted); }
.ns-task-details summary { color: var(--accent-strong); cursor: pointer; padding-top: 14px; font-weight: 600; }
.ns-task-details p, .ns-task-details dd { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.ns-task-details dt { color: var(--muted); font-size: 11px; margin-top: 10px; }
.ns-task-details dd { margin: 2px 0 0; }
.ns-task-details h4 { margin: 16px 0 6px; }
.ns-task-footnote { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 16px 24px 20px; }
.ns-task-empty { color: var(--muted); font-size: 13px; padding-bottom: 16px; }
.ns-task-result-count { font-size: 12px; color: var(--muted); }
.ns-task-project { font-size: 12px; line-height: 1.5; margin: -12px 0 16px; color: var(--muted); overflow-wrap: anywhere; }
.ns-date-toolbar { border-top: 1px solid var(--line); padding-top: 14px; }
.ns-task-pagination { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 14px; padding: 18px 24px 0; font-size: 12px; color: var(--muted); }
.ns-task-pagination button:disabled { opacity: .4; cursor: default; }
@media (max-width: 800px) {
  .ns-task-grid { grid-template-columns: minmax(0, 1fr); }
  .ns-tasks-heading, .ns-task-toolbar { flex-direction: column; align-items: flex-start; }
  .ns-source { align-items: flex-start; }
  .ns-tasks-heading { padding: 18px; }
  .ns-task-grid, .ns-task-toolbar { padding-left: 18px; padding-right: 18px; }
}

:root {
  --page-gutter: 32px;
  color-scheme: light;
  --accent: #0789ca;
  --accent-strong: #006ba6;
  --accent-soft: #e6f5fc;
  --ink: #17212b;
  --muted: #66717f;
  --subtle: #8b96a3;
  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-muted: #f8fafb;
  --dashboard-panel: #f7f9fb;
  --dashboard-tile: #f3f6f8;
  --line: #dce2e7;
  --line-strong: #c5cdd5;
  --nav: #111a23;
  --nav-muted: #9fabb8;
  --success: #267a55;
  --success-soft: #e9f5ef;
  --warning: #a35b00;
  --warning-soft: #fff3df;
  --danger: #b53838;
  --danger-soft: #fcecec;
  --focus: #168ed0;
  --shadow: 0 10px 28px rgba(16, 28, 40, 0.08);
  --sidebar-width: 236px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --accent: #35afe5;
  --accent-strong: #78d2f5;
  --ink: #eef3f7;
  --muted: #a6b1bd;
  --subtle: #83909e;
  --canvas: #0f151c;
  --surface: #171f28;
  --surface-muted: #1c2631;
  --dashboard-panel: #151d26;
  --dashboard-tile: #18232d;
  --line: #303c49;
  --line-strong: #465464;
  --nav: #090e14;
  --nav-muted: #94a2b0;
  --success: #69c99a;
  --warning: #f0b45f;
  --danger: #ef8585;
  --accent-soft: #12364b;
  --success-soft: #18382d;
  --warning-soft: #412e13;
  --danger-soft: #452326;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);
}
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  background: var(--nav);
  color: #f5f8fa;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand img { width: 122px; height: auto; object-fit: contain; }
.brand > div { display: none; }
.brand strong, .brand span { display: block; }
.brand span { color: var(--nav-muted); font-size: 12px; margin-top: 2px; }
.primary-nav { display: grid; gap: 4px; padding: 18px 12px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 7px;
  color: #c7d0d9;
  text-decoration: none;
  font-weight: 650;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: white; }
.nav-item.is-active { background: rgba(7,137,202,.18); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #bfc9d3;
  font-size: 11px;
  font-weight: 800;
}
.nav-item.is-active .nav-mark { border-color: rgba(69,182,238,.5); color: #68c8f5; }
.sidebar-footer { margin-top: auto; padding: 18px 20px 22px; border-top: 1px solid rgba(255,255,255,.08); color: var(--nav-muted); font-size: 12px; }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { color: #edf3f7; margin: 5px 0 2px; font-size: 13px; }

.app-frame { min-height: 100vh; padding-left: var(--sidebar-width); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.breadcrumbs span:not(:last-child)::after { content: "/"; margin-left: 9px; color: var(--line-strong); }
.breadcrumbs strong { color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.connection { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.connection > span { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.connection.is-live > span { background: var(--success); }
.quiet-button, .icon-button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
}
.quiet-button:hover, .icon-button:hover { border-color: var(--line-strong); background: var(--surface-muted); }
.theme-toggle span:first-child { margin-right: 6px; }
.mobile-menu { display: none; }

.page-loading { display: grid; min-height: 55vh; place-items: center; align-content: center; gap: 12px; color: var(--muted); }
.spinner { width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
.employee-sync-indicator { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.employee-sync-spinner { width: 13px; height: 13px; flex: 0 0 13px; }
@keyframes spin { to { transform: rotate(360deg); } }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-header h1 { margin: 3px 0 7px; font-size: clamp(25px, 2vw, 32px); line-height: 1.12; letter-spacing: -.025em; }
.page-header p { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.55; }
.eyebrow { color: var(--accent-strong); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.header-actions, .button-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.primary-button, .secondary-button {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 7px;
  font-weight: 750;
  cursor: pointer;
}
.primary-button { border: 1px solid var(--accent-strong); background: var(--accent); color: white; }
.primary-button:hover { background: var(--accent-strong); }
.secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.secondary-button:hover { border-color: var(--line-strong); background: var(--surface-muted); }
/* A link that performs a page action carries the button classes. Anchors are
   inline and underlined by default, and become full-width blocks inside a flex
   or grid parent, so they need the box a <button> already has. */
a.primary-button, a.secondary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.primary-button:hover, a.secondary-button:hover { text-decoration: none; }
.empty-state > .primary-button, .empty-state > .secondary-button { justify-self: center; margin-top: 15px; }

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  overflow: hidden;
}
.summary-item { padding: 18px 20px; border-right: 1px solid var(--line); }
.summary-item:last-child { border-right: 0; }
.summary-item span { display: block; color: var(--muted); font-size: 12px; }
.summary-item strong { display: block; margin-top: 5px; font-size: 24px; letter-spacing: -.025em; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 20px; }
.stack { display: grid; gap: 20px; align-content: start; }
.panel { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 15px; }
.panel-header a, .text-link { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.panel-header a:hover, .text-link:hover { text-decoration: underline; }
.panel-body { padding: 18px; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.quick-action { display: grid; min-height: 80px; padding: 14px; align-content: space-between; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 750; }
.quick-action span { color: var(--accent); font-size: 18px; }
.quick-action:hover { border-color: var(--accent); background: var(--accent-soft); }

.data-list { margin: 0; padding: 0; list-style: none; }
.data-list li { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 62px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.data-list li:last-child { border-bottom: 0; }
.list-copy { min-width: 0; }
.list-copy strong, .list-copy span { display: block; }
.list-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-copy span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.list-meta { flex: none; color: var(--muted); font-size: 12px; text-align: right; }
.status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: 800; }
.status-badge.is-warning { background: var(--warning-soft); color: var(--warning); }
.status-badge.is-success { background: var(--success-soft); color: var(--success); }
.empty-state { padding: 34px 18px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--ink); }
.error-state { max-width: 680px; margin: 80px auto; padding: 28px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: 9px; background: var(--surface); }
.error-state h1 { margin: 0 0 8px; font-size: 22px; }
.error-state p { margin: 0 0 18px; color: var(--muted); }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 8px; width: min(360px, calc(100vw - 40px)); }
.toast { padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); font-weight: 650; }

@media (max-width: 1080px) {
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .summary-item:nth-child(2) { border-right: 0; }
  .summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow); }
  body.nav-open .sidebar { transform: translateX(0); }
  .app-frame { padding-left: 0; }
  .mobile-menu { display: inline-flex; }
  .topbar { padding: 0 16px; }
  .breadcrumbs { display: none; }
  .connection { display: none; }
  .page-header { flex-direction: column; }
  .quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .summary-item { padding: 15px; }
  .summary-item strong { font-size: 21px; }
  .topbar-actions .quiet-button:first-of-type { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Structured application surfaces */
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.small-button { min-height: 32px; padding: 0 10px; font-size: 12px; }
.danger-button { min-height: 40px; padding: 0 15px; border: 1px solid #8f2727; border-radius: 7px; background: var(--danger); color: #fff; font-weight: 750; cursor: pointer; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--accent-strong); font-size: 12px; font-weight: 700; cursor: pointer; }
.muted-copy { color: var(--muted); line-height: 1.55; }
.back-row { margin: -10px 0 18px; }
.count-badge { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
.result-count { padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.panel-note { padding: 15px 18px; border-top: 1px solid var(--line); background: var(--surface-muted); color: var(--muted); line-height: 1.5; }

.toolbar { display: flex; align-items: end; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.toolbar-wrap { flex-wrap: wrap; }
.search-field, .compact-field { display: grid; gap: 6px; }
.search-field { flex: 1 1 320px; }
.compact-field { flex: 0 1 190px; }
.search-field > span, .compact-field > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
}
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 16px;
  accent-color: var(--accent);
}
textarea { min-height: 86px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-muted); color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
td { min-height: 52px; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
td small, td strong { display: block; }
td small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.row-link { color: var(--ink); font-weight: 750; text-decoration: none; }
.row-link:hover { color: var(--accent-strong); text-decoration: underline; }
.clickable-row { cursor: pointer; }
.rma-needs-update {
  box-shadow: inset 4px 0 0 var(--warning);
  background: color-mix(in srgb, var(--warning-soft) 35%, transparent);
}
.rma-needs-update:hover {
  background: color-mix(in srgb, var(--warning-soft) 65%, transparent);
}
.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.row-actions button { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; }
.row-actions .danger-button { border-color: #8f2727; background: var(--danger); color: #fff; }
.danger-button.small-button { min-height: 32px; padding: 0 10px; font-size: 12px; }

.status-badge.tone-accent { background: var(--accent-soft); color: var(--accent-strong); }
.status-badge.tone-warning { background: var(--warning-soft); color: var(--warning); }
.status-badge.tone-success { background: var(--success-soft); color: var(--success); }
.status-badge.tone-neutral { background: var(--surface-muted); color: var(--muted); border: 1px solid var(--line); }
.status-badge.tone-danger { background: var(--danger-soft); color: var(--danger); }
.status-badge + .status-badge { margin-left: 4px; }
.me-badge {
  display: inline-flex;
  min-height: 18px;
  padding: 0 6px;
  align-items: center;
  border: 1px solid rgba(81,186,232,.42);
  border-radius: 999px;
  background: rgba(81,186,232,.14);
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}
.name-with-me,
.identity-chip strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.subnav { display: flex; gap: 2px; margin: -8px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.subnav a { flex: none; padding: 11px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 700; text-decoration: none; }
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { border-color: var(--accent); color: var(--accent-strong); }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; align-items: start; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 20px; align-items: start; }
.settings-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 14px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-muted) 68%, var(--surface));
}
.settings-tabs button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.settings-tabs button:hover { color: var(--ink); background: var(--surface-muted); }
.settings-tabs button.is-active {
  background: var(--accent);
  color: #fff;
}
.settings-full-panel { margin-top: 20px; }
.panel-header-wrap { gap: 14px; flex-wrap: wrap; }
.panel-header-wrap > div { min-width: min(100%, 360px); }
.panel-header-wrap p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-access-toolbar { border-top: 0; }
.settings-primary-panel table { min-width: 1120px; }
.settings-primary-panel td { vertical-align: middle; }
.settings-primary-panel th:last-child { width: 150px; }
.settings-primary-panel .row-actions { flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.settings-primary-panel td:nth-child(4) { min-width: 360px; }
.environment-equipment-results th:last-child { width: 250px; text-align: right; }
.environment-equipment-results td:last-child { text-align: right; }
.environment-equipment-results .row-actions { justify-content: flex-end; flex-wrap: nowrap; align-items: center; }
.equipment-location-breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; max-width: 520px; line-height: 1.5; }
.equipment-location-breadcrumb a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.equipment-location-breadcrumb a:hover { color: var(--accent-strong); text-decoration: underline; }
.equipment-location-separator { color: var(--muted); }
.client-status-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.client-status-tabs button span { margin-left: 6px; }
.client-news-placeholder > p { margin: 0; padding: 20px 16px; color: var(--muted); }
.client-workspace .context-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.client-workspace .workspace-content > .workspace-section + .workspace-section { margin-top: 20px; }
.client-structure-settings { margin-top: 20px; }
.client-structure-settings > summary { padding: 12px 0; color: var(--muted); cursor: pointer; }
.portal-map-link { color: var(--accent-strong); font-size: 12px; font-weight: 750; text-decoration: none; overflow-wrap: anywhere; }
.portal-map-link:hover { text-decoration: underline; }
.portal-user-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.access-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 34px;
  gap: 8px;
  padding: 5px 6px 5px 9px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, var(--accent));
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-muted) 78%, var(--accent-soft));
}
.access-chip.is-muted { opacity: .68; }
.access-chip span { min-width: 0; }
.access-chip strong,
.access-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-chip strong { max-width: 150px; font-size: 12px; }
.access-chip small { max-width: 180px; color: var(--muted); font-size: 10px; }
.access-chip em { flex: none; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 750; text-transform: uppercase; }
.access-chip .status-badge { flex: none; }
.access-chip .quiet-button { min-height: 24px; padding: 0 7px; font-size: 10px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }
.catalog-tab-grid { margin-top: 0; }
.catalog-categories { grid-column: 1 / -1; }
.catalog-filter-strip {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.catalog-filter-strip .is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.catalog-model-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.catalog-toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(160px, 1fr) minmax(190px, 1fr) auto; }
.catalog-toolbar label { min-width: 0; }
.catalog-toolbar input, .catalog-toolbar select { width: 100%; min-width: 0; }
.catalog-toolbar button:disabled { opacity: .45; cursor: default; }
.catalog-reference-panel { min-width: 0; overflow: hidden; }
.catalog-reference-panel > summary { padding: 18px; cursor: pointer; font-size: 14px; font-weight: 750; }
.catalog-reference-panel > summary span { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.catalog-reference-panel[open] > summary { border-bottom: 1px solid var(--line); }
.catalog-reference-panel > .table-wrap { max-height: 360px; overflow: auto; }
.catalog-reference-panel .panel-header p { margin: 0; }
.catalog-page-size { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.catalog-page-size select { width: 70px; min-height: 32px; padding: 5px 8px; }
@media (max-width: 1100px) {
  .catalog-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar .search-field { grid-column: 1 / -1; }
  .catalog-toolbar > button { justify-self: start; }
  .catalog-pager, .catalog-pager > div { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr); }
  .catalog-model-panel .catalog-pager { align-items: flex-start; }
  .catalog-pager > div { gap: 8px; }
  .catalog-page-size { flex-basis: 100%; }
}
.catalog-model-table-shell {
  /* Page content scrolls inside a stable frame; the pager never follows row height. */
  flex: none;
  height: clamp(560px, 70vh, 1002px);
  min-height: 0;
  border-bottom: 1px solid var(--line);
  overflow: auto;
  scrollbar-gutter: stable;
}
.catalog-model-table-shell > .table-wrap {
  overflow: visible;
}
.catalog-model-table-shell table {
  table-layout: fixed;
  min-width: 1120px;
}
.catalog-model-table-shell th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.catalog-model-table-shell th:nth-child(1) { width: 16%; }
.catalog-model-table-shell th:nth-child(2) { width: 30%; }
.catalog-model-table-shell th:nth-child(3) { width: 16%; }
.catalog-model-table-shell th:nth-child(4) { width: calc(38% - 280px); }
.catalog-model-table-shell th:last-child { width: 280px; }
.catalog-model-table-shell td { overflow-wrap: anywhere; }
.catalog-model-table-shell .row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.catalog-kit-badge { color: var(--accent-strong); margin-top: 5px; }
.catalog-kit-pending { color: var(--warning); }
.catalog-kit-pending-notice { margin: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.catalog-kit-pending-notice > span { flex: 1 1 320px; }
.catalog-kit-pending-notice > button { flex: none; }
.catalog-kit-load-error { margin: 16px; }
.catalog-kit-editor > p:first-child { margin-top: 0; }
.catalog-kit-components { min-width: 630px; table-layout: fixed; }
.catalog-kit-components th:first-child { width: 38%; }
.catalog-kit-components th:nth-child(2) { width: 100px; }
.catalog-kit-components th:last-child { width: 120px; }
.catalog-kit-components input { width: 100%; min-width: 0; }
.catalog-kit-components td { vertical-align: top; }
.catalog-kit-add { border-top: 1px solid var(--line); padding-top: 16px; }
.catalog-kit-add label { display: grid; gap: 7px; min-width: 0; }
.catalog-kit-add input, .catalog-kit-add select { width: 100%; min-width: 0; }
.catalog-kit-add [data-kit-picker-area] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 12px; }
.catalog-kit-add [data-kit-picker-area] button { min-height: 38px; }
.catalog-kit-disable { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.catalog-kit-disable small { color: var(--muted); }
.catalog-usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.catalog-usage-summary > div { display: grid; align-content: start; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.catalog-usage-summary span { color: var(--muted); font-size: 11px; }
.catalog-usage-summary strong { font-size: 17px; }
.catalog-usage section { margin-top: 24px; }
.catalog-usage-projects { min-width: 590px; }
.catalog-usage-projects > thead > tr > th:first-child { width: 47%; }
.catalog-usage-projects > tbody > tr > td { vertical-align: top; }
.catalog-usage-project-locations { margin-top: 12px; }
.catalog-usage-project-locations > summary { color: var(--accent-strong); cursor: pointer; font-size: 11px; }
.catalog-usage-project-locations table { margin-top: 8px; font-size: 11px; }
.catalog-usage-project-locations th, .catalog-usage-project-locations td { padding: 8px; }
@media (max-width: 600px) {
  .catalog-usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.catalog-pager {
  display: flex;
  gap: 14px;
  min-height: 54px;
  padding: 10px 16px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}
.catalog-pager > div {
  display: flex;
  gap: 8px;
  align-items: center;
}
.catalog-pager strong {
  min-width: 15ch;
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.catalog-pager button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.catalog-select-row.is-selected td {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-muted));
  box-shadow: inset 3px 0 0 var(--accent);
}
.catalog-select-button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.catalog-select-button strong,
.catalog-select-button small { display: block; }
.catalog-select-button small { color: var(--muted); font-size: 10px; }
.catalog-select-button:hover strong { color: var(--accent-strong); }
.detail-list { margin: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr); gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.timeline { margin: 0; padding: 8px 20px 18px 42px; list-style: none; }
.timeline li { position: relative; min-height: 72px; padding: 14px 0 14px 16px; border-left: 1px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; }
.timeline-dot { position: absolute; top: 20px; left: -5px; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.timeline strong, .timeline p, .timeline small { display: block; }
.timeline p { margin: 5px 0; color: var(--muted); line-height: 1.45; }
.timeline small { color: var(--subtle); }

.location-tree { display: grid; gap: 12px; }
.location-tree details { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }
.location-tree details details { margin: 12px 14px; box-shadow: none; }
.location-tree summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding: 12px 16px; cursor: pointer; }
.location-tree summary:hover { background: var(--surface-muted); }
.location-tree summary span:first-child { min-width: 0; }
.location-tree summary strong, .location-tree summary small { display: block; }
.location-tree summary small, .location-tree summary > span:last-child { margin-top: 3px; color: var(--muted); font-size: 11px; }
.tree-branch { padding: 0 0 4px; border-top: 1px solid var(--line); }
.floor-group { padding: 4px 14px 12px; }
.floor-group h3 { margin: 10px 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.room-links { display: grid; gap: 6px; padding: 8px 14px 14px; }
.floor-group .room-links { padding: 0; }
.room-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); text-decoration: none; }
.room-links a:hover { border-color: var(--accent); background: var(--accent-soft); }
.room-links strong, .room-links small { display: block; }
.room-links small, .room-links a > span:last-child { margin-top: 3px; color: var(--muted); font-size: 11px; }
.room-groups { display: grid; gap: 20px; }

.rma-status-rail { display: grid; grid-template-columns: 1.4fr 1fr 1fr; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }
.rma-status-rail > div { padding: 16px 18px; border-right: 1px solid var(--line); }
.rma-status-rail > div:last-child { border-right: 0; }
.rma-status-rail span, .rma-status-rail strong { display: block; }
.rma-status-rail > div > span { margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.equipment-relations { padding: 8px 18px 18px; }
.equipment-relations h3 { margin: 14px 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.equipment-relations > a { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.equipment-relations > a > span:not(.status-badge) { color: var(--muted); font-size: 12px; }
.equipment-relations .status-badge { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.note-list { margin: 0; padding: 0; list-style: none; }
.note-list li { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.note-list li:last-child { border-bottom: 0; }
.note-list li > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-list p { margin: 8px 0; color: var(--ink); line-height: 1.55; white-space: pre-wrap; }
.note-list small { color: var(--muted); }

dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 28px 80px rgba(8, 18, 29, .28); overflow: hidden; }
dialog.dialog-wide { width: min(900px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(7, 14, 22, .58); backdrop-filter: blur(2px); }
.dialog-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 42px); }
.dialog-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px 17px; border-bottom: 1px solid var(--line); }
.dialog-shell h2 { margin: 4px 0 0; font-size: 21px; }
.dialog-shell header p { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
.dialog-close { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 22px; cursor: pointer; }
.dialog-body { overflow-y: auto; padding: 20px 22px; }
.dialog-shell > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid-single { grid-template-columns: 1fr; }
.form-span { grid-column: 1 / -1; }
.form-field { display: grid; gap: 7px; align-content: start; }
.form-field > span { color: var(--ink); font-size: 12px; font-weight: 750; }
.form-field small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.readonly-output { display: flex; align-items: center; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); color: var(--muted); }
.checkbox-field { display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; }
.checkbox-field input { width: 18px; min-height: 18px; margin: 1px 0 0; }
.checkbox-field strong, .checkbox-field small { display: block; }
.checkbox-field small { margin-top: 3px; color: var(--muted); }
.import-preview { margin-top: 18px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.import-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--surface-muted); border-bottom: 1px solid var(--line); }
.import-preview-toolbar strong, .import-preview-toolbar span { display: block; }
.import-preview-toolbar span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.import-quick-filters { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.import-quick-filters .search-field { flex: 1 1 520px; }
.import-quick-filters .secondary-button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.import-room-map-preview { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.import-room-map-preview strong, .import-room-map-preview span { display: block; }
.import-room-map-preview > div > span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.import-room-map-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 1px 2px 2px; }
.import-room-map-card { display: grid; gap: 6px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px; }
.import-room-map-card > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.import-room-map-card strong { min-width: 0; color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-room-map-card em { flex: 0 0 auto; color: var(--accent-strong); font-style: normal; font-weight: 800; }
.import-room-map-card small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-room-map-card select { min-height: 34px; width: 100%; padding: 5px 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; }
.import-preview-table { max-height: min(620px, 62vh); border: 0; border-radius: 0; }
.import-preview-table td:first-child, .import-preview-table th:first-child { width: 44px; text-align: center; }
.import-preview-table input[type="checkbox"] { width: 17px; height: 17px; }
.import-preview-table thead th { position: sticky; top: 0; z-index: 1; }
.import-preview-table td { vertical-align: top; }
.import-device-fields, .import-room-fields, .import-network-fields { display: grid; gap: 6px; min-width: 190px; }
.import-device-fields { min-width: 240px; }
.import-network-fields { min-width: 220px; }
.import-preview-table input:not([type="checkbox"]) { width: 100%; min-height: 30px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 12px; }
.import-field-ok, .import-field-warning, .import-parser-reason, .import-needs-detail { display: block; margin-top: 1px; font-size: 10px; line-height: 1.35; }
.import-field-ok { color: var(--success); }
.import-field-warning, .import-needs-detail { color: var(--warning); }
.import-parser-reason { color: var(--muted); }
.project-import-workspace { display: grid; gap: 18px; }
.import-filter-head { position: sticky; overflow: visible; }
.import-filter-toggle { display: inline-flex; align-items: center; gap: 5px; width: 100%; min-height: 26px; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.import-filter-toggle:hover, .import-filter-toggle.is-filtered { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.12); }
.import-filter-menu { position: absolute; top: calc(100% - 1px); left: 4px; z-index: 8; width: min(360px, 82vw); padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: 0 18px 42px rgba(8, 18, 29, .26); color: var(--ink); text-align: left; }
.import-filter-menu.is-expanded { position: fixed; inset: 80px 24px 24px calc(var(--sidebar-width) + 24px); z-index: 90; width: auto; max-width: calc(100vw - var(--sidebar-width) - 48px); max-height: calc(100vh - 104px); padding: 14px; overflow: hidden; }
.import-filter-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.import-filter-menu-header strong { color: var(--ink); font-size: 13px; }
.import-filter-menu-header button { border: 0; background: transparent; color: var(--accent-strong); font-size: 12px; font-weight: 800; cursor: pointer; }
.import-filter-menu input[type="search"] { min-height: 32px; width: 100%; padding: 6px 8px; font-size: 12px; }
.import-filter-actions { display: flex; gap: 8px; margin: 8px 0; }
.import-filter-actions button { border: 0; background: transparent; color: var(--accent-strong); font-size: 12px; font-weight: 750; cursor: pointer; }
.import-filter-values { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); }
.import-filter-menu.is-expanded .import-filter-values { display: block; column-width: 220px; column-gap: 14px; max-height: calc(100vh - 235px); overflow: auto; }
.import-filter-values label { display: flex; min-width: 0; align-items: center; gap: 7px; min-height: 24px; font-size: 12px; font-weight: 650; color: var(--ink); }
.import-filter-menu.is-expanded .import-filter-values label { break-inside: avoid; margin-bottom: 4px; }
.import-filter-values label input { flex: 0 0 auto; }
.import-filter-values label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-notice, .form-warning { margin-top: 16px; padding: 12px 14px; border-radius: 7px; line-height: 1.45; }
.form-notice { background: var(--accent-soft); color: var(--accent-strong); }
.form-warning { border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--line)); background: var(--warning-soft); color: var(--warning); }
.form-section + .form-grid { margin-top: 20px; }
.fit-button { width: fit-content; }
.mini-chip { display: inline-flex; align-items: center; min-height: 22px; margin: 2px 5px 2px 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); color: var(--ink); font-size: 11px; font-weight: 750; }
.floor-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; min-height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.floor-choice { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 750; cursor: pointer; }
.floor-choice:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: var(--accent-soft); color: var(--accent-strong); }
.floor-choice input { width: 16px; min-height: 16px; margin: 0; }
.placement-rooms { display: grid; gap: 8px; }
.placement-room-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) auto 36px; gap: 8px; align-items: center; }
.placement-room-row select:empty { display: none; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--ink); font-size: 12px; font-weight: 750; white-space: nowrap; }
.checkbox-inline input { width: 16px; min-height: 16px; margin: 0; }
.rma-mode-shell { display: grid; gap: 16px; }
.segmented-control { display: inline-flex; width: fit-content; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.segmented-control label { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 5px; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control label:has(input:checked) { background: var(--accent); color: #fff; }
.segmented-control label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.section-heading h3 { margin: 0; font-size: 15px; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.equipment-select-list { display: grid; gap: 10px; }
.equipment-select-row { grid-template-columns: 1fr auto; }
.equipment-select-row > span { grid-column: 1 / -1; }
.unlinked-equipment { display: grid; gap: 5px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); }
.unlinked-equipment span { color: var(--muted); font-size: 12px; }
.current-assignment { padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.current-assignment span, .current-assignment strong { display: block; }
.current-assignment span { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.drop-confirmation-list { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); }
.drop-confirmation-list > div { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.drop-confirmation-list > div:last-child { border-bottom: 0; }
.drop-confirmation-list dt { color: var(--muted); font-size: 11px; }
.drop-confirmation-list dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.45; }
.confirmation-assignment { padding: 12px; border: 1px solid var(--line); border-radius: 4px; }
.confirmation-assignment span, .confirmation-assignment strong { display: block; }
.confirmation-assignment span { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.resolution-list { display: grid; gap: 14px; }
.resolution-item { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); }
.custom-resolution-assets { display: grid; gap: 12px; }
.custom-resolution-asset { padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.custom-resolution-asset .section-heading { margin-bottom: 10px; }
.custom-resolution-asset h4 { margin: 0; font-size: 13px; }

.toast-info { border-left: 4px solid var(--accent); }
.toast-success { border-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--danger); }

@media (max-width: 1080px) {
  .settings-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-categories { grid-column: auto; }
}

@media (max-width: 780px) {
  .detail-grid { grid-template-columns: 1fr; }
  .rma-status-rail { grid-template-columns: 1fr; }
  .rma-status-rail > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .rma-status-rail > div:last-child { border-bottom: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-span { grid-column: auto; }
  .placement-room-row { grid-template-columns: 1fr; }
  .structure-floor-row { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; }
  .compact-field { flex: 1 1 140px; }
  .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 520px) {
  dialog.app-dialog:not(.dialog-environment-actions) {
    position: fixed;
    top: var(--dialog-viewport-top, 0px);
    left: var(--dialog-viewport-left, 0px);
    right: auto;
    bottom: auto;
    margin: 0;
    width: var(--dialog-viewport-width, 100vw);
    max-width: none;
    height: var(--dialog-viewport-height, 100dvh);
    max-height: var(--dialog-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }
  .app-dialog:not(.dialog-environment-actions) .dialog-shell { height: 100%; max-height: 100%; min-height: 0; }
  .dialog-shell > header, .dialog-body, .dialog-shell > footer { padding-left: 16px; padding-right: 16px; }
  .dialog-shell > header { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
  .dialog-body { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .dialog-body input:not([type="checkbox"]):not([type="radio"]), .dialog-body select, .dialog-body textarea { font-size: 16px; }
  .dialog-shell > footer { padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .dialog-shell > footer button { flex: 1; min-height: 44px; }
  .dialog-close { flex: none; width: 44px; height: 44px; }
  .page-header .header-actions { width: 100%; }
  .page-header .header-actions > * { flex: 1; }
  th, td { padding-left: 12px; padding-right: 12px; }
}

/* XiO-inspired shared application shell */
:root {
  --topbar-height: 54px;
  --rail-width: 56px;
  --explorer-width: 304px;
  --chrome: #07151a;
  --rail: #101d23;
  --explorer: #18262d;
  --explorer-line: #2a3a42;
  --explorer-text: #d8e1e5;
  --explorer-muted: #91a3ac;
}

html, body { background: var(--surface); }
.app-shell { min-height: 100vh; background: var(--surface); }
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  min-height: var(--topbar-height);
  height: var(--topbar-height);
  padding: 0 16px;
  background: var(--chrome);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #eef5f6;
  backdrop-filter: none;
}
/* Treat ONE as the product name instead of trying to imitate lettering baked
   into the Immedia artwork. The divider makes that distinction intentional,
   and the same lockup can scale without font-to-image baseline calculations. */
.brand { --brand-logo-width: 132px; display: grid; grid-template-columns: auto auto auto; align-content: center; align-items: center; min-height: 0; height: 100%; padding: 0; border: 0; column-gap: 7px; row-gap: 1px; }
.brand img { width: var(--brand-logo-width); max-height: 34px; }
.brand .brand-dev-badge {
  flex-shrink: 0;
  margin: 0 0 0 4px;
  padding: 2px 4px;
  border: 2px solid #eef5f6;
  border-radius: 4px;
  color: #eef5f6;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .04em;
}
.brand .brand-dev-badge[hidden] { display: none; }
.brand .brand-name { display: inline-flex; min-height: calc(var(--brand-logo-width) * .16); padding-left: 8px; align-items: center; border-left: 1px solid rgba(238,245,246,.32); color: #eef5f6; font-size: calc(var(--brand-logo-width) * .135); font-weight: 800; line-height: 1; letter-spacing: .12em; white-space: nowrap; }
.brand .brand-tagline { grid-column: 1 / -1; margin: 0; padding-left: calc(var(--brand-logo-width) * .318); color: #9fb0b7; font-size: 10px; line-height: 1.2; letter-spacing: .025em; white-space: nowrap; }
.topbar-actions { height: 100%; gap: 14px; }
.connection { color: #9fb0b7; }
.connection > span { width: 7px; height: 7px; background: #a16a1d; }
.connection.is-live > span { background: #49b584; box-shadow: 0 0 0 3px rgba(73,181,132,.12); }
.topbar-button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  color: #dce5e8;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.topbar-button:hover { background: rgba(255,255,255,.09); }
.theme-toggle { display: inline-flex; min-width: 82px; align-items: center; justify-content: center; gap: 7px; }
.theme-toggle span:first-child { width: 15px; margin: 0; font-size: 15px; line-height: 1; }
.identity-menu-shell { position: relative; display: flex; align-items: center; }
.identity-chip {
  display: flex;
  gap: 8px;
  padding: 0 4px 0 2px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.identity-chip:hover .identity-avatar { background: rgba(7,137,202,.26); }
.identity-chip > span:last-child { display: grid; gap: 1px; }
.identity-chip strong { color: #f3f7f8; font-size: 12px; line-height: 1.2; }
.identity-chip small { color: #91a3ac; font-size: 10px; }
.identity-avatar { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(81,186,232,.38); border-radius: 50%; background: rgba(7,137,202,.16); color: #6dc8ee; font-size: 11px; font-weight: 800; }
.identity-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(360px, calc(100vw - 24px));
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 18px 36px rgba(0,0,0,.36);
  overflow: hidden;
}
/* The chip is the user's own name, so the menu leads with the account before
   offering the client portals, which otherwise read as an unexplained lookup. */
.identity-menu-account {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.identity-menu-account > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.identity-menu-account strong { color: var(--ink); font-size: 13px; }
.identity-menu-account small { color: var(--muted); font-size: 11px; }
.identity-menu-search {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.identity-menu-search span {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.identity-menu-search input {
  min-height: 34px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-muted);
  color: var(--ink);
}
.identity-menu-list {
  display: grid;
  max-height: min(420px, 58vh);
  overflow: auto;
}
.identity-menu-list a {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.identity-menu-list a:hover { background: var(--surface-muted); }
.identity-menu-list a:last-child { border-bottom: 0; }
.identity-menu-list strong { font-size: 12px; }
.identity-menu-list small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.identity-menu-list .muted-copy { padding: 14px 12px; }

.app-body {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
  padding-top: var(--topbar-height);
  transition: grid-template-columns .18s ease;
}
body.environment-active .app-body { grid-template-columns: var(--rail-width) var(--explorer-width) minmax(0, 1fr); }
body.nav-open { --rail-width: 224px; }
.navigation-rail {
  position: sticky;
  top: var(--topbar-height);
  z-index: 45;
  display: flex;
  width: var(--rail-width);
  height: calc(100vh - var(--topbar-height));
  flex-direction: column;
  background: var(--rail);
  border-right: 1px solid rgba(255,255,255,.06);
  color: #c5d0d4;
  transition: width .18s ease, transform .18s ease;
}
.rail-menu-button {
  display: grid;
  width: 100%;
  height: 48px;
  place-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: #94a6ae;
  cursor: pointer;
}
.rail-menu-button:hover { color: #fff; background: rgba(255,255,255,.04); }
.primary-nav { display: flex; gap: 4px; padding: 9px 6px; flex-direction: column; }
.nav-item {
  position: relative;
  display: flex;
  width: 44px;
  min-height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8fa1a9;
  text-decoration: none;
  cursor: pointer;
}
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #e9f0f2; }
.nav-item.is-active { background: rgba(7,137,202,.2); color: #70cff5; box-shadow: inset 3px 0 0 #20a8e7; }
.nav-item.is-disabled { color: #53646c; cursor: not-allowed; }
.nav-item.is-disabled:hover { background: transparent; color: #53646c; }
.rail-label { display: none; }
.service-submenu[hidden] { display: none; }
.service-submenu { display: grid; gap: 2px; margin-top: 3px; }
.service-chevron { margin-left: auto; transition: transform .15s ease; }
[data-service-toggle][aria-expanded="true"] .service-chevron { transform: rotate(90deg); }
body.nav-open .service-submenu { margin-left: 22px; padding-left: 5px; border-left: 1px solid rgba(255,255,255,.12); }
body.nav-open .service-submenu .nav-item { min-height: 36px; padding-left: 10px; }
body:not(.nav-open) .service-submenu { display: none; }
.rail-separator { height: 1px; margin: 7px 5px; background: rgba(255,255,255,.07); }
.rail-footer { display: grid; width: 100%; min-height: 45px; margin-top: auto; place-items: center; border-top: 1px solid rgba(255,255,255,.07); }
.rail-status { width: 8px; height: 8px; border-radius: 50%; background: #49b584; box-shadow: 0 0 0 3px rgba(73,181,132,.1); }
body.nav-open .rail-menu-button { display: flex; padding: 0 17px; justify-content: flex-start; gap: 14px; color: #dce5e8; }
body.nav-open .primary-nav { padding: 10px; }
body.nav-open .nav-item { width: 100%; padding: 0 13px; justify-content: flex-start; gap: 13px; }
body.nav-open .rail-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
body.nav-open .rail-label small { color: #61737b; font-size: 9px; }
body.nav-open .rail-footer { display: flex; padding: 0 18px; justify-content: flex-start; gap: 12px; }

.environment-explorer {
  position: sticky;
  top: var(--topbar-height);
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--explorer-width);
  height: calc(100vh - var(--topbar-height));
  background: var(--explorer);
  border-right: 1px solid #26363d;
  color: var(--explorer-text);
  overflow: hidden;
}
.environment-explorer[hidden] { display: none !important; }
.environment-explorer > :not(.explorer-content) { flex-shrink: 0; }
.explorer-loading { display: grid; min-height: 100%; place-items: center; align-content: center; gap: 10px; color: var(--explorer-muted); font-size: 12px; }
.explorer-loading .spinner { border-color: #3b4d55; border-top-color: #42b8ec; }
.explorer-header { display: flex; min-height: 59px; padding: 11px 13px 9px 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--explorer-line); }
.explorer-header > div { display: grid; gap: 2px; }
.explorer-header span { color: var(--explorer-muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.explorer-header strong { color: #f0f5f6; font-size: 15px; }
.explorer-close { display: none; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--explorer-muted); font-size: 22px; cursor: pointer; }
.explorer-search { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--explorer-line); }
.explorer-search > svg { position: absolute; top: 19px; left: 22px; width: 15px; height: 15px; color: #80939c; pointer-events: none; }
.explorer-search input { min-height: 34px; padding: 7px 30px 7px 32px; border: 1px solid #3a4a51; border-radius: 3px; background: #111d23; color: #edf3f5; font-size: 12px; }
.explorer-search input::placeholder { color: #73858e; }
.explorer-search input:focus { border-color: #168ed0; box-shadow: 0 0 0 2px rgba(22,142,208,.17); }
.explorer-search > button { position: absolute; top: 16px; right: 17px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #8ea0a8; cursor: pointer; }
.explorer-content { flex: 1; min-height: 0; overflow: auto; scrollbar-color: #485960 transparent; scrollbar-width: thin; }
.explorer-content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.environment-tree { padding: 8px 0 14px; }
.environment-tree-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 20px; min-height: 31px; padding-left: calc(6px + var(--tree-level) * 14px); align-items: center; border-left: 2px solid transparent; }
.environment-tree-row[data-href] { cursor: pointer; }
.environment-tree-row:hover { background: rgba(255,255,255,.035); }
.environment-tree-row.is-selected { border-left-color: #2aafe9; background: rgba(7,137,202,.2); }
.environment-tree-row.is-folder { grid-template-columns: 20px minmax(0, 1fr) auto; margin-top: 8px; border-top: 1px solid rgba(125, 165, 186, .14); background: rgba(255,255,255,.018); }
.environment-tree-row.is-folder .tree-node-link { grid-template-columns: 17px minmax(0, 1fr) auto; }
.environment-tree-row.is-folder .tree-node-icon { color: #58c1ec; }
.environment-tree-row.is-folder .tree-node-copy { overflow: hidden; }
.environment-tree-row.is-folder .tree-node-copy strong { color: #d5eef8; }
.environment-tree-row.is-folder .tree-node-copy small { min-width: 0; overflow: hidden; color: #7f96a1; text-overflow: ellipsis; white-space: nowrap; }
.environment-tree-row.is-folder .tree-count { justify-self: end; }
.tree-toggle, .tree-toggle-placeholder { display: grid; width: 20px; height: 28px; padding: 0; place-items: center; }
.tree-toggle { border: 0; background: transparent; color: #80939c; font-size: 14px; cursor: pointer; }
.tree-toggle:hover { color: #dce6e9; }
.environment-tree-row > a, .tree-node-link { display: grid; min-width: 0; min-height: 31px; grid-template-columns: 17px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding-right: 8px; color: var(--explorer-text); text-decoration: none; }
.tree-node-link { width: 100%; padding-block: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.environment-tree-row.is-pending { background: rgba(34, 174, 232, .07); }
.environment-tree-row.is-pending .tree-node-icon { color: #7dd8f8; }
.tree-node-icon { width: 15px; height: 15px; color: #8da3ac; }
.is-selected .tree-node-icon { color: #5fc6ef; }
.tree-node-copy { display: flex; min-width: 0; gap: 5px; align-items: baseline; }
.tree-node-copy strong { overflow: hidden; font-size: 12px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.tree-node-copy small { flex: none; color: #71858e; font-size: 9px; }
.pending-node-chip { padding: 1px 5px; border: 1px solid rgba(78, 190, 238, .45); border-radius: 999px; color: #86d7f5 !important; text-transform: uppercase; }
.tree-count { min-width: 20px; padding: 1px 5px; border-radius: 8px; background: rgba(255,255,255,.06); color: #9db0b8; font-size: 9px; text-align: center; }
.is-selected .tree-count { background: rgba(36,175,233,.18); color: #8bd8f7; }
.tree-node-actions { display: inline-flex; width: auto; min-width: 22px; gap: 3px; justify-content: flex-end; visibility: hidden; opacity: 0; pointer-events: none; }
.environment-tree-row:hover .tree-node-actions, .environment-tree-row:focus-within .tree-node-actions { visibility: visible; opacity: 1; pointer-events: auto; }
.tree-node-actions button { display: grid; width: 22px; height: 22px; padding: 0; place-items: center; border: 1px solid #3c525c; border-radius: 4px; background: #14242b; color: #b8c8ce; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; }
.tree-node-actions button:hover, .tree-node-actions button:focus-visible { border-color: #2aafe9; background: #173341; color: #f2fbff; }
.tree-node-actions-wrap { display: inline-flex; align-items: center; gap: 2px; }
.tree-mobile-actions { display: none; }
.environment-node-menu { display: grid; gap: 8px; }
.environment-node-menu button { min-height: 44px; text-align: left; }
.dialog-environment-actions { width: min(420px, calc(100vw - 24px)); height: fit-content; max-height: calc(100dvh - 40px); border: 1px solid var(--line); border-radius: 10px; }
.dialog-environment-actions .dialog-shell { min-height: 0; max-height: calc(100dvh - 40px); }
.dialog-environment-actions h2 { overflow-wrap: anywhere; }
.dialog-environment-actions .dialog-close { flex: none; width: 44px; height: 44px; }
.tree-add-toggle.is-persistent { display: grid; width: 22px; height: 22px; padding: 0; place-items: center; border: 1px solid rgba(78,190,238,.5); border-radius: 4px; background: rgba(34,174,232,.1); color: #7dd8f8; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; }
.tree-add-toggle.is-persistent:hover, .tree-add-toggle.is-persistent:focus-visible { border-color: #2aafe9; background: #173341; color: #f2fbff; }
.tree-add-menu { position: absolute; top: 100%; right: 8px; z-index: 30; display: flex; min-width: 168px; flex-direction: column; gap: 1px; padding: 4px; border: 1px solid #3c525c; border-radius: 7px; background: #14242b; box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.tree-add-menu button { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: #d8e4e8; font-size: 12.5px; text-align: left; cursor: pointer; }
.tree-add-menu button svg { width: 14px; height: 14px; flex: none; color: #7dd8f8; }
.tree-add-menu button:hover, .tree-add-menu button:focus-visible { background: #173341; color: #f2fbff; }
.tree-drag-handle, .equipment-drag-handle { display: grid; place-items: center; color: #81949d; cursor: grab; user-select: none; }
.tree-drag-handle { width: 20px; height: 28px; opacity: 0; font-size: 14px; }
.environment-tree-row:hover .tree-drag-handle, .tree-drag-handle:focus-visible, body.environment-dragging .tree-drag-handle { opacity: 1; }
.tree-drag-handle:active, .equipment-drag-handle:active { cursor: grabbing; }
.environment-tree-row.is-dragging-source, tr.is-dragging-source { opacity: .42; }
.environment-tree-row.is-drop-valid { background: rgba(12,157,220,.22); box-shadow: inset 0 0 0 1px #2ab7ee; }
.environment-tree-row.is-drop-invalid { cursor: not-allowed; background: rgba(145,72,72,.08); }
.environment-tree-row.is-drop-valid::after, .environment-tree-row.is-drop-invalid::after { position: absolute; right: 5px; bottom: -17px; z-index: 5; padding: 2px 5px; border-radius: 2px; background: #087fba; color: #fff; content: attr(data-drop-intent); font-size: 8px; pointer-events: none; }
.environment-tree-row.is-drop-invalid::after { background: #5e676c; }
.environment-tree-row.drop-before { box-shadow: inset 0 2px 0 #42c3f4; }
.environment-tree-row.drop-after { box-shadow: inset 0 -2px 0 #42c3f4; }
.drag-cell { width: 34px; padding-left: 10px !important; padding-right: 4px !important; }
.equipment-drag-handle { width: 22px; height: 28px; opacity: .25; font-size: 15px; }
tr:hover .equipment-drag-handle, .equipment-drag-handle:focus-visible { opacity: 1; color: #318db7; }
.drag-blocked { color: #a7b0b7; font-size: 13px; cursor: not-allowed; }
.environment-drag-ghost { position: fixed; top: -1000px; left: -1000px; z-index: 100; min-width: 190px; padding: 8px 10px; border: 1px solid #168ed0; border-radius: 3px; background: #0e1c22; color: #f3f7f8; box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.environment-drag-ghost strong, .environment-drag-ghost span { display: block; }
.environment-drag-ghost strong { font-size: 11px; }
.environment-drag-ghost span { margin-top: 2px; color: #9fb1b9; font-size: 9px; }
.explorer-footer { display: flex; min-height: 34px; padding: 0 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--explorer-line); color: #768a93; font-size: 10px; }
.explorer-search-results { padding: 6px 0; }
.explorer-search-results > a { display: grid; min-height: 49px; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; padding: 7px 12px; align-items: center; color: var(--explorer-text); text-decoration: none; }
.explorer-search-results > a:hover { background: rgba(7,137,202,.16); }
.search-result-icon { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #3a4b52; border-radius: 3px; color: #79cbee; font-size: 9px; font-style: normal; }
.search-result-icon svg { width: 14px; height: 14px; }
.explorer-search-results strong, .explorer-search-results small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-search-results strong { font-size: 11px; }
.explorer-search-results small { margin-top: 3px; color: #82959e; font-size: 9px; }
.explorer-search-results em { color: #71858e; font-size: 9px; font-style: normal; text-transform: uppercase; }
.explorer-search-state { display: flex; min-height: 120px; padding: 20px; align-items: center; justify-content: center; gap: 9px; color: #82959e; font-size: 11px; text-align: center; }
.explorer-search-state .spinner { width: 16px; height: 16px; border-color: #3b4d55; border-top-color: #42b8ec; }

.structure-draft-banner {
  display: flex;
  min-height: 58px;
  margin-bottom: 18px;
  padding: 12px 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid #1e8fbe;
  border-radius: 5px;
  background: #0b4f6b;
  color: #effbff;
}
.structure-draft-banner strong {
  flex: 1;
  font-size: 13px;
}
.floor-order-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color, #38505d); }
.floor-order-row span { flex: 1; }
.floor-order-row button { min-width: 44px; min-height: 44px; }
.environment-save-error { padding: 12px; border: 1px solid #d56868; border-radius: 5px; color: #ffb5b5; }
.environment-tree-row.has-save-error { outline: 2px solid #d56868; outline-offset: -2px; }
.structure-draft-banner span { flex: 1; font-size: 13px; font-weight: 700; }
.structure-draft-panel { margin-bottom: 18px; }
.inline-structure-form {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-muted);
}
.inline-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.section-toolbar.compact { min-height: 42px; padding-block: 8px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bulk-toggle-row { display: flex; align-items: center; gap: 8px; margin-top: -4px; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.bulk-fields, .list-fields { display: none; }
.numbered-fields { display: grid; }
form:has(#structure-bulk-toggle:checked) .single-fields { display: none; }
form:has(#structure-bulk-toggle:checked) .bulk-fields { display: grid; gap: 14px; }
form:has(#structure-bulk-kind-list:checked) .numbered-fields { display: none; }
form:has(#structure-bulk-kind-list:checked) .list-fields { display: grid; }
.list-fields textarea { min-height: 96px; resize: vertical; }

.app-frame { min-width: 0; min-height: calc(100vh - var(--topbar-height)); padding-left: 0; background: var(--surface); }
/* Shared page contract: existing and future routes fill the available workspace. */
.main-content { width: 100%; max-width: none; min-width: 0; min-height: calc(100vh - var(--topbar-height)); margin: 0; padding: 26px var(--page-gutter) 40px; }
body.dashboard-active .dashboard-grid {
  grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr);
}
body.dashboard-active .summary-strip {
  gap: 12px;
  border: 0;
  background: transparent;
  overflow: visible;
}
body.dashboard-active .summary-item {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--dashboard-tile);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 52%, transparent);
}
body.dashboard-active .summary-item:nth-child(2) {
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--success) 54%, transparent);
}
body.dashboard-active .summary-item:nth-child(3),
body.dashboard-active .summary-item:nth-child(4) {
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--warning) 48%, transparent);
}
body.dashboard-active .summary-item:last-child { border-right: 1px solid var(--line); }
body.dashboard-active .panel {
  background: var(--dashboard-panel);
}
body.dashboard-active .panel-header {
  background: color-mix(in srgb, var(--dashboard-tile) 82%, var(--surface));
}
body.dashboard-active .panel-body {
  background: var(--dashboard-panel);
}
body.dashboard-active .quick-action {
  background: var(--dashboard-tile);
  border-color: color-mix(in srgb, var(--line-strong) 82%, var(--accent));
}
body.dashboard-active .quick-action:hover {
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  border-color: var(--accent);
}
body.dashboard-active .data-list li,
body.dashboard-active .panel-note {
  background: color-mix(in srgb, var(--dashboard-panel) 82%, var(--surface));
}
body.rmas-active .panel {
  background: var(--dashboard-panel);
}
body.rmas-active .panel-header,
body.rmas-active .toolbar,
body.rmas-active .result-count,
body.rmas-active th {
  background: color-mix(in srgb, var(--dashboard-tile) 82%, var(--surface));
}
body.activity-active .panel {
  background: var(--dashboard-panel);
}
body.activity-active .panel-header,
body.activity-active .toolbar,
body.activity-active .result-count {
  background: color-mix(in srgb, var(--dashboard-tile) 82%, var(--surface));
}
.activity-toolbar {
  align-items: end;
}
.activity-toolbar .search-field {
  min-width: min(100%, 520px);
}
.activity-toolbar .compact-field {
  min-width: 180px;
}
.rma-view-tabs {
  display: flex;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--dashboard-tile) 82%, var(--surface));
  overflow-x: auto;
}
.rma-view-tabs button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.rma-view-tabs button:hover {
  color: var(--ink);
  background: var(--surface-muted);
}
.rma-view-tabs button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.rma-view-tabs span {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: inherit;
  font-size: 11px;
  text-align: center;
}
.rma-list-panel table {
  min-width: 1080px;
}
.rma-list-panel td:first-child,
.rma-list-panel td:nth-child(3) {
  min-width: 220px;
}
.rma-list-panel td:nth-child(3) {
  width: 34%;
}
.rma-toolbar .search-field {
  flex-basis: 560px;
}
.rma-toolbar .compact-field {
  flex-basis: 220px;
}
body.environment-active .main-content { width: 100%; max-width: none; margin: 0; padding: 0; }
body.warehouse-active .main-content { width: 100%; max-width: none; margin: 0; padding: 0; }
body.project-detail-active .main-content { width: 100%; max-width: none; margin: 0; padding: 0; }
.mobile-workspace-bar { display: none; }
.mobile-workspace-bar-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mobile-nav-toggle { display: none; }
.nav-scrim { display: none; }
/* The explorer only renders on routes with a client context, so its toggle is
   dead everywhere else. body.environment-active carries the same condition the
   explorer's own hidden state uses. */
.mobile-explorer-toggle { display: none; }
body.environment-active .mobile-explorer-toggle { display: inline-flex; align-items: center; }

.environment-workspace { min-height: calc(100vh - var(--topbar-height)); background: var(--surface); }
.workspace-header { padding: 20px 24px 17px; border-bottom: 1px solid var(--line); background: var(--surface); }
.workspace-breadcrumbs { display: flex; min-height: 20px; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; overflow-x: auto; white-space: nowrap; }
.workspace-breadcrumbs a { color: color-mix(in srgb, var(--ink) 68%, var(--muted)); text-decoration: none; }
.workspace-breadcrumbs a:hover { color: var(--accent-strong); text-decoration: underline; }
.workspace-breadcrumbs span[aria-hidden] { color: #aab3ba; }
.workspace-title-row { display: flex; margin-top: 8px; align-items: flex-start; justify-content: space-between; gap: 20px; }
.workspace-title-copy { min-width: 0; }
.workspace-title-with-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-width: 0; }
.ic-site-summary, .ic-site-summary:visited { display: grid; gap: 4px; min-width: 200px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--ic-summary-color, var(--muted)); border-radius: 7px; background: var(--surface-muted); color: var(--ink); text-decoration: none; }
.ic-site-summary:hover { border-color: var(--accent); }
.ic-summary-label { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ic-site-summary strong { font-size: 18px; line-height: 1.2; }
.ic-summary-detail { color: var(--muted); font-size: 11px; }
.ic-summary-current { --ic-summary-color: #16aa9b; }
.ic-summary-ending { --ic-summary-color: #e8aa54; }
.ic-summary-overdue { --ic-summary-color: #e47575; }
.ic-client-summary { max-width: 360px; }
.ic-summary-future { --ic-summary-color: #a898e8; }
.ic-summary-track { height: 4px; overflow: hidden; border-radius: 3px; background: var(--line); margin-top: 4px; }
.ic-summary-track > span { display: block; height: 100%; background: var(--ic-summary-color); }
.workspace-title-copy h1 { margin: 2px 0 3px; color: var(--ink); font-size: clamp(24px, 2.2vw, 31px); line-height: 1.12; letter-spacing: -.025em; }
.workspace-title-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.workspace-badges { margin-top: 8px; }
.workspace-title-row .header-actions { flex: none; padding-top: 5px; }
.context-metrics { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.context-metrics > div { min-height: 59px; padding: 11px 18px; border-right: 1px solid var(--line); }
.context-metrics > div:last-child { border-right: 0; }
.context-metrics span, .context-metrics strong { display: block; }
.context-metrics span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.context-metrics strong { margin-top: 3px; color: var(--ink); font-size: 19px; letter-spacing: -.02em; }
.context-tabs { display: flex; min-height: 45px; padding: 0 18px; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.context-tabs a { display: flex; min-width: max-content; padding: 0 14px; align-items: center; gap: 7px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; }
.context-tabs a:hover { color: var(--ink); }
.context-tabs a.is-active { border-color: var(--accent); color: var(--accent-strong); }
.context-tabs a span { min-width: 20px; padding: 1px 5px; border-radius: 8px; background: var(--surface-muted); color: var(--muted); font-size: 9px; text-align: center; }
.context-tabs a.is-active span { background: var(--accent-soft); color: var(--accent-strong); }
.workspace-content { padding: 20px 24px 36px; }
[data-role="location-picker"] { display: grid; gap: 12px; }
.environment-workspace .workspace-content > .context-metrics { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.workspace-section { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; }
.section-toolbar { display: flex; min-height: 57px; padding: 10px 15px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.section-toolbar h2 { margin: 1px 0 0; font-size: 15px; }
.result-count-inline { color: var(--muted); font-size: 11px; }
.table-type-icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; color: var(--muted); }
.workspace-section th { height: 36px; padding: 0 12px; font-size: 9px; }
.workspace-section td { padding: 10px 12px; font-size: 12px; }
.workspace-section .empty-state { min-height: 180px; display: grid; place-content: center; }
.record-workspace .workspace-content { background: var(--canvas); }
.record-summary-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.record-summary-bar > div { min-height: 66px; padding: 12px 15px; border-right: 1px solid var(--line); }
.record-summary-bar > div:last-child { border-right: 0; }
.record-summary-bar span, .record-summary-bar strong { display: block; }
.record-summary-bar > div > span { margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.record-summary-bar > div > strong { color: var(--ink); font-size: 12px; }
.record-summary-bar .summary-warning { color: var(--warning); }
.project-detail-summary { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.project-device-needs-details { background: color-mix(in srgb, var(--warning-soft) 52%, var(--surface)); }
.project-device-identity { display: block; color: var(--ink); line-height: 1.45; }
.project-readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.project-readiness-grid a { display: grid; gap: 5px; min-height: 94px; padding: 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); color: var(--muted); text-decoration: none; }
.project-readiness-grid a:hover { border-color: var(--accent); background: var(--accent-soft); }
.project-readiness-grid span { font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.project-readiness-grid strong { color: var(--ink); font-size: 21px; }
.project-readiness-grid small { font-size: 11px; }
.device-detail-callout { display: grid; gap: 4px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); }
.device-detail-callout.needs-attention { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); background: var(--warning-soft); }
.device-detail-callout.is-complete { border-color: color-mix(in srgb, var(--success) 30%, var(--line)); background: var(--success-soft); }
.device-detail-callout span { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.device-detail-callout strong { color: var(--ink); font-size: 13px; }
.device-detail-callout small { color: var(--muted); font-size: 10px; }
.form-section + .form-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.project-environment-tree { margin: 0; padding: 0; list-style: none; }
.project-environment-tree .project-environment-tree { margin-top: 6px; }
.project-environment-tree li { margin: 0; padding: 0 0 6px calc(var(--depth, 0) * 18px); }
.project-environment-node { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-muted); }
.project-environment-node span, .project-environment-node strong, .project-environment-node small { display: block; }
.project-environment-node strong { font-size: 12px; color: var(--ink); }
.project-environment-node small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.contextual-detail-grid { margin-bottom: 0; }
.contextual-panel { width: 100%; min-width: 0; }
.record-workspace .rma-status-rail { margin-bottom: 18px; }
.rma-update-notice {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line));
  border-left: 4px solid var(--warning);
  border-radius: 4px;
  background: color-mix(in srgb, var(--warning-soft) 42%, var(--surface));
}
.rma-update-notice strong { color: var(--warning); }
.rma-update-notice span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.structure-builder {
  display: grid;
  gap: 14px;
}
.structure-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--dashboard-panel) 82%, var(--surface));
}
.structure-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}
.structure-floor-list {
  display: grid;
  gap: 8px;
}
.structure-floor-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px) 36px;
  gap: 8px;
  align-items: center;
}
.structure-preview-card {
  min-height: 170px;
}
.structure-preview,
.structure-preview-children {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.structure-preview-children {
  margin-top: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.structure-preview-row {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
.structure-preview-row span {
  min-width: 68px;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.structure-preview-row strong {
  min-width: 0;
  flex: 1;
}
.structure-preview-row small {
  color: var(--muted);
  font-size: 11px;
}

.project-scope-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.project-scope-legend > span:last-child { margin-left: auto; }
.project-scope-tree, .project-scope-tree ul { list-style: none; margin: 0; padding: 0; }
.project-scope-tree { padding: 16px 20px 24px; }
.project-scope-tree details > ul { margin: 8px 0 8px 18px; padding-left: 16px; border-left: 1px solid var(--line); }
.project-scope-tree summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; margin: 5px 0; border: 1px solid var(--line); background: var(--surface); border-radius: 4px; cursor: pointer; }
.project-scope-tree summary::before { content: "▸"; color: var(--muted); }
.project-scope-tree details[open] > summary::before { content: "▾"; }
.project-scope-tree summary > strong { overflow-wrap: anywhere; }
.project-scope-type { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.project-scope-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.project-scope-room { padding: 10px 16px 16px 30px; }
.project-scope-room > p { white-space: pre-line; font-size: 12px; }
.project-scope-models { display: grid; gap: 4px; padding-top: 12px !important; }
.project-scope-model { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.project-scope-model:hover, .project-scope-tree summary:hover { border-color: var(--accent); }
.project-config-panel { min-width: 0; overflow: visible; }
.project-config-header { flex-direction: column; align-items: flex-start; gap: 10px; }
.project-config-header > .button-row { min-width: 0; justify-content: flex-start; }
.project-chassis-row-control { display: block; margin: 0 0 7px auto; }
.project-room-name-field { min-width: 260px; max-width: 460px; }
.project-room-name-controls { display: flex; align-items: center; gap: 8px; }
.project-room-name-controls input { flex: 1; min-width: 160px; }
.project-room-name-controls button { flex: 0 0 auto; }
.project-room-name-status { display: block; margin-top: 5px; font-size: 11px; color: var(--muted); }
.project-chassis-parent-link { display: block; margin-top: 5px; padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.project-chassis-parent-link:hover { text-decoration: underline; }
.project-chassis-parent-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.project-chassis-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; margin-top: 18px; }
.project-chassis-slots { display: grid; gap: 9px; min-width: 0; }
.project-chassis-slot { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; }
.project-chassis-slot label { flex: 1; min-width: 0; }
.project-chassis-slot select { width: 100%; min-width: 0; }
.project-chassis-slot small, .project-chassis-card-option small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.project-chassis-picker { min-width: 0; }
.project-chassis-picker h3 { margin: 0 0 12px; }
.project-chassis-card-list { max-height: 460px; overflow: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 5px; scrollbar-gutter: stable; }
.project-chassis-card-option { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px; cursor: pointer; }
.project-chassis-card-option + .project-chassis-card-option { border-top: 1px solid var(--line); }
.project-chassis-card-option input[type="checkbox"] { width: auto; flex: 0 0 auto; margin-top: 3px; }
.project-chassis-card-option > span { min-width: 0; }
.project-chassis-card-list > p { margin: 12px; }
@media (max-width: 760px) { .project-chassis-layout { grid-template-columns: minmax(0, 1fr); } .project-chassis-card-list { max-height: 280px; } }
.project-import-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.project-import-selector-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.project-import-selector-button:hover { border-color: var(--accent); color: var(--ink); }
.project-import-selector-button.is-active { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
.project-import-selector-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.project-import-selector-button > span { border-radius: 12px; padding: 2px 7px; background: var(--surface-muted); font-size: 10px; }
.project-import-category { display: grid; gap: 16px; }
.project-import-category[hidden] { display: none; }
.project-import-source-list h3 { margin: 0; font-size: 13px; }
.project-source-files { margin: 0; padding: 0; list-style: none; }
.project-source-files > li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.project-source-files > li + li { border-top: 1px solid var(--line); }
.project-source-file-copy { min-width: 0; }
.project-source-file-copy strong { display: block; overflow-wrap: anywhere; font-size: 13px; }
.project-source-file-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.project-source-files .button-row { flex-shrink: 0; }
@media (max-width: 800px) { .project-import-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .project-source-files > li { align-items: flex-start; flex-direction: column; } }
.project-config-filters { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(5, minmax(130px, 1fr)) auto; gap: 12px; align-items: end; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.project-config-filters label { display: grid; gap: 7px; min-width: 0; }
.project-config-filters label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.project-config-filters input, .project-config-filters select { width: 100%; min-width: 0; }
.project-config-savebar {
  position: sticky;
  top: var(--topbar-height);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 12px rgba(8, 18, 29, .12);
}
.project-config-savebar > strong { margin-left: auto; color: var(--muted); font-size: 12px; }
.project-config-firmware-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.project-config-firmware-bar label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.project-config-firmware-bar small { color: var(--muted); align-self: center; }
.project-config-bulk-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.project-config-bulk-controls > .project-config-firmware-bar { border-bottom: 0; align-content: start; min-width: 0; }
.project-config-bulk-controls > .project-config-firmware-bar + .project-config-firmware-bar { border-left: 1px solid var(--line); }
.project-config-bulk-controls > .project-config-firmware-bar:only-child { grid-column: 1 / -1; }
.project-config-bulk-controls small { flex-basis: 100%; }
@media (max-width: 1000px) {
  .project-config-bulk-controls { grid-template-columns: minmax(0, 1fr); }
  .project-config-bulk-controls > .project-config-firmware-bar + .project-config-firmware-bar { border-left: 0; border-top: 1px solid var(--line); }
}
.project-config-row-status { color: var(--accent-strong); font-weight: 600; }
.project-config-table { max-height: none; overflow-x: auto; }
.project-config-table table { min-width: 1240px; width: 100%; }
.project-config-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.project-config-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer; min-height: 28px; }
.project-config-sort span { color: var(--muted); }
.project-config-sort:hover, .project-config-sort.is-active, .project-config-sort.is-active span { color: var(--accent-strong); }
.project-config-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.project-config-device-heading { display: flex; align-items: center; gap: 8px; }
.project-config-table th:first-child, .project-config-table td:first-child { width: 240px; min-width: 210px; }
.project-config-table td { padding: 10px; vertical-align: top; }
.project-config-table tbody tr,
.catalog-model-table-shell tbody tr,
.settings-primary-panel tbody tr,
tbody tr[data-href^="/projects/"],
tbody tr[data-href^="/equipment/"] { --device-row-surface: var(--surface); background: var(--device-row-surface); }
.project-config-table tbody tr:nth-child(even),
.catalog-model-table-shell tbody tr:nth-child(even),
.settings-primary-panel tbody tr:nth-child(even),
tbody tr[data-href^="/projects/"]:nth-child(even),
tbody tr[data-href^="/equipment/"]:nth-child(even) { --device-row-surface: color-mix(in srgb, var(--muted) 7%, var(--surface)); }
.project-config-table tbody tr:is(:hover, :focus-within),
.catalog-model-table-shell tbody tr:is(:hover, :focus-within),
.settings-primary-panel tbody tr:is(:hover, :focus-within),
tbody tr[data-href^="/projects/"]:is(:hover, :focus-within),
tbody tr[data-href^="/equipment/"]:is(:hover, :focus-within) { background: color-mix(in srgb, var(--accent) 6%, var(--device-row-surface)); }
.project-config-table th:last-child, .project-config-table td:last-child { width: 180px; min-width: 180px; }
.project-config-table td:last-child > button { display: block; width: 100%; margin: 0 0 6px; }
.project-config-row-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.project-config-row-actions > button { width: 100%; flex-shrink: 0; white-space: nowrap; }
.project-config-scope-notice { margin: 14px 18px 0; }
.project-config-table td:last-child > .project-config-review { margin-top: 6px; white-space: normal; }
.project-config-saved-details { margin-top: 10px; max-width: 340px; }
.project-config-saved-details summary { cursor: pointer; }
.project-config-saved-details dl { margin: 8px 0; }
.project-config-saved-details dl > div { margin-bottom: 8px; }
.project-config-saved-details dt { font-weight: 600; }
.project-config-saved-details dd { margin: 3px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.project-part-journey { max-width: 430px; }
.project-part-journey ol { list-style: none; margin: 12px 0 8px; padding: 0; }
.project-part-journey li { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; padding: 0 0 16px; }
.project-part-journey li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: -2px; width: 2px; background: var(--border); }
.project-part-journey-marker { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 2px; border: 2px solid var(--muted); border-radius: 50%; background: var(--surface); }
.project-part-journey li[data-lifecycle-state="verified"] .project-part-journey-marker,
.project-part-journey li[data-lifecycle-state="recorded"] .project-part-journey-marker,
.project-part-journey li[data-lifecycle-state="complete"] .project-part-journey-marker { border-color: var(--success); background: var(--success); }
.project-part-journey li[data-lifecycle-state="matched"] .project-part-journey-marker { border-color: var(--accent); background: var(--accent); }
.project-part-journey li[data-lifecycle-state="review"] .project-part-journey-marker,
.project-part-journey li[data-lifecycle-state="excluded"] .project-part-journey-marker { border-color: var(--warning); background: var(--warning); }
.project-part-journey li > div { min-width: 0; }
.project-part-journey li strong { display: inline; margin-right: 7px; }
.project-part-journey-status { display: inline-block; padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.project-part-journey li small, .project-part-journey li a { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.project-part-journey > .muted-copy { margin: 8px 0 0; font-size: 11px; }
.project-device-reconciliation .panel-body { display: grid; gap: 14px; }
.project-device-reconciliation .panel-body > p, .project-device-reconciliation .panel-body > dl { margin: 0; }
.project-reconciliation-target { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1fr) auto; align-items: end; gap: 12px; }
.project-reconciliation-target label, .project-reconciliation-devices td > label, .project-reconciliation-add { display: grid; gap: 6px; }
.project-reconciliation-devices td { vertical-align: top; }
.project-reconciliation-devices td:first-child { min-width: 200px; }
.project-reconciliation-devices td:last-child { min-width: 260px; }
.project-reconciliation-devices dl { margin: 0; }
.project-reconciliation-devices dl > div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.project-reconciliation-devices dd { margin: 0; overflow-wrap: anywhere; }
.project-reconciliation-devices td > label + label { margin-top: 10px; }
.project-reconciliation-devices .project-reconciliation-ack { grid-template-columns: auto 1fr; align-items: start; max-width: 360px; }
.project-reconciliation-ack input { width: auto; min-height: 0; margin-top: 3px; }
.project-reconciliation-devices td:not(:has(select[name="device_action"] option[value="reassign"]:checked)) .project-reconciliation-destination,
.project-reconciliation-devices td:not(:has(select[name="device_action"] option[value="remove"]:checked)) .project-reconciliation-ack { display: none; }
.project-reconciliation-add { max-width: 430px; }
.project-device-reconciliation [data-action="apply-project-device-reconciliation"] { justify-self: start; }
@media (max-width: 800px) { .project-reconciliation-target { grid-template-columns: 1fr; } .project-reconciliation-target > button { justify-self: start; } }
.project-config-remove { margin-left: auto; }
.project-config-table input { width: 100%; min-width: 155px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.project-config-table tbody tr.has-config-edits { background: color-mix(in srgb, var(--accent) 8%, var(--device-row-surface)); }
.project-config-table tr.has-config-edits > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.project-config-footnote { padding: 12px 20px; margin: 0; color: var(--muted); font-size: 12px; }
.project-config-tasks, .project-config-task-list { display: grid; gap: 16px; min-width: 0; }
.project-config-tasks-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.project-config-tasks-summary > dl { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0; }
.project-config-tasks-summary dt, .project-config-task-toolbar dt { color: var(--muted); font-size: 11px; }
.project-config-tasks-summary dd { margin: 4px 0 0; font-weight: 700; font-size: 19px; }
.project-config-tasks-summary > p { flex-basis: 100%; margin: 0; }
.project-config-task-search { display: grid; gap: 6px; width: min(100%,520px); }
.project-config-task-search > span { font-size: 12px; font-weight: 600; }
.project-config-task { overflow: hidden; margin: 0; }
.project-config-task > summary { display: grid; grid-template-columns: 8px minmax(180px, 1fr) 100px 180px 110px 180px; align-items: center; gap: 20px; padding: 16px 20px; list-style: none; cursor: pointer; }
.project-config-task > summary::-webkit-details-marker { display: none; }
.project-config-task > summary::before { content: '▸'; color: var(--muted); }
.project-config-task[open] > summary::before { content: '▾'; }
.project-config-task > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.project-config-task-heading { display: grid; gap: 4px; min-width: 180px; flex: 1; }
.project-config-task-heading > strong { overflow-wrap: anywhere; }
.project-config-task-status, .project-config-task-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.project-config-task-status .badge, .project-config-task-flags .badge { white-space: normal; }
.project-config-task-heading > span, .project-config-task-dates, .project-config-task-count { color: var(--muted); font-size: 11px; }
.project-config-task-dates, .project-config-task-count { display: grid; gap: 4px; }
.project-config-task-body { border-top: 1px solid var(--line); }
.project-config-task-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
.project-config-task-toolbar > dl { display: flex; gap: 24px; margin: 0; }
.project-config-task-toolbar dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.project-config-task-parts { min-width: 850px; width: 100%; }
.project-config-task-parts td { vertical-align: top; }
.project-config-task-parts td:first-child { min-width: 240px; }
.project-config-task-parts small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.project-config-task-footnote { margin: 0; padding: 12px 20px; font-size: 12px; }
@media (max-width: 1100px) {
  .project-config-task > summary { grid-template-columns: 8px 100px 180px 110px minmax(180px, 1fr); }
  .project-config-task-heading { grid-column: 2 / -1; }
  .project-config-task-status { grid-column: 2; }
}
@media (max-width: 700px) {
  .project-config-tasks-summary > dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-config-task > summary { grid-template-columns: 8px minmax(100px, 1fr) minmax(0, 1.5fr); gap: 12px; padding: 14px; }
  .project-config-task-dates { grid-column: 2; }
  .project-config-task-toolbar { padding: 14px; }
}
.config-latest-value, .config-conflict-label { color: var(--warning); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  .project-config-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .project-config-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .project-config-search { grid-column: 1 / -1; }
  .project-config-savebar { padding: 12px; }
  .project-config-savebar > strong { margin-left: 0; }
  .project-scope-tree { padding: 10px; }
  .project-scope-tree details > ul { margin-left: 6px; padding-left: 6px; }
  .project-scope-count { width: 100%; margin-left: 20px; }
}

.sign-in-active .app-body { display: block; padding-top: var(--topbar-height); }
.sign-in-active .navigation-rail,
.sign-in-active .environment-explorer,
.sign-in-active .mobile-workspace-bar { display: none !important; }
.sign-in-active .main-content {
  display: grid;
  width: 100%;
  min-height: calc(100vh - var(--topbar-height));
  padding: 24px;
  place-items: center;
  background: var(--canvas);
}
.sign-in-page { width: min(100%, 520px); }
.sign-in-panel {
  display: grid;
  gap: 15px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sign-in-panel img { width: 128px; height: auto; }
.sign-in-panel h1 { margin: 0; font-size: 28px; line-height: 1.1; }
.sign-in-panel p { margin: 0; color: var(--muted); line-height: 1.55; }
.sign-in-status { display: grid; margin: 4px 0 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.sign-in-status > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sign-in-status > div:last-child { border-bottom: 0; }
.sign-in-status dt { color: var(--muted); }
.sign-in-status dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.sign-in-error { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line)); border-radius: 4px; background: var(--warning-soft); color: var(--warning); font-weight: 700; line-height: 1.45; }

/* The shell uses restrained, technical surfaces across existing global views. */
.panel, .summary-strip, .rma-status-rail, .location-tree details { border-radius: 4px; box-shadow: none; }
.primary-button, .secondary-button, .quiet-button, .icon-button, input, select, textarea { border-radius: 4px; }
.panel-header { min-height: 52px; }
th { height: 38px; }
td { padding-top: 11px; padding-bottom: 11px; }

@media (max-width: 1100px) {
  :root { --page-gutter: 24px; }
  html.environment-scroll-locked { overflow: hidden; overscroll-behavior: none; }
  body.environment-scroll-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
  body.dashboard-active .dashboard-grid { grid-template-columns: 1fr; }
  body.settings-active .settings-grid,
  body.settings-active .catalog-grid { grid-template-columns: 1fr; }
  body.environment-active .app-body { grid-template-columns: var(--rail-width) minmax(0, 1fr); }
  .environment-explorer {
    position: fixed;
    top: var(--topbar-height);
    height: calc(100dvh - var(--topbar-height));
    left: var(--rail-width);
    z-index: 55;
    box-shadow: 16px 0 32px rgba(5,15,20,.18);
    transform: translateX(calc(-100% - var(--rail-width)));
    transition: transform .18s ease;
  }
  body.explorer-open .environment-explorer { transform: translateX(0); }
  .explorer-close { display: block; }
  .mobile-workspace-bar { position: sticky; top: var(--topbar-height); z-index: 45; display: flex; min-height: 43px; padding: 0 15px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11px; }
  /* Anchored to the topbar, this panel lands on top of the workspace bar and
     hides the Menu and Environment buttons, which reads as the navigation
     having vanished. Below the bar it covers only page content. */
  body:not(.sign-in-active) .identity-menu { top: calc(100% + 53px); }
  .mobile-workspace-bar .icon-button { min-height: 30px; padding: 0 9px; font-size: 11px; }
}

@media (max-width: 700px) {
  .topbar { padding: 0 11px; }
  .brand { --brand-logo-width: 112px; }
  .brand .brand-tagline { display: none; }
  .connection, .topbar-button:not(.theme-toggle) { display: none; }
  .theme-toggle { display: grid; width: 32px; min-width: 32px; padding: 0; place-items: center; }
  .theme-toggle span:last-child { display: none; }
  .identity-chip > span:last-child { display: none; }
  .app-body, body.environment-active .app-body { display: block; }
  .navigation-rail {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    z-index: 58;
    width: 224px;
    box-shadow: 18px 0 36px rgba(4,13,17,.3);
    transform: translateX(-100%);
    transition: transform .18s ease, visibility .18s ease;
    /* Crossing this breakpoint by resizing rather than loading can leave the
       rail with its desktop position still resolved, parked over the workspace
       bar at z-index 58 where it swallows taps on the menu button. Closing it
       must therefore also make it non-interactive, not merely translate it. */
    visibility: hidden;
    pointer-events: none;
  }
  body.nav-open .navigation-rail { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .mobile-nav-toggle { display: inline-flex; align-items: center; gap: 6px; }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: var(--topbar-height) 0 0 0; z-index: 57; background: rgba(4,13,17,.5); }
  .rail-menu-button { display: flex; padding: 0 17px; justify-content: flex-start; gap: 14px; }
  .primary-nav { padding: 10px; }
  .nav-item { width: 100%; padding: 0 13px; justify-content: flex-start; gap: 13px; }
  .nav-item.is-active { box-shadow: inset 3px 0 0 #20a8e7; }
  .rail-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
  .rail-label small { color: #61737b; font-size: 9px; }
  .rail-footer { display: flex; padding: 0 18px; justify-content: flex-start; gap: 12px; }
  .environment-explorer { left: 0; width: min(var(--explorer-width), 90vw); transform: translateX(-105%); }
  :root { --page-gutter: 15px; }
  .main-content { padding: 20px var(--page-gutter) 32px; }
  .access-chip { width: 100%; justify-content: flex-start; }
  .access-chip strong,
  .access-chip small { max-width: 38vw; }
  body.environment-active .main-content { padding: 0; }
  body.warehouse-active .main-content { padding: 0; }
  body.project-detail-active .main-content { padding: 0; }
  .import-filter-menu.is-expanded { inset: 68px 12px 16px 12px; max-width: calc(100vw - 24px); max-height: calc(100vh - 84px); }
  .import-filter-menu.is-expanded .import-filter-values { column-width: auto; max-height: calc(100vh - 220px); }
  .workspace-header { padding: 16px 16px 14px; }
  .workspace-title-row { flex-direction: column; }
  .workspace-title-row .header-actions { width: 100%; }
  .workspace-title-row .header-actions > * { flex: 1; }
  .context-metrics { grid-template-columns: repeat(2, 1fr); }
  .context-metrics > div:nth-child(2) { border-right: 0; }
  .context-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .context-tabs { padding: 0 8px; }
  .workspace-content { padding: 14px 12px 28px; }
  .structure-draft-banner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .structure-draft-banner strong { grid-column: 1 / -1; }
  .structure-draft-banner span { min-width: 0; grid-column: 2 / 4; }
  .structure-draft-banner button { width: 100%; min-width: 0; }
  .record-summary-bar { grid-template-columns: repeat(2, 1fr); }
  .record-summary-bar > div:nth-child(2) { border-right: 0; }
  .record-summary-bar > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .project-readiness-grid { grid-template-columns: 1fr; }
  .import-room-map-preview { grid-template-columns: 1fr; }
}
.ns-sandbox-controls { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.ns-sandbox-controls p { font-size: 12px; line-height: 1.6; }
.ns-sandbox-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.ns-sandbox-error { color: #ffb4ab; }
.ns-customer-results { display: grid; gap: 8px; }
.ns-customer-results button { display: flex; justify-content: space-between; gap: 16px; text-align: left; }
.ns-customer-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ns-customer-profile dt { color: var(--muted); font-size: 12px; }
.ns-customer-profile dd { margin: 5px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.ns-location-table { overflow-x: auto; margin-top: 16px; }
.ns-location-table table { width: 100%; table-layout: fixed; }
.ns-location-table th:last-child { width: 36%; }
.ns-location-table td { vertical-align: top; overflow-wrap: anywhere; }
.ns-location-table p { white-space: pre-line; font-size: 12px; margin: 6px 0; }
.ns-location-table select { width: 100%; min-width: 150px; }
.ic-section .section-toolbar h2 { margin-bottom: 6px; }
.ic-section .section-toolbar p, .ic-footnote { color: var(--muted); font-size: 12px; line-height: 1.6; }
.ic-range-buttons, .ic-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ic-legend { padding: 14px 0; font-size: 11px; color: var(--muted); }
.ic-key::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--ic-color); margin-right: 6px; }
.ic-current { --ic-color: #16aa9b; }
.ic-past { --ic-color: #667d94; }
.ic-future { --ic-color: #8c72d5; }
.ic-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.ic-chart { min-width: 900px; }
.ic-axis, .ic-site-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.ic-axis { background: var(--surface-muted); border-bottom: 1px solid var(--line); }
.ic-axis > strong { padding: 14px; font-size: 12px; }
.ic-axis > div { position: relative; min-height: 42px; }
.ic-axis > div > span { position: absolute; top: 14px; padding-left: 6px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.ic-site-row + .ic-site-row { border-top: 1px solid var(--line); }
.ic-site-name { padding: 18px 14px; border-right: 1px solid var(--line); }
.ic-site-name a { color: var(--ink); font-weight: 600; font-size: 12px; }
.ic-site-name small { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.ic-track { position: relative; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), var(--line) calc(12.5% - 1px), var(--line) 12.5%); }
.ic-term { position: absolute; height: 30px; padding: 0 10px; background: var(--ic-color); color: #fff; border: 1px solid transparent; border-radius: 5px; display: flex; gap: 8px; justify-content: space-between; align-items: center; font-size: 11px; cursor: pointer; overflow: hidden; white-space: nowrap; z-index: 1; }
.ic-term:hover, .ic-term:focus-visible, .ic-term.is-selected { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.ic-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #f6c76e; z-index: 2; pointer-events: none; }
.ic-no-term { display: block; padding: 22px 12px; color: var(--muted); font-size: 11px; }
.ic-term-detail { padding: 20px; border: 1px solid var(--line); border-radius: 8px; margin-top: 16px; }
.ic-term-detail h3 { margin: 6px 0 16px; }
.ic-coverage { margin: 20px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.ic-coverage h4 { margin: 0 0 6px; }
.ic-coverage p, .ic-coverage-flag small { color: var(--muted); font-size: 12px; }
.ic-coverage-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ic-coverage-flag { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ic-coverage-flag input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; opacity: 1; accent-color: var(--accent); }
.ic-coverage-flag small { display: block; margin-top: 3px; }
.ic-review { margin-top: 18px; font-size: 12px; }
.ic-review summary { cursor: pointer; color: var(--muted); }
.ic-review ul { max-height: 250px; overflow-y: auto; padding-left: 20px; }
.ic-review li { margin-top: 12px; }
.ic-review li span { display: block; color: var(--muted); margin-top: 4px; }
.explorer-switch-client { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--accent); font-weight: 600; }
.client-directory .search-field { width: min(100%, 560px); }
.client-directory table { table-layout: fixed; width: 100%; }
:is(.client-directory, .client-project-list, .client-project-devices) tbody tr { background: var(--surface); }
:is(.client-directory, .client-project-list, .client-project-devices) tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 94%, var(--ink)); }
:is(.client-directory, .client-project-list, .client-project-devices) tbody tr:hover,
:is(.client-directory, .client-project-list, .client-project-devices) tbody tr:focus-within { background: var(--accent-soft); }
.client-device-toolbar { align-items: end; gap: 12px; }
.client-device-toolbar .search-field { flex: 1 1 300px; min-width: min(100%, 240px); }
.client-device-toolbar .compact-field { flex: 1 1 150px; min-width: 0; }
.client-device-toolbar select { width: 100%; max-width: 100%; }
.client-device-sort { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.client-device-sort span { color: var(--accent-strong); }
.client-device-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.client-project-devices th[aria-sort]:not([aria-sort="none"]) { color: var(--ink); }
.client-directory th:first-child { width: 35%; }
.client-directory th:nth-child(2) { width: 16%; }
.client-directory th:nth-child(3) { width: 24%; }
.client-directory th:nth-child(4) { width: 8%; }
.client-directory td { overflow-wrap: anywhere; }
.client-directory .section-toolbar { flex-wrap: wrap; gap: 12px; }
/* Project configuration checklist */
.task-plan-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.task-plan-progress progress { accent-color: var(--accent); width: 160px; height: 10px; }
.task-plan-progress [role="status"] { color: var(--muted); margin-left: auto; }
.project-build-progress { margin: 18px 0; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 12px 30px rgb(0 0 0 / 14%); }
.project-build-progress.complete { border-color: color-mix(in srgb, var(--success) 55%, var(--line)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.project-build-progress.failed { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.project-build-progress-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.project-build-progress-heading h3, .project-build-progress-heading p { margin: 0; }
.project-build-progress-heading strong { color: var(--accent); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.project-build-progress progress { display: block; width: 100%; height: 12px; margin: 14px 0 10px; accent-color: var(--accent); }
.project-build-progress-detail { margin: 0 0 10px; color: var(--muted); }
.project-build-progress details { margin: 10px 0; }
.project-build-progress ol { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 5px; }
.project-build-progress li { display: flex; gap: 8px; align-items: baseline; }
.project-build-progress li span { color: var(--success); font-weight: 700; }
.project-build-progress > small { color: var(--muted); }
.task-plan-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 28px; margin-bottom: 24px; }
.task-plan-add { display: flex; align-items: end; gap: 10px; }
.task-plan-add label { flex: 1; }
.task-plan-add label, .task-plan-notes { display: grid; gap: 8px; }
.task-plan-items { padding: 0; list-style: none; margin: 18px 0; }
.task-plan-items li { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.task-plan-items li:nth-child(even) { background: color-mix(in srgb, var(--surface) 94%, var(--ink)); }
.task-plan-items input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--accent); }
.task-plan-items input[data-task-field="title"] { flex: 1; min-width: 80px; }
.task-plan-items .is-complete input[data-task-field="title"] { text-decoration: line-through; opacity: .7; }
.task-plan-notes textarea { resize: vertical; min-height: 250px; }
@media (max-width: 1050px) { .task-plan-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .task-plan-items li { flex-wrap: wrap; } .task-plan-items .button-row { margin-left: 28px; } .task-plan-progress [role="status"] { margin-left: 0; } }
.client-project-scope-note { margin: 0; padding: 14px; border-bottom: 1px solid var(--line); }
.project-header-overview { display: flex; align-items: flex-start; gap: 28px; margin-top: 20px; }
.project-header-disclosure { margin-top: 10px; }
.project-header-disclosure > summary { width: fit-content; cursor: pointer; color: var(--accent); font-size: 12px; font-weight: 600; padding: 4px 0; }
.project-header-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.project-header-disclosure .project-header-overview { margin-top: 12px; }
.project-header-information { flex: 1; min-width: 0; }
.project-netsuite-link { color: var(--accent); font-size: 12px; white-space: nowrap; text-underline-offset: 3px; }
.project-email { margin-top: 18px; }
.project-change-order-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; margin: 14px 16px 0; background: var(--accent-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; }
.project-change-order-notice > div { display: grid; gap: 4px; }
.project-change-order-notice span { font-size: 12px; color: var(--muted); }
.project-change-orders { display: grid; gap: 18px; min-width: 0; }
.project-change-order-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.project-change-order-list { display: grid; gap: 8px; min-width: 0; position: sticky; top: 16px; }
.project-change-order-list-group { display: grid; gap: 8px; align-content: start; min-width: 0; }
.project-change-order-list-group + .project-change-order-list-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.project-change-order-list-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.project-change-order-list-heading h3 { margin: 0; font-size: 13px; }
.project-change-order-list-heading > span { color: var(--muted); font-size: 12px; }
.project-change-order-list-group > p { margin: 0 0 6px; font-size: 11px; }
.project-change-order-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.project-change-order-record { width: 100%; min-width: 0; }
.project-change-order-record-link { display: inline-block; margin-bottom: 18px; }
.project-change-order-record h3 { font-size: 13px; margin: 0 0 8px; }
.project-change-order-record .project-change-order-notes { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; margin: 0; }
.project-change-order-scope { padding: 16px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 20px; }
.project-change-order-record-notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-bottom: 24px; }
.project-change-order-hours { grid-template-columns: repeat(5,minmax(0,1fr)); }
.project-change-order-select { display: grid; gap: 9px; width: 100%; padding: 16px; color: var(--ink); text-align: left; font: inherit; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); cursor: pointer; overflow-wrap: anywhere; }
.project-change-order-select > span:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.project-change-order-select > small { color: var(--muted); }
.project-change-order-select:hover, .project-change-order-select.is-active { background: var(--accent-soft); border-color: var(--accent); }
.project-change-order-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.project-change-order-detail { display: grid; gap: 18px; min-width: 0; }
.project-change-order-meta { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin: 0 0 18px; }
.project-change-order-meta dt { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.project-change-order-meta dd { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.project-change-order-source-links { display: flex; align-items: start; gap: 16px; flex-wrap: wrap; }
.project-change-order-source a { color: var(--accent); }
.project-change-order-notice a, .project-change-order-source-links > a { display: inline-flex; align-items: center; text-decoration: none; line-height: 1.4; }
.project-change-order-source { display: grid; gap: 4px; }
.project-change-order-source small { color: var(--muted); font-size: 11px; }
.project-change-order-lines { overflow-x: auto; }
.project-change-order-lines table { table-layout: fixed; width: 100%; min-width: 760px; }
.project-change-order-lines th:nth-child(1) { width: 24%; }
.project-change-order-lines th:nth-child(2) { width: 18%; }
.project-change-order-lines th:nth-child(3) { width: 12%; }
.project-change-order-lines td { vertical-align: top; overflow-wrap: anywhere; }
.project-change-order-lines td p { margin: 8px 0; font-size: 12px; }
.project-change-order-lines .button-row { margin: 10px 0; flex-wrap: wrap; }
.project-change-order-attention { color: var(--warning); }
.project-change-order-candidates, .project-change-order-provenance { margin: 8px 0; font-size: 12px; }
.project-change-order-candidates summary, .project-change-order-provenance summary, .project-change-order-history summary { cursor: pointer; color: var(--accent); }
.project-change-order-candidates ul { margin: 8px 0; padding: 0; list-style: none; }
.project-change-order-candidates li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.project-change-order-provenance dl { margin: 10px 0; }
.project-change-order-provenance dl > div { margin: 6px 0; }
.project-change-order-provenance dt { color: var(--muted); }
.project-change-order-provenance dd { margin: 2px 0; overflow-wrap: anywhere; }
.project-change-order-task-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.project-change-order-task-heading h4 { margin: 0; }
.project-change-order-task { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.project-change-order-task input[name="task_title"] { flex: 1; min-width: 100px; }
.project-change-order-task-done { display: flex; flex: 0 0 18px; }
.project-change-order-tasks { margin: 10px 0; }
.project-change-order-history details { margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.project-change-order-history-entry { padding: 10px 0; }
.project-change-order-notes { white-space: pre-wrap; }
@media (max-width: 1050px) { .project-change-order-layout { grid-template-columns: 1fr; } .project-change-order-list { position: static; } .project-change-order-list-group { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); } .project-change-order-list-heading, .project-change-order-list-group > p { grid-column: 1 / -1; } }
@media (max-width: 650px) { .project-change-order-notice { align-items: start; flex-direction: column; } .project-change-order-meta { grid-template-columns: repeat(2,minmax(0,1fr)); } .project-change-order-task { flex-wrap: wrap; } .project-change-order-record-notes { grid-template-columns: 1fr; } }
.project-email > label, .project-email > .project-email-label { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.project-email > span { color: var(--muted); font-size: 12px; }
.project-email-controls { display: flex; align-items: center; gap: 10px; max-width: 750px; }
.project-email-controls input { flex: 1; min-width: 0; font-size: 12px; }
.project-email-controls button { flex-shrink: 0; }
.project-team-source { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; color: var(--muted); }
.project-team-source small { font-size: 11px; }
.project-header-details { display: flex; flex: 1; flex-wrap: wrap; gap: 18px 24px; margin: 0; min-width: 0; }
.project-header-details > div { flex: 1 1 88px; min-width: 0; }
.project-header-details > div:first-child { flex: 2 1 180px; }
.project-header-details dt { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.project-header-details dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.project-client-logo { display: grid; justify-items: center; gap: 8px; flex: 0 0 190px; padding-left: 24px; border-left: 1px solid var(--line); }
.project-client-logo-image { width: 166px; height: 70px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 6px; padding: 8px; }
.project-client-logo-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.project-client-logo span, .project-client-logo small, .client-logo-preview span { color: var(--muted); font-size: 11px; text-align: center; }
.client-logo-preview { height: 180px; display: grid; place-items: center; margin-bottom: 20px; padding: 16px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface); }
.client-logo-preview img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
@media (min-width: 701px) and (max-width: 1400px) { .project-header-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .project-header-overview { flex-direction: column; } .project-header-details { width: 100%; } .project-header-details > div { flex-basis: 100px; } .project-header-details > div:first-child { flex-basis: 100%; } .project-client-logo { flex-basis: auto; padding: 0; border: 0; justify-items: start; } }
.project-hierarchy-actions { display:flex; gap:4px; flex-wrap:wrap; margin-left:12px; }
.project-hierarchy-root { margin:16px 16px 0; padding:12px; border:1px dashed var(--border, #334552); border-radius:6px; }
.project-hierarchy-root span { margin-left:12px; }
.project-hierarchy-meta, .project-hierarchy-help { padding:0 16px; font-size:13px; }
.project-hierarchy-meta p { white-space:pre-wrap; }
[data-project-drop] { position:relative; }
[data-project-drop].is-drop-valid { background:rgba(44,178,222,.15); outline:2px solid #36b9dc; }
[data-project-drop].is-drop-invalid { outline:2px solid #dd6666; }
[data-project-drop].drop-before { border-top:3px solid #36b9dc; }
[data-project-drop].drop-after { border-bottom:3px solid #36b9dc; }
[data-project-drop][data-drop-intent]::after { content:attr(data-drop-intent); position:absolute; right:8px; top:-18px; background:#14333d; color:#b7efff; padding:1px 6px; border-radius:3px; font-size:11px; z-index:2; }
[data-project-hierarchy][aria-busy="true"] { opacity:.65; pointer-events:none; }
[data-project-hierarchy] .tree-drag-handle { opacity:.7; flex-shrink:0; }
[data-project-hierarchy] .tree-drag-handle:hover { opacity:1; }
.project-scope-models li { display:flex; align-items:center; gap:8px; }
.project-scope-models li .project-scope-model { flex:1; min-width:0; }
@media(max-width:900px) { .project-hierarchy-actions { width:100%; margin-left:0; } [data-project-drop] { flex-wrap:wrap; } }
.definition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.definition-grid label { display:grid; gap:7px; align-content:start; }
.definition-card { border:1px solid var(--border, #46525c); border-radius:8px; padding:16px; margin:16px 0; }
.definition-check { display:flex; align-items:center; gap:8px; margin:16px 0; }
.definition-check input { width:auto; }
.definition-fields { border:0; padding:0; margin:0; min-width:0; }
.definition-card h3 { margin-top:0; }
@media(max-width:640px) { .definition-grid { grid-template-columns:1fr; } }

.config-nic-fields { display:grid; gap:12px; }
.config-nic-field { display:grid; gap:5px; }
.config-nic-field > span:first-child { font-size:11px; line-height:16px; font-weight:650; color:var(--muted); }
.project-config-table tr:has(.config-nic-fields) > td > input[data-config-field] { margin-top:21px; }
.project-config-table tr:has(.config-nic-fields) .config-firmware-unavailable { margin-top:21px; }
.config-nic-unavailable { min-height:40px; display:flex; align-items:center; color:var(--muted); font-size:12px; }
/* One-time script builder. Values and credentials live only in tab memory. */
.script-builder {display:grid;gap:18px;width:100%;max-width:none;min-width:0;margin:0;}
.task-device-completion {display:flex;align-items:flex-start;gap:8px;min-width:220px;margin:6px 0;}
.task-device-completion input[type="checkbox"] {width:16px;height:16px;flex:0 0 16px;margin-top:6px;opacity:1;accent-color:var(--accent);}
.task-device-completion small {display:block;max-width:360px;line-height:1.5;}
.task-completion-count {font-weight:600;}
.project-config-tasked-only { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.project-config-tasked-only input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.sb-panel {padding:24px;min-width:0;}
.sb-panel h2 {margin-top:0;}
.sb-panel p {line-height:1.5;}
.sb-panel label {display:grid;gap:8px;}
.sb-panel textarea {width:100%;margin:12px 0;}
.sb-panel details {margin-top:16px;}
.sb-options {display:flex;gap:24px;flex-wrap:wrap;margin:18px 0;}
.sb-options .sb-check {display:flex;align-items:center;gap:8px;}
.sb-fields {display:flex;gap:20px;flex-wrap:wrap;align-items:start;}
.sb-fields > label {flex:1;min-width:180px;}
.sb-fields [data-sb-network]:not([hidden]) {display:flex;gap:20px;}
.sb-table-wrap {overflow:auto;margin-top:18px;}
.sb-table {width:100%;min-width:1050px;}
.sb-table td {vertical-align:top;}
.sb-table small {display:block;margin-top:7px;}
.sb-table input:not([type=checkbox]) {width:100%;min-width:150px;}
.sb-error {white-space:pre-line;color:var(--danger,#ff9898);margin-top:16px;}
.sb-panel pre {white-space:pre;overflow:auto;max-height:480px;padding:18px;background:#101820;color:#dce9f1;border-radius:8px;}

.project-finder-result { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:16px; margin:8px 0; text-align:left; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.project-finder-result:hover { border-color:var(--accent); }
.project-finder-result small { display:block; margin-top:6px; color:var(--muted); }
.project-finder-result > span:first-child { min-width:0; overflow-wrap:anywhere; }
.project-finder-result > span:last-child { flex-shrink:0; color:var(--accent); }

.project-config-table tr.config-device-removed { background:color-mix(in srgb,var(--muted) 12%,var(--surface)); }
.project-config-table tr.config-device-removed > td:first-child { border-left:3px solid var(--warning); }
.project-config-table tr.config-device-removed > td:first-child > strong { text-decoration:line-through; }
.project-config-table tr.config-device-removed input:disabled { opacity:.65; cursor:not-allowed; }
.co-device-applied small { display:block; margin-top:6px; }

/* Keep project work tabs visible while secondary pages share a compact menu. */
.project-context-tabs { overflow: visible; flex-wrap: wrap; gap: 0 4px; }
.project-context-tabs > a { min-height: 45px; }
.project-tabs-more { position: relative; margin-left: auto; }
.project-tabs-more > summary { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 0 14px; border-bottom: 2px solid transparent; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; list-style: none; }
.project-tabs-more > summary::-webkit-details-marker { display: none; }
.project-tabs-more.is-active > summary { color: var(--accent-strong); border-color: var(--accent); }
.project-tabs-menu { position: absolute; top: 100%; right: 0; z-index: 40; min-width: 200px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px #0004; }
.project-tabs-menu a { min-height: 40px; border-radius: 4px; }
.project-tabs-menu a:hover { background: var(--surface-muted); }
.project-tabs-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Immedia warehouse. The shelf map is a card per storage area holding a row
   per shelf, because a warehouse is read by walking it: which bay, then which
   shelf. The cards size themselves to the column, so the same markup is a
   multi-column map on a desktop and a single stack on a phone. */
.warehouse-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 15px; }
.shelf-bay { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; }
.shelf-bay:hover { border-color: var(--accent); }
.shelf-bay-head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--surface-muted); color: var(--ink); text-decoration: none; }
.shelf-bay-copy { display: grid; gap: 2px; min-width: 0; }
.shelf-bay-copy strong { font-size: 15px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.shelf-bay-copy small { color: var(--muted); font-size: 11px; }
.shelf-bay-head:hover .shelf-bay-copy strong { color: var(--accent-strong); }
.shelf-bay-count { display: grid; flex: none; gap: 1px; text-align: right; }
.shelf-bay-count strong { font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.shelf-bay-count span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.shelf-list { display: grid; margin: 0; padding: 0; list-style: none; }
.shelf-list li + li { border-top: 1px solid var(--line); }
.shelf-list a { display: flex; min-height: 40px; gap: 10px; align-items: center; padding: 0 12px 0 14px; color: var(--ink); font-size: 12px; text-decoration: none; }
.shelf-list a:hover { background: var(--accent-soft); }
.shelf-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.shelf-code { color: var(--muted); font-size: 11px; }
.shelf-count { min-width: 26px; padding: 2px 7px; border-radius: 9px; background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.shelf-chevron { color: var(--muted); font-size: 16px; line-height: 1; }
.shelf-bay-empty { margin: 0; padding: 14px; color: var(--muted); font-size: 12px; }
.shelf-bay-actions { display: flex; padding: 10px 12px; border-top: 1px solid var(--line); }
.shelf-bay-actions .quiet-button { width: 100%; }
/* Inside a card the form is the card's own content, so it drops the panel
   inset the Environments editor uses at full section width. */
.shelf-bay .inline-structure-form { padding: 12px; gap: 11px; }
.warehouse-form textarea { min-height: 52px; resize: vertical; }
/* The new-location fields belong to one choice in the parent select, so the
   select itself reveals them rather than a re-render. They stay in the form
   while hidden and are read only when that choice is the one submitted. */
.warehouse-form .new-location-fields { display: none; }
.warehouse-form:has([name="parent_key"] option[value="new-location"]:checked) .new-location-fields { display: grid; }
.warehouse-stock .search-field { flex-basis: 420px; }

/* Touch and small-screen support. See docs/mobile-support.md.
   This section is last so its small-screen overrides win specificity ties
   against the component rules above. */

/* Pills and short action links are single tokens. Without this a squeezed
   column wraps them one character per line and stretches every row in the
   table -- which happens in any narrow window, not only on phones. Content
   links such as a client name are deliberately excluded: they are long enough
   that refusing to wrap makes them overflow the cell instead. */
.table-wrap .status-badge,
.table-wrap td > .text-link { white-space: nowrap; }

/* Fixed-layout tables ignore content when sizing columns, so a narrow window
   squeezes them until cell content overflows. They need an explicit floor and
   their wrapper's scroll instead. The other fixed-layout tables in this
   stylesheet already declare one. */
.client-directory table { min-width: 880px; }

/* Service navigation count. Open follow-ups owned by the signed-in technician.
   Visible in both rail states: a corner dot over the icon when collapsed, an
   inline pill beside the label when the rail is open. Rendered only when the
   count is above zero, so an empty list adds no chrome. */
.nav-count {
  display: inline-flex;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #20a8e7;
  color: #04212f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
body:not(.nav-open) .nav-count { position: absolute; top: 4px; right: 3px; }
body.nav-open .nav-count { margin-left: auto; }

/* Follow-ups. A single full-width list of personal reminders; no tabs, no
   history view, no per-row navigation. */
.follow-up-panel .panel-header { align-items: flex-start; }
.follow-up-panel .panel-header { flex-wrap: wrap; gap: 12px; }
.follow-up-cadence { display: grid; gap: 3px; min-width: 210px; }
.follow-up-cadence small { max-width: 260px; font-size: 11px; line-height: 1.35; }
.follow-up-panel .panel-header p { margin: 3px 0 0; }
.follow-up-list { display: grid; gap: 10px; margin: 0; padding: 16px; list-style: none; }
.follow-up-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.follow-up-card.is-overdue { border-left-color: var(--danger); }
.follow-up-copy { display: grid; gap: 4px; min-width: 0; }
.follow-up-copy strong { font-size: 14px; }
.follow-up-copy p { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.follow-up-reference { color: var(--muted); font-size: 12px; }
.follow-up-meta { justify-self: end; }
.follow-up-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }
.follow-up-actions button { min-height: 36px; }
.follow-up-form select[size] { min-height: 132px; }
.follow-up-association { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.follow-up-association legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.follow-up-owner { margin: 0; }

/* The client directory's column percentages (35/16/24/8) leave the status and
   link columns 8.5% each, which only holds their content above about 1400px.
   Below that, give those two real widths and let the wrapping name column
   absorb the difference. */
@media (max-width: 1400px) {
  .client-directory th:nth-child(5) { width: 132px; }
  .client-directory th:last-child { width: 172px; }
}

/* Pointer-based capability, not width: a touch device at any width has no
   hover, so controls revealed only on hover are unreachable there. */
@media (hover: none) {
  /* HTML5 dataTransfer never fires on touch. Hide the handles rather than
     advertise a move that cannot happen; use the Move actions instead. */
  .tree-drag-handle, .equipment-drag-handle { display: none; }
  .drag-cell { width: 0; padding-left: 0 !important; padding-right: 0 !important; }
  /* Row actions are the only way to reach add/rename/remove without hover. */
  .tree-node-actions { visibility: visible; opacity: 1; pointer-events: auto; }
}

@media (max-width: 700px) {
  /* Safari zooms the page when a focused control computes under 16px. Each
     selector here matches a component rule that sets a smaller size. */
  input, select, textarea,
  .explorer-search input,
  .import-filter-menu input[type="search"],
  .import-preview-table input:not([type="checkbox"]),
  .project-config-table input,
  .project-email-controls input { font-size: 16px; }

  /* Touch targets. 44px is the smallest reliably tappable size. */
  .primary-button, .secondary-button, .quiet-button, .icon-button,
  .danger-button, .small-button, .row-actions button,
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
  .tree-node-actions button, .tree-add-toggle.is-persistent { width: 44px; height: 44px; }
  .tree-node-actions { visibility: visible; opacity: 1; pointer-events: auto; }
  .environment-tree-row, .environment-tree-row > a, .tree-node-link { min-height: 44px; }
  .tree-toggle, .tree-toggle-placeholder { width: 32px; height: 44px; }
  /* Keep one touch action per row so deep labels cannot be squeezed away. */
  .environment-explorer { width: min(390px, calc(100vw - 16px)); }
  .environment-tree-row { grid-template-columns: 44px minmax(0, 1fr) auto; padding-left: calc(4px + var(--tree-level) * 10px); padding-right: 6px; }
  .environment-tree-row .tree-node-actions-wrap, .environment-tree-row .tree-drag-handle { display: none; }
  .tree-mobile-actions { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid #3c525c; border-radius: 4px; background: #14242b; color: #d8e1e5; font-size: 24px; cursor: pointer; }
  .tree-mobile-actions:focus-visible { outline: 2px solid #42b8ec; outline-offset: -2px; }
  .tree-toggle, .tree-toggle-placeholder { width: 44px; }
  .tree-node-copy { display: grid; gap: 2px; padding-block: 8px; }
  .tree-node-copy strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  .tree-node-copy small { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
  .explorer-header > div { min-width: 0; }
  .explorer-header strong { overflow-wrap: anywhere; }
  .explorer-close { flex: none; width: 44px; height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; flex-basis: 22px; }
  /* The workspace bar grows to hold full-size buttons rather than capping them. */
  .mobile-workspace-bar { min-height: 56px; }
  body:not(.sign-in-active) .identity-menu { top: calc(100% + 66px); }
  .mobile-workspace-bar .icon-button { min-height: 44px; font-size: 12px; }

  /* Wide tables keep horizontal scroll, but say so and pin the identity
     column so a scrolled row is still attributable. */
  .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  /* A table with no declared min-width collapses to fit instead of scrolling,
     squeezing columns until cells wrap one character per line. The table
     layout algorithm ignores min-width on cells, so the floor goes on the
     table. :where() keeps this at zero specificity, so the component rules
     that declare a deliberate larger width (Config at 1240px, Script Builder
     at 1050px) still win. */
  :where(.table-wrap) > table { min-width: max(100%, 640px); }
  .ns-location-table table { min-width: 560px; }
  .table-wrap table > thead > tr > th:first-child,
  .table-wrap table > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--device-row-surface, var(--surface));
    box-shadow: 1px 0 0 var(--line);
  }
  .table-wrap table > thead > tr > th:first-child { z-index: 2; background: var(--surface-muted); }
  /* State rows paint the tr directly, so the pinned cell must match. */
  .project-config-table tbody tr.has-config-edits > td:first-child { background: color-mix(in srgb, var(--accent) 8%, var(--device-row-surface)); }
  .project-config-table tbody tr.config-device-removed > td:first-child { background: color-mix(in srgb, var(--muted) 12%, var(--surface)); }
}

/* Client directory as cards below 700px. Six columns cannot be read at phone
   width: pinned-column scrolling leaves four of them off screen. The row
   becomes a card instead -- name and coverage badge on the first line, the
   remaining fields as one meta line -- so nothing scrolls sideways and every
   column's value is still present. Desktop keeps the table untouched. */
.directory-more { display: flex; justify-content: center; padding: 16px 18px; border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  /* Undo the shared wide-table treatment: this table no longer scrolls. */
  .client-directory .table-wrap { overflow: visible; }
  .client-directory table,
  :where(.client-directory .table-wrap) > table { min-width: 0; width: 100%; }
  .client-directory thead { display: none; }
  .client-directory table, .client-directory tbody { display: block; }

  .client-directory tbody tr {
    position: relative;
    display: block;
    padding: 13px 32px 13px 15px;
    border-bottom: 1px solid var(--line);
  }
  .client-directory tbody td {
    position: static;
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    /* The shared table rules give cells a 52px floor for touch rows; inside a
       card the card itself carries the height. */
    min-width: 0;
    min-height: 0;
    color: var(--muted);
    font-size: 12px;
  }
  /* Name owns the first line. The selector matches the shared sticky-column
     rule's specificity so the pinned background and edge shadow, which belong
     to a scrolling table, are cleared here. */
  .client-directory .table-wrap table > tbody > tr > td:first-child {
    position: static;
    display: block;
    margin-bottom: 3px;
    background: none;
    box-shadow: none;
    color: var(--ink);
    font-size: 14px;
  }
  .client-directory tbody td:first-child .row-link { font-weight: 750; }
  /* Stretched link: the whole card opens the client, so the tap target is the
     card rather than the name alone. */
  .client-directory tbody td:first-child .row-link::after { content: ""; position: absolute; inset: 0; }
  /* The badge closes the meta line. It is deliberately not absolutely
     positioned: an absolutely positioned <td> lays out correctly but does not
     paint its text, leaving an empty pill. */
  .client-directory tbody td:nth-child(5) { margin-left: 6px; }
  /* NetSuite ID, account executive and site count read as one meta line. */
  .client-directory tbody td:nth-child(2)::after,
  .client-directory tbody td:nth-child(3)::after { content: " · "; }
  .client-directory tbody td:nth-child(4)::after { content: " " attr(data-unit); }
  /* The open link is redundant once the card itself is the target; the chevron
     stands in as the affordance. */
  .client-directory tbody td:last-child { display: none; }
  .client-directory tbody tr::after {
    content: "›";
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -12px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
  }
}

/* Project device configuration and the settings catalog as cards below 700px.
   Both are wide editing grids -- 1240px and 1120px -- so on a phone they were
   almost entirely off screen. Each row becomes a card with its fields stacked
   under visible labels, taken from the same header text the table uses. Save,
   conflict and unsaved-change behaviour is untouched: this is layout only. */
@media (max-width: 700px) {
  .project-config-table,
  .catalog-model-table-shell > .table-wrap { overflow: visible; }
  .project-config-table table,
  .catalog-model-table-shell table,
  :where(.project-config-table) > table,
  :where(.catalog-model-table-shell .table-wrap) > table { min-width: 0; width: 100%; table-layout: auto; }
  .project-config-table thead,
  .catalog-model-table-shell thead { display: none; }
  .project-config-table table, .project-config-table tbody,
  .catalog-model-table-shell table, .catalog-model-table-shell tbody { display: block; }

  /* Reference tables are only three narrow columns and already fit. */
  :where(.catalog-reference-panel .table-wrap) > table { min-width: 0; }

  /* --- Project device configuration --- */
  .project-config-table tbody tr {
    display: block;
    padding: 14px 15px;
    border-bottom: 1px solid var(--line);
  }
  /* The panel carries both .table-wrap and .project-config-table, so the
     second selector matches the shared sticky-column rule's specificity to
     clear the pinned position, background and edge shadow. */
  .project-config-table tbody td,
  .project-config-table table > tbody > tr > td:first-child {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  /* Identity block keeps its own stacked detail lines. */
  .project-config-table tbody td:first-child { margin-bottom: 12px; }
  /* Each editable field sits under the label its column header carried. */
  .project-config-table tbody td[data-label] { margin-bottom: 10px; }
  .project-config-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .project-config-table input { min-width: 0; font-size: 16px; }
  /* Table layout used a top margin to line inputs up with the NIC labels
     beside them; stacked, that is just a gap. */
  .project-config-table tr:has(.config-nic-fields) > td > input[data-config-field],
  .project-config-table tr:has(.config-nic-fields) .config-firmware-unavailable { margin-top: 0; }
  /* Matches the fixed 180px action column rule's specificity so the buttons
     can use the card's full width. */
  .project-config-table tbody td:last-child { width: auto; min-width: 0; }
  .project-config-table tbody td:last-child > button { width: 100%; }
  .project-config-table tr.has-config-edits > td:first-child,
  .project-config-table tr.config-device-removed > td:first-child { box-shadow: none; border-left: 0; }
  .project-config-table tr.has-config-edits { box-shadow: inset 3px 0 0 var(--accent); }
  .project-config-table tr.config-device-removed { box-shadow: inset 3px 0 0 var(--warning); }

  /* --- Settings catalog models --- */
  /* The shell is a fixed-height scroll frame so the desktop pager never moves
     with row height. On a phone that nests a scroller inside the page, which
     traps the list in a short box; the cards flow with the page instead. */
  .catalog-model-table-shell { height: auto; min-height: 0; overflow: visible; border-bottom: 0; }
  .catalog-pager-compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .catalog-pager-compact > button { width: 100%; }
  .catalog-model-table-shell tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* No column gap: the separator below supplies the spacing, so the two do
       not compound into a visible double space. */
    gap: 2px 0;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
  }
  .catalog-model-table-shell tbody td {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    color: var(--muted);
    font-size: 12px;
  }
  /* Model leads the card; manufacturer and category share the line below it. */
  .catalog-model-table-shell tbody td:nth-child(2) { order: 1; flex: 1 1 100%; color: var(--ink); font-size: 14px; }
  .catalog-model-table-shell tbody td:nth-child(1) { order: 2; }
  .catalog-model-table-shell tbody td:nth-child(1)::after { content: " · "; }
  .catalog-model-table-shell tbody td:nth-child(3) { order: 3; }
  .catalog-model-table-shell tbody td:nth-child(4) { order: 4; flex: 1 1 100%; }
  .catalog-model-table-shell tbody td:nth-child(4)::before { content: "Latest firmware: "; }
  .catalog-model-table-shell tbody td:last-child { order: 5; flex: 1 1 100%; margin-top: 9px; }
  .catalog-model-table-shell .row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
  .catalog-model-table-shell .row-actions button { flex: 1 1 auto; }
}

/* Warehouse stock as cards below 700px, following the client directory: five
   columns cannot be read at phone width, and a warehouse list is read while
   standing in front of the shelves. Equipment leads the card, serial and shelf
   read as one meta line, and the state badge closes it. */
@media (max-width: 700px) {
  /* One bay per row: the 290px track would otherwise keep two columns on a
     phone and squeeze the shelf rows. */
  .warehouse-map { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .shelf-list a { min-height: 44px; }

  /* Undo the shared wide-table treatment: this table no longer scrolls. */
  .warehouse-stock .table-wrap { overflow: visible; }
  .warehouse-stock table,
  :where(.warehouse-stock .table-wrap) > table { min-width: 0; width: 100%; }
  .warehouse-stock thead { display: none; }
  .warehouse-stock table, .warehouse-stock tbody { display: block; }

  .warehouse-stock tbody tr {
    position: relative;
    display: block;
    padding: 13px 32px 13px 15px;
    border-bottom: 1px solid var(--line);
  }
  .warehouse-stock tbody td {
    position: static;
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    color: var(--muted);
    font-size: 12px;
  }
  /* Equipment owns the first line. This selector matches the shared
     sticky-column rule's specificity so the pinned background and edge shadow,
     which belong to a scrolling table, are cleared here. */
  .warehouse-stock .table-wrap table > tbody > tr > td:first-child {
    position: static;
    display: block;
    margin-bottom: 3px;
    background: none;
    box-shadow: none;
    color: var(--ink);
    font-size: 14px;
  }
  .warehouse-stock tbody td:first-child .row-link { font-weight: 750; }
  /* Stretched link: the whole card opens the device record. */
  .warehouse-stock tbody td:first-child .row-link::after { content: ""; position: absolute; inset: 0; }
  .warehouse-stock tbody td:nth-child(2)::after { content: " · "; }
  /* The shelf link sits under the stretched card link, so it keeps its own tap
     target by rising above it. */
  .warehouse-stock tbody td:nth-child(3) .text-link { position: relative; z-index: 1; }
  .warehouse-stock tbody td:nth-child(4) { display: block; margin-top: 7px; }
  /* Updated is the least useful field on a phone and the card is already the
     tap target for the full record. */
  .warehouse-stock tbody td:last-child { display: none; }
  .warehouse-stock tbody tr::after {
    content: "›";
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -12px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
  }
}

/* RMA list on phones. Six columns at a 1080px minimum meant the records were
   almost entirely off screen, the view tabs scrolled the active one out of
   reach, and the header, tabs and three stacked filters pushed the first record
   well below the fold. Cells carry data-cell so this survives the client view,
   which renders five columns instead of six. Service workstream. */
@media (max-width: 700px) {
  /* Tabs wrap instead of scrolling sideways, so every view stays reachable. */
  .rma-view-tabs { flex-wrap: wrap; overflow-x: visible; gap: 6px; padding: 10px 12px; }
  /* Content width, not stretched: a wrapped final tab should not become a
     full-width bar that reads as a heading. */
  .rma-view-tabs button { flex: 0 1 auto; min-height: 40px; }

  /* Status and Hold sit behind a disclosure, sharing a row once opened, so the
     first record is reachable without scrolling past the filters. */
  .rma-filter-disclosure { flex: 1 1 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
  .rma-filter-disclosure > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 13px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .rma-filter-disclosure > summary > span {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
  }
  .rma-filter-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
  .rma-filter-fields { display: flex; flex-wrap: wrap; gap: 12px; padding: 13px; }
  .rma-filter-fields .compact-field { flex: 1 1 calc(50% - 6px); min-width: 0; }

  /* Each record becomes a card. The row already carries data-href, so the whole
     card is tappable without adding a stretched link. */
  .rma-list-panel .table-wrap { overflow: visible; }
  .rma-list-panel table { min-width: 0; width: 100%; }
  .rma-list-panel thead { display: none; }
  .rma-list-panel table, .rma-list-panel tbody { display: block; }
  .rma-list-panel tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 0;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
  }
  /* The attribute keeps this above the fixed column widths declared for the
     desktop table, which outrank a plain descendant selector. */
  .rma-list-panel tbody td[data-cell] {
    display: block;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    color: var(--muted);
    font-size: 12px;
  }
  /* Matches the shared sticky-column rule so the pinned background and edge
     shadow are cleared here. */
  .rma-list-panel table > tbody > tr > td:first-child {
    position: static;
    background: none;
    box-shadow: none;
  }
  .rma-list-panel tbody td[data-cell="rma"] { order: 1; flex: 1 1 auto; color: var(--ink); font-size: 14px; }
  .rma-list-panel tbody td[data-cell="status"] { order: 2; flex: 0 0 auto; margin-left: auto; }
  .rma-list-panel tbody td[data-cell="location"] { order: 3; flex: 1 1 100%; margin-top: 3px; }
  .rma-list-panel tbody td[data-cell="client"] { order: 4; }
  .rma-list-panel tbody td[data-cell="technician"] { order: 5; }
  .rma-list-panel tbody td[data-cell="updated"] { order: 6; }
  .rma-list-panel tbody td[data-cell="client"]::after,
  .rma-list-panel tbody td[data-cell="technician"]::after { content: " · "; white-space: pre; }
}

/* Follow-ups on a phone. Technicians create these in the field, so the card
   stacks, the badge moves under the copy, and every control clears the 44px
   touch floor recorded in docs/mobile-support.md. */
@media (max-width: 700px) {
  .follow-up-list { padding: 12px; }
  .follow-up-card { grid-template-columns: minmax(0, 1fr); padding: 13px 14px; }
  .follow-up-meta { justify-self: start; }
  .follow-up-actions button { min-height: 44px; flex: 1 1 auto; }
  .follow-up-form select[size] { min-height: 150px; }
  .follow-up-cadence { width: 100%; }
  .follow-up-cadence select { min-height: 44px; }
}
/* Site device imports share the ordinary panel/form layout. Keep review controls
   usable on a phone and paginate rather than silently truncating source rows. */
.device-importer .importer-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.device-importer .button-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; }
.device-importer button:disabled { opacity:.55; cursor:default; }
.device-importer details { margin:10px 0; }
.device-importer select { max-width:100%; }
.device-importer .catalog-model-picker { min-width:0; }
.device-importer .catalog-model-picker label { display:grid; gap:6px; }
.device-importer .catalog-model-picker input { width:100%; min-width:0; font-size:16px; }
.device-importer .catalog-model-results { border:1px solid var(--border-color,#405363); border-radius:8px; padding:8px; }
.device-importer .catalog-model-results [role="listbox"] { max-height:260px; overflow-y:auto; overscroll-behavior:contain; margin-top:8px; }
.device-importer .catalog-model-results [role="option"] { display:block; width:100%; min-height:44px; padding:10px; text-align:left; white-space:normal; overflow-wrap:anywhere; color:inherit; background:transparent; border:1px solid transparent; border-radius:6px; }
.device-importer .catalog-model-results [role="option"]:hover,.device-importer .catalog-model-results .catalog-model-active { background:var(--panel-bg,#172b36); border-color:var(--border-color,#405363); }
.device-importer .catalog-model-results [aria-selected="true"] { font-weight:700; }
.device-importer .importer-fields > .button-row,
.device-importer .importer-fields > details { grid-column:1/-1; }
.device-importer .importer-check { display:flex; align-items:center; gap:10px; margin:12px 0; }
.device-importer [hidden] { display:none !important; }
.device-importer .importer-reuse { margin:16px 0; }
.device-importer .importer-edit-fields { border:0; padding:0; margin:0; min-width:0; }
.device-importer .importer-feedback,.device-importer .importer-save-actions,.device-importer .importer-update-review { padding:12px; margin:12px 0; border:1px solid var(--border-color,#405363); border-radius:8px; }
.device-importer .importer-save-actions { background:var(--panel-bg,#172b36); }
.device-importer .importer-saved { border-color:#25875f; }
.device-importer .importer-saved-label { color:#80d5ad; }
.device-importer input[type="checkbox"] { min-width:22px; min-height:22px; }
.device-importer .importer-editor { padding:16px; border:1px solid var(--border-color,#405363); border-radius:8px; }
.device-importer .importer-table { min-width:780px; }
.device-importer .importer-table td { vertical-align:top; max-width:320px; overflow-wrap:anywhere; }
.device-importer .importer-table td p { margin:0 0 8px; }
.device-importer .importer-reviews { list-style:none; padding:0; }
.device-importer .importer-reviews li { display:grid; margin:10px 0; }
.device-importer .importer-reviews small { padding-left:12px; }
@media(max-width:700px) {
  .device-importer .importer-fields { grid-template-columns:1fr; }
  .device-importer .importer-review-list { overflow:visible; }
  .device-importer .importer-table { display:block; width:100%; min-width:0; }
  .device-importer .importer-table thead { display:none; }
  .device-importer .importer-table tbody { display:grid; gap:12px; }
  .device-importer .importer-table tr { display:grid; grid-template-columns:44px minmax(0,1fr); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .device-importer .importer-table td { display:block; min-width:0; max-width:none; grid-column:1/-1; border:0; white-space:normal; padding:10px 12px; }
  .device-importer .importer-table > tbody > tr > td:first-child { position:static; box-shadow:none; background:transparent; }
  .device-importer .importer-device-row > td:first-child { grid-column:1; grid-row:1; padding:12px 10px; }
  .device-importer .importer-device-row > td:nth-child(2) { grid-column:2; grid-row:1; }
  .device-importer .importer-device-row > td[data-label]:nth-child(n+3) { border-top:1px solid var(--line); }
  .device-importer .importer-device-row > td[data-label]:nth-child(n+3)::before { content:attr(data-label); display:block; margin-bottom:6px; font-size:11px; font-weight:750; color:var(--muted); }
  .device-importer .importer-device-row > td[data-label="Review"]:empty { display:none; }
  .device-importer .importer-device-row > td[data-label="Changes / attention"]:empty { display:none; }
  .device-importer .importer-device-row > td[data-label="Review"] > button { width:100%; }
  .device-importer .importer-editor-row { grid-template-columns:minmax(0,1fr); }
  .device-importer .importer-editor-row > td { padding:0; }
  .device-importer .importer-editor { width:100%; max-width:none; min-width:0; }
  .device-importer .importer-editor input:not([type="checkbox"]), .device-importer .importer-editor select, .device-importer [data-import-search] { font-size:16px; }
  .device-importer .importer-save-actions .button-row > button { width:100%; white-space:normal; }
  .device-importer .button-row { flex-wrap:wrap; }
  .device-importer button,.device-importer select { min-height:44px; }
}