@import url("/css/base.css");

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "topbar"
    "sidebar"
    "main";
  grid-template-rows: auto auto 1fr;
}

.access-tabs { display: flex; gap: 8px; margin-top: 22px; }
.access-tabs button { border: 1px solid #cbd5e1; background: #fff; color: #334155; padding: 9px 18px; border-radius: 8px; cursor: pointer; }
.access-tabs button.active { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.access-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 18px; }
.access-profile-card { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 18px; box-shadow: 0 1px 3px rgb(15 23 42 / 8%); }
.access-profile-card h3 { margin: 0 0 6px; color: #0f172a; }
.access-profile-card p { color: #64748b; min-height: 38px; }
.access-profile-meta { display: flex; gap: 12px; color: #475569; font-size: 13px; margin: 14px 0; }
.access-profile-card .actions { justify-content: flex-start; }
.access-profile-dialog { width: min(760px, calc(100vw - 40px)); max-height: calc(100vh - 50px); border: 0; border-radius: 12px; padding: 0; box-shadow: 0 20px 50px rgb(15 23 42 / 25%); }
.access-profile-dialog::backdrop { background: rgb(15 23 42 / 45%); }
.access-profile-dialog form { padding: 24px; display: grid; gap: 16px; }
.access-profile-dialog label { display: grid; gap: 6px; color: #334155; font-weight: 600; }
.access-profile-dialog input, .access-profile-dialog textarea { border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; font: inherit; }
.access-profile-dialog fieldset { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; }
.access-profile-dialog legend { color: #0f172a; font-weight: 700; padding: 0 6px; }
.tab-count { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:5px; padding:0 6px; border-radius:999px; background:#b42318; color:#fff; font-size:11px; }
.request-kicker { margin:0 0 4px; color:#64748b; font-size:11px; font-weight:800; letter-spacing:.08em; }
.request-summary { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
.request-summary div { padding:12px 14px; border-bottom:1px solid #e2e8f0; }
.request-summary div:nth-last-child(-n+2) { border-bottom:0; }
.request-summary span { display:block; margin-bottom:3px; color:#64748b; font-size:12px; }
.request-summary strong { color:#0f172a; font-size:14px; }
.request-decision-actions { display:flex; justify-content:flex-end; gap:8px; }
.request-dialog .button-danger { margin-right:auto; }
@media(max-width:560px){.request-summary{grid-template-columns:1fr}.request-summary div:nth-last-child(2){border-bottom:1px solid #e2e8f0}.request-decision-actions{flex-direction:column-reverse}.request-dialog .button-danger{margin-right:0}}
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; }
.permission-grid label, .profile-user-list label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.permission-grid input, .profile-user-list input { width: auto; }
.profile-user-list { max-height: 190px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.permission-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.permission-tags span { background: #eff6ff; color: #1e3a8a; border-radius: 999px; padding: 4px 8px; font-size: 12px; }

.admin-topbar {
  grid-area: topbar;
  min-height: var(--header-height);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 0 24px;
  background: var(--color-surface);
  border-top: 4px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.admin-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  color: var(--color-primary-dark);
  font-size: 14px;
  font-weight: 600;
}

.admin-brand img {
  width: 86px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}

.admin-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.nav-link.active,
.nav-link:hover {
  color: var(--color-primary-dark);
  background: #f7f8fa;
  border-color: var(--color-border);
  border-bottom-color: var(--color-primary);
}

.nav-actions .auth-user {
  margin-left: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.admin-sidebar {
  grid-area: sidebar;
  display: flex;
  overflow-x: auto;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-border);
}

.admin-sidebar a {
  flex: 0 0 auto;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
}

.admin-sidebar a.active,
.admin-sidebar a:hover {
  color: var(--color-primary-dark);
  background: var(--color-surface);
  border-left-color: var(--color-primary);
}

.admin-sidebar .return-link {
  color: var(--color-primary);
  font-weight: 600;
}

.admin-main {
  grid-area: main;
  min-width: 0;
  padding: 22px var(--space-4) 36px;
}

.admin-heading {
  margin-bottom: 18px;
}

.admin-heading h1,
.computer-hero h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.admin-heading p,
.computer-hero p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 22px;
  border: 1px solid var(--color-border);
  background: var(--color-border);
}

.metric {
  min-height: 84px;
  padding: 14px;
  background: var(--color-surface);
}

.metric span {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.admin-section,
.computer-hero,
.filter-bar {
  margin-bottom: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.admin-section,
.computer-hero {
  padding: var(--space-4);
  min-width: 0;
}

.admin-section h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.section-title-row h2 {
  margin: 0;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.agent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.agent-actions .danger-button {
  border-color: rgba(180, 35, 24, 0.65);
  color: var(--color-danger);
}

.agent-feedback {
  margin: 0 0 var(--space-3);
  padding: 10px 12px;
  border-left: 3px solid var(--color-primary);
  background: #f7f8fa;
  color: var(--color-text-muted);
  font-size: 13px;
}

.agent-feedback.success {
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.agent-feedback.error {
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

.health-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.health-status.compact {
  min-height: 20px;
  font-size: 12px;
}

.health-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8a94a3;
}

.health-ok .health-dot {
  background: #2f7d4e;
}

.health-warn .health-dot {
  background: #a66a00;
}

.health-critical .health-dot {
  background: #b42318;
}

.health-na .health-dot,
.health-unknown .health-dot {
  background: #7d8794;
}

.hd-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #f7f8fa;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hd-status.hd-available,
.hd-metric.hd-available {
  border-color: #54b8c4;
  background: #dff6f8;
}

.hd-status.hd-in-use,
.hd-metric.hd-in-use {
  border-color: #e2a72e;
  background: #fff0c9;
}

.hd-status.hd-client,
.hd-metric.hd-client {
  border-color: #53ad74;
  background: #dcf4e5;
}

.hd-status.hd-problem,
.hd-metric.hd-problem {
  border-color: #df7164;
  background: #ffe1dd;
}

.hd-status.hd-maintenance,
.hd-metric.hd-maintenance {
  border-color: #d3d8df;
  background: #f7f8fa;
}

.hd-status.hd-retired,
.hd-metric.hd-retired {
  border-color: #c7ccd4;
  background: #f1f3f5;
  color: var(--color-text-muted);
}

.hd-metric strong:first-child {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.hd-metric {
  position: relative;
}

.hd-metric.hd-total {
  background: #e8eef8;
}

.hd-metric.hd-capacity {
  background: #eee8fa;
}

.hd-metric.hd-utilization {
  background: #e3ebfb;
}

.hd-metric.hd-total strong { color: #2f4f83; }
.hd-metric.hd-available strong { color: #176f79; }
.hd-metric.hd-in-use strong { color: #8b5c00; }
.hd-metric.hd-client strong { color: #246d40; }
.hd-metric.hd-problem strong { color: #a72f25; }
.hd-metric.hd-capacity strong { color: #5b3d98; }
.hd-metric.hd-utilization strong { color: #294f99; }

.clickable-row {
  cursor: pointer;
}

.row-actions {
  white-space: nowrap;
}

.filter-action-field {
  justify-content: end;
}

.filter-action-field button {
  min-height: 38px;
}

.hd-primary-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.hd-primary-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.migration-picker {
  position: relative;
  align-content: start;
}

.migration-picker > small {
  min-height: 34px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.migration-picker > small.selected {
  color: var(--color-success);
  font-weight: 600;
}

.migration-picker-results {
  position: absolute;
  top: 66px;
  right: 0;
  left: 0;
  z-index: 3;
  max-height: 230px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.migration-picker-results[hidden] {
  display: none;
}

.migration-picker-results > button {
  display: grid;
  width: 100%;
  min-height: 0;
  gap: 3px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
}

.migration-picker-results > button:last-child {
  border-bottom: 0;
}

.migration-picker-results > button:hover,
.migration-picker-results > button:focus-visible {
  background: var(--color-primary-soft);
}

.migration-picker-results > button strong {
  color: var(--color-primary-dark);
}

.migration-picker-results > button span,
.migration-picker-results > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.migration-picker-results > p {
  padding: 9px 10px;
}

[data-admin-page="hds"] .filter-action-field {
  grid-column: 1 / -1;
  align-items: flex-end;
}

[data-admin-page="hds"] .hd-primary-actions {
  width: 100%;
  justify-content: flex-end;
}

.hd-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.36);
}

.hd-modal-backdrop[hidden] {
  display: none;
}

.hd-modal {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.22);
}

.hd-modal form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.hd-modal-header,
.hd-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hd-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.icon-button {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
}

.hd-modal-body {
  display: grid;
  gap: var(--space-3);
}

.hd-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.hd-form-grid label,
.hd-modal label {
  display: grid;
  gap: 6px;
}

.hd-form-span {
  grid-column: 1 / -1;
}

.hd-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: var(--space-2);
}

.hd-modal-summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.hd-current-mini {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-2);
  margin: 0;
  padding: 10px 12px;
  background: #f7f8fa;
  border-left: 3px solid var(--color-primary);
}

.hd-modal-feedback {
  margin: 0;
  padding: 10px 12px;
  color: var(--color-danger);
  background: #fff5f3;
  border-left: 3px solid var(--color-danger);
  font-size: 13px;
}

.hd-modal label [data-required-marker] {
  display: none;
  color: var(--color-danger);
}

.hd-modal label.required-field [data-required-marker] {
  display: inline;
}

.hd-timeline {
  display: grid;
  gap: 0;
  max-width: 920px;
}

.hd-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  padding: 4px 0 24px;
}

.hd-timeline-item:last-child {
  padding-bottom: 4px;
}

.hd-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: var(--color-border);
}

.hd-history-marker {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 8px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
}

.hd-history-content {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.hd-timeline-item:last-child .hd-history-content {
  padding-bottom: 0;
  border-bottom: 0;
}

.hd-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  max-width: 760px;
}

.hd-history-header strong {
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 600;
}

.hd-history-type {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #f7f8fa;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.hd-history-actor {
  margin: 7px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.hd-history-block {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.hd-history-block h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
}

.hd-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 340px));
  gap: 12px 32px;
  align-items: start;
}

.hd-history-change {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-width: 340px;
}

.hd-history-change strong {
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 600;
}

.hd-history-change p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.hd-history-old,
.hd-history-arrow {
  color: var(--color-text-muted);
}

.hd-history-new {
  color: var(--color-text);
  font-weight: 600;
}

.hd-history-meta {
  display: grid;
  grid-template-columns: minmax(90px, max-content) minmax(0, 1fr);
  gap: 7px 18px;
  margin: 0;
  max-width: 760px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.hd-history-meta dd {
  color: var(--color-text);
}

.hd-history-no-change {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.hardware-health-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--space-4);
  margin-bottom: var(--space-3);
}

.hardware-health-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.hardware-health-summary span {
  color: var(--color-text-muted);
  font-size: 13px;
}

.hardware-health-summary strong {
  font-size: 13px;
  font-weight: 600;
}

.health-reasons {
  margin: 0 0 var(--space-3);
  padding-left: 18px;
  color: var(--color-text);
  font-size: 13px;
}

.health-details {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.health-details summary {
  cursor: pointer;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 600;
}

.muted-cell {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
}

.installer-section {
  max-width: 860px;
}

.installer-details {
  margin-bottom: 22px;
}

.installer-hash {
  font-size: 12px;
}

.installer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.installer-footer p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.installer-footer button {
  flex: 0 0 auto;
}

.admin-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--color-border);
}

table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.dense-table {
  min-width: 1280px;
}

th,
td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

th {
  background: #f9fafb;
  color: #303846;
  font-weight: 600;
}

.table-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 120ms ease;
}

.table-sort:hover,
.table-sort:focus-visible,
.table-sort.active {
  color: var(--color-primary-dark);
  background: transparent;
}

.table-sort span {
  min-width: 10px;
  color: var(--color-primary);
  font-size: 14px;
}

table[aria-busy="true"] .table-sort {
  pointer-events: none;
}

.table-sort:not(.active) span::before {
  content: "↕";
  opacity: 0;
  transition: opacity 120ms ease;
}

.table-sort:not(.active):hover span::before,
.table-sort:not(.active):focus-visible span::before {
  opacity: 1;
}

th:has(.table-sort:hover),
th:has(.table-sort:focus-visible) {
  background: #eef2f7;
}

td {
  color: var(--color-text);
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover td {
  background: #fbfcfd;
}

td a,
.section-title-row a {
  color: var(--color-primary);
  font-weight: 600;
}

.filter-bar {
  display: grid;
  gap: var(--space-3);
  padding: 14px;
}

.filter-bar.simple {
  border: 0;
  padding: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  color: #303846;
  font-size: 12px;
  font-weight: 500;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 13px;
}

.section-title-row button,
.pagination button,
td button {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary-dark);
}

.section-title-row button:hover,
.pagination button:hover,
td button:hover {
  background: #f7f8fa;
}

.section-title-row .primary-button {
  border-color: var(--color-primary-dark);
  background: var(--color-primary);
  color: var(--color-surface);
}

.section-title-row .primary-button:hover {
  background: var(--color-primary-dark);
}

td button {
  min-height: 30px;
  margin-right: 6px;
  padding: 6px 9px;
  font-size: 12px;
}

td button[data-action="enabled"][data-enabled="true"] {
  border-color: rgba(180, 35, 24, 0.65);
  color: var(--color-danger);
}

.admin-loading,
.empty-state,
.error-state {
  margin: 0;
  padding: var(--space-3);
  color: var(--color-text-muted);
}

.error-state {
  color: var(--color-danger);
}

.back-link {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
}

.eyebrow {
  margin-bottom: 6px !important;
  color: var(--color-primary) !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.overview-grid,
.definition-list {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: 9px var(--space-4);
  margin: var(--space-4) 0 0;
}

dt {
  color: var(--color-text-muted);
  font-size: 13px;
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.copyable {
  user-select: all;
  font-family: Consolas, "Courier New", monospace;
}

.detail-grid {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.label-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.label-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 18px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.label-summary div {
  padding: 14px;
  background: var(--color-surface);
}

.label-summary dd {
  margin-top: 6px;
  color: var(--color-primary-dark);
  font-size: 24px;
  font-weight: 600;
}

.label-form {
  display: grid;
  gap: 12px;
  align-items: end;
}

.label-form label {
  display: grid;
  gap: 6px;
}

.label-result {
  margin-top: 16px;
}

.label-help {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.reprint-selection {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.reprint-selection[hidden] {
  display: none;
}

.reprint-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reprint-list {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.reprint-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  background: #f9fafb;
}

.reprint-list li span,
.reprint-list li small {
  display: block;
}

.reprint-list li small {
  margin-top: 2px;
  color: var(--color-text-muted);
}

.label-print-area:empty {
  display: none;
}

.label-print-area {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.label-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.label-preview-header h2,
.label-preview-header p {
  margin: 0;
}

.label-preview-header h2 {
  font-size: 16px;
}

.label-preview-header p {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.label-history-section {
  margin-top: 18px;
}

[data-admin-page="hd-labels"] .app-dialog[data-variant="danger"] {
  border-top: 1px solid var(--color-border-strong);
}

.print-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.label-grid {
  --label-width: 63.5mm;
  --label-height: 38.1mm;
  --label-gap-x: 2mm;
  --label-gap-y: 2mm;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--label-width), 1fr));
  gap: var(--label-gap-y) var(--label-gap-x);
  padding: 12px;
  border: 1px solid var(--color-border);
  background: #f7f8fa;
}

.physical-label {
  width: var(--label-width);
  height: var(--label-height);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 3mm;
  border: 1px dashed #aeb4bc;
  background: #fff;
  color: #111;
}

.physical-label strong {
  font-size: 10pt;
}

.physical-label b {
  grid-row: 2;
  font-size: 18pt;
}

.label-qr {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 28mm;
  height: 28mm;
}

.label-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-entry {
  max-width: 520px;
  margin: 12vh auto;
  padding: 24px;
}

@media print {
  @page { size: A4; margin: 8mm; }
  body { margin: 0; background: #fff; }
  .label-admin-shell { display: block; }
  .label-admin-shell > .admin-topbar,
  .label-admin-shell > .admin-sidebar,
  .label-admin-main > :not(.label-print-area),
  .print-toolbar { display: none !important; }
  .label-admin-main { padding: 0; }
  .label-print-area { display: block; margin: 0; }
  .label-print-area { padding: 0; border: 0; box-shadow: none; }
  .label-preview-header { display: none; }
  .label-grid { grid-template-columns: repeat(3, var(--label-width)); justify-content: center; }
  .label-grid { padding: 0; border: 0; background: #fff; }
  .physical-label { break-inside: avoid; border-color: transparent; }
}

.mini-table {
  min-width: 0;
}

.mini-table th,
.mini-table td {
  overflow-wrap: anywhere;
}

.changes-list {
  display: grid;
  gap: var(--space-2);
}

.change-item {
  display: grid;
  gap: var(--space-1);
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.change-item:last-child {
  border-bottom: 0;
}

.change-item strong {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.change-item span {
  color: var(--color-text-muted);
  font-size: 13px;
}

@media (min-width: 760px) {
  .admin-shell {
    grid-template-columns: 184px minmax(0, 1fr);
    grid-template-areas:
      "topbar topbar"
      "sidebar main";
  }

  .admin-sidebar {
    display: block;
    padding: 14px 10px;
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
  }

  .admin-sidebar a {
    display: block;
    margin-bottom: var(--space-1);
  }

  .admin-sidebar .return-link {
    margin-top: 18px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .admin-main {
    padding: 28px;
  }

  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .filter-bar {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    align-items: end;
  }

  .filter-bar .wide-field {
    grid-column: span 2;
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1160px) {
  .metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .filter-bar {
    grid-template-columns: repeat(6, minmax(140px, 1fr));
  }

  [data-admin-page="hds"] .filter-bar .wide-field {
    grid-column: span 1;
  }
}

@media (max-width: 760px) {
  .admin-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
    padding: 10px var(--space-4);
  }

  .nav-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-link {
    min-height: 34px;
    padding: 0 10px;
  }

  .nav-actions .auth-user {
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .admin-brand {
    width: 100%;
  }

  .admin-brand img {
    width: 78px;
  }

  .nav-actions {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .nav-actions .auth-user {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    justify-content: space-between;
  }

  .auth-user span {
    text-align: left;
  }

  .admin-heading h1,
  .computer-hero h1 {
    font-size: 22px;
  }

  .overview-grid,
  .definition-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .hardware-health-summary {
    grid-template-columns: 1fr;
  }

  .hd-form-grid,
  .hd-current-mini {
    grid-template-columns: 1fr;
  }

  .hd-timeline-item {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
  }

  .hd-history-header {
    flex-direction: column;
    gap: 8px;
  }

  .hd-history-grid,
  .hd-history-meta {
    grid-template-columns: 1fr;
  }

  .section-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .section-actions {
    justify-content: stretch;
  }

  .section-actions button {
    flex: 1 1 100%;
  }

  .installer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .label-preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .print-toolbar button {
    flex: 1 1 auto;
  }

  [data-admin-page="hds"] .hd-primary-actions {
    flex-direction: column;
  }

  [data-admin-page="hds"] .hd-primary-actions button {
    width: 100%;
  }
}