/* Device workspace only: preserve the layout and controls of other modules. */
.app-shell.device-workspace-active > header.panel { display:none; }
.app-shell.device-workspace-active #device-sn-panel { margin-top:0; }
.app-shell.device-workspace-active.is-device-menu-collapsed .workspace-layout { grid-template-columns:minmax(0,1fr); }
.app-shell.device-workspace-active.is-device-menu-collapsed .shopify-sidebar { display:none; }
#device-sn-panel .device-workspace-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(170px,1fr));
  gap:10px;
  padding:14px 18px 0;
  background:transparent;
}
#device-sn-panel .device-workspace-tabs > .sn-primary-tab-control { border-radius:9px; justify-content:center; min-height:44px; }
#device-sn-panel .device-workspace-tabs > .sn-primary-tab-control.active { background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.2); }
#device-sn-panel .sn-supplementary-tab-group {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:2px;
  padding:8px 0 0;
  border-top:1px solid #e2e8f0;
}
#device-sn-panel .sn-supplementary-heading {
  flex:0 0 auto;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#device-sn-panel .sn-supplementary-tab-control {
  min-height:32px;
  padding:7px 10px;
  border-radius:7px;
  background:#fff;
  color:#475569;
  font-size:12px;
  box-shadow:none;
}
#device-sn-panel .sn-supplementary-tab-control.active {
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1d4ed8;
  box-shadow:none;
}
#warehouse-devices-menu .sn-supplementary-nav-group {
  display:grid;
  gap:4px;
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid rgba(37,99,235,.12);
}
#warehouse-devices-menu .sn-supplementary-heading {
  display:block;
  padding:2px 10px 4px;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#warehouse-devices-menu .sn-supplementary-nav-control {
  padding:8px 10px;
  color:#667085;
  font-size:12px;
  font-weight:700;
}
#warehouse-devices-menu .sn-supplementary-nav-control.active {
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
  box-shadow:none;
}
#device-sn-panel .device-service-grid,
#device-sn-panel .sn-management-grid { grid-template-columns:minmax(0,1fr); }
#device-sn-panel .sn-directory-detail .result-scroll,
#device-sn-panel .device-history-table { max-height:none; }
#device-sn-panel #device-sn-table {
  /* Base table rows are about 37px (11px vertical cell padding plus one line). */
  max-height:790px;
  overflow:auto;
  scrollbar-gutter:stable;
}
#device-sn-panel #device-sn-table table thead th {
  position:sticky;
  top:0;
  z-index:2;
  background:#f8fbff;
  box-shadow:0 1px 0 var(--line);
}
#device-sn-panel #device-sn-table table thead th:first-child { z-index:3; }
#device-sn-panel .sn-directory-detail table { min-width:900px; }
#device-sn-panel .sn-management-card { padding:14px; background:white; box-shadow:none; }
#device-sn-panel .sn-directory-filters { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
#device-sn-panel .device-service-body { padding:16px 18px; }
#device-sn-panel .device-service-body > * { min-width:0; }
#device-sn-panel #sn-records-page { gap:8px; }
.sn-page-intro { padding:0 0 12px; line-height:1.55; }
.sn-page-intro h3 { font-size:17px; color:#0f172a; margin-bottom:5px; }
.sn-page-intro p { margin:0; color:#475569; max-width:88ch; }
.sn-record-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:0 0 14px; }
.sn-record-summary article { border:1px solid #dbe4f0; border-radius:12px; background:#fff; padding:16px; }
.sn-record-summary strong { display:block; font-size:25px; color:#0f172a; margin-top:8px; font-variant-numeric:tabular-nums; }
.sn-record-summary span { color:#475569; font-size:12px; }
.sn-record-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; }
.sn-record-filters label:first-child { flex:1 1 300px; }
.sn-record-filters label { flex:0 1 160px; }
.sn-record-filters button { min-height:40px; }
.sn-record-table-wrap { overflow-x:auto; margin-top:0; border:1px solid #dbe4f0; border-radius:12px; background:#fff; }
.sn-record-table { min-width:900px; table-layout:fixed; }
.sn-record-table th { background:#f1f5f9; color:#334155; padding:14px 12px; }
.sn-record-table td { padding:18px 12px; line-height:1.5; overflow-wrap:anywhere; }
.sn-record-table tbody tr:hover { background:#f8fbff; }
.sn-record-table th:nth-child(1) { width:23%; }
.sn-record-table th:nth-child(2) { width:23%; }
.sn-record-table th:nth-child(3) { width:23%; }
.sn-record-table th:nth-child(4) { width:21%; }
.sn-record-table th:nth-child(5) { width:10%; }
.sn-record-table .sn-value { display:block; color:#0f172a; font-weight:750; font-size:14px; }
.sn-record-table small { display:block; color:#64748b; font-size:12px; margin-top:6px; }
.sn-status { display:inline-block; font-size:12px; font-weight:700; border-radius:6px; padding:4px 8px; background:#eff6ff; color:#1e40af; margin:5px 0; }
.sn-status.review { background:#fff7ed; color:#9a3412; }
.sn-status.shipped { background:#ecfdf5; color:#047857; }
.sn-missing { color:#9a3412; }
.sn-record-pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
.sn-record-pagination .toolbar { gap:8px; }
.sn-record-empty { padding:40px 24px; text-align:center; line-height:1.6; color:#475569; }
.sn-source-note { color:#475569; background:#f8fafc; border-left:3px solid #94a3b8; padding:12px 16px; margin:18px 0; font-size:13px; line-height:1.6; }
.sn-record-error { padding:20px; color:#9f1239; background:#fff1f2; border:1px solid #fecdd3; border-radius:10px; }
.sn-record-detail { margin-top:16px; padding:20px; border:1px solid #dbe4f0; background:white; border-radius:12px; }
.sn-record-detail h4 { margin:20px 0 10px; color:#334155; }
.sn-record-detail dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.sn-record-detail dl div { min-width:0; border-bottom:1px solid #e2e8f0; padding-bottom:12px; }
.sn-record-detail dt { color:#64748b; font-size:12px; margin-bottom:6px; }
.sn-record-detail dd { margin:0; overflow-wrap:anywhere; line-height:1.5; }
#device-sn-panel .sn-directory-detail .sn-directory-view-switch { margin:12px 0; }
#device-sn-panel .sn-manual-firmware { border:1px solid #bfdbfe; border-radius:12px; background:#f8fbff; padding:18px; margin-bottom:18px; }
#device-sn-panel .sn-manual-firmware .result-title { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
#device-sn-panel .sn-manual-firmware h4 { margin:0 0 6px; color:#1e40af; }
#device-sn-panel .sn-manual-firmware p { margin:6px 0; color:#475569; line-height:1.6; }
#device-sn-panel .sn-manual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
#device-sn-panel .sn-manual-grid label { min-width:0; }
#device-sn-panel .sn-manual-grid input, #device-sn-panel .sn-manual-grid textarea { box-sizing:border-box; width:100%; min-width:0; }
#device-sn-panel .sn-manual-grid small { display:block; margin-top:6px; color:#64748b; }
#device-sn-panel .sn-manual-confirm { display:flex; align-items:flex-start; gap:10px; line-height:1.6; margin:18px 0; text-transform:none; }
#device-sn-panel .sn-manual-confirm input { width:18px; height:18px; flex:0 0 18px; margin-top:3px; }
#device-sn-panel .sn-manual-result:not(:empty) { margin-top:14px; color:#166534; overflow-wrap:anywhere; }
#device-sn-panel .sn-manual-evidence { margin-top:12px; border-top:1px solid #cbd5e1; padding-top:8px; }
#device-sn-panel .sn-manual-evidence strong { display:block; }
#device-sn-panel .sn-manual-history-item { border:1px solid #dbe4f0; border-radius:10px; padding:16px; margin-top:12px; overflow-wrap:anywhere; }
#device-sn-panel .sn-manual-history-item > span { display:block; margin-top:6px; color:#475569; font-size:12px; }
@media (max-width:760px) {
  #device-sn-panel .sn-manual-grid { grid-template-columns:minmax(0,1fr); }
  #device-sn-panel .panel-head { align-items:start; flex-wrap:wrap; }
  #device-sn-panel .device-service-body { padding:12px; }
  #device-sn-panel .sn-management-card { padding:14px; }
  #device-sn-panel .device-service-actions,
  #device-sn-panel .form-row,
  #device-sn-panel .shipping-scan-grid,
  #device-sn-panel .on-set-grid { grid-template-columns:minmax(0,1fr); }
  #device-sn-panel .device-workspace-tabs { gap:6px; padding:10px; }
  .sn-record-table { min-width:0; }
  .sn-record-table thead { display:none; }
  .sn-record-table tr { display:block; padding:16px; border-bottom:1px solid #cbd5e1; }
  .sn-record-table td { display:block; padding:8px 0; border:0; }
  .sn-record-table td::before { content:attr(data-label); display:block; font-size:11px; font-weight:700; color:#64748b; margin-bottom:6px; }
  .sn-record-table td:last-child::before { display:none; }
  .sn-record-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sn-record-filters label { flex:1 1 120px; }
  .sn-record-detail dl { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px) {
  #device-sn-panel .device-workspace-tabs { grid-template-columns:1fr; }
  #device-sn-panel .sn-supplementary-tab-group { grid-column:auto; }
  #device-sn-panel #device-sn-table { max-height:min(520px,max(180px,calc(100vh - 360px))); }
}
