:root {
  color-scheme: dark;
  --accent: #2563eb;
  --accent-bright: #3b82f6;
  --accent-dark: #1d4ed8;
  --gold: #d9ab43;
  --ink: #13202a;
  --muted: #63717b;
  --line: #d9e1e4;
  --danger: #b83232;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.wipe-advanced-workflow {
  display: none !important;
}

#deviceDetailsPage #openWipeConfirmButton[hidden] {
  display: none !important;
}

.wipe-unavailable-copy {
  max-width: 62ch;
  margin: 0;
  color: var(--muted-text, #5d7185);
  line-height: 1.55;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  background: #08141a;
  color: #fff;
}

body.is-boot-loading {
  overflow: hidden;
}

.boot-loading-page {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: #08141a;
}

.boot-loading-page[hidden] {
  display: none;
}

.boot-skeleton-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
  color: #eef7ff;
}

.boot-skeleton-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 26px 18px;
  border-right: 1px solid rgba(99, 170, 255, 0.16);
  background: rgba(5, 18, 24, 0.96);
}

.boot-skeleton-sidebar span,
.boot-skeleton-sidebar i,
.boot-skeleton-topbar span,
.boot-skeleton-kpis i,
.boot-skeleton-grid i,
.boot-skeleton-table span {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(99, 170, 255, 0.14);
}

.boot-skeleton-sidebar span::after,
.boot-skeleton-sidebar i::after,
.boot-skeleton-topbar span::after,
.boot-skeleton-kpis i::after,
.boot-skeleton-grid i::after,
.boot-skeleton-table span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: skeleton-shimmer 1.25s ease-in-out infinite;
}

.boot-skeleton-sidebar span {
  width: 170px;
  height: 40px;
  margin-bottom: 14px;
}

.boot-skeleton-sidebar i {
  width: 86%;
  height: 34px;
}

.boot-skeleton-sidebar i:nth-child(4),
.boot-skeleton-sidebar i:nth-child(6) {
  width: 68%;
}

.boot-skeleton-main {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 18px;
}

.boot-skeleton-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid rgba(99, 170, 255, 0.16);
  border-radius: 8px;
  background: rgba(8, 28, 36, 0.86);
}

.boot-skeleton-topbar strong,
.boot-skeleton-topbar small {
  display: block;
}

.boot-skeleton-topbar strong {
  color: #f5fbff;
  font-size: 1rem;
}

.boot-skeleton-topbar small {
  margin-top: 5px;
  color: rgba(220, 238, 248, 0.74);
}

.boot-skeleton-topbar span {
  width: min(320px, 36vw);
  height: 38px;
}

.boot-skeleton-kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.boot-skeleton-kpis i {
  min-height: 112px;
}

.boot-skeleton-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
}

.boot-skeleton-grid i {
  min-height: 218px;
}

.boot-skeleton-table {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(99, 170, 255, 0.16);
  border-radius: 8px;
  background: rgba(8, 28, 36, 0.86);
}

.boot-skeleton-table span {
  height: 42px;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-skeleton-sidebar span::after,
  .boot-skeleton-sidebar i::after,
  .boot-skeleton-topbar span::after,
  .boot-skeleton-kpis i::after,
  .boot-skeleton-grid i::after,
  .boot-skeleton-table span::after {
    animation: none;
  }
}

/* Agent Management: Model C diagnostics with Model B deployment controls. */
#agentManagementPage .agent-operations {
  --agent-surface: rgba(7, 27, 36, 0.92);
  --agent-surface-raised: rgba(10, 35, 46, 0.92);
  --agent-border: rgba(129, 185, 202, 0.2);
  --agent-text: #f3f8fa;
  --agent-muted: #92acb8;
  --agent-blue: #2f75ff;
  --agent-green: #20c985;
  --agent-amber: #f5aa2c;
  --agent-red: #f05b6c;
  display: grid;
  gap: 12px;
  color: var(--agent-text);
}

#agentManagementPage .agent-ops-heading,
#agentManagementPage .agent-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

#agentManagementPage .agent-ops-heading h2,
#agentManagementPage .agent-panel-heading h3 {
  margin: 0;
  color: var(--agent-text);
  letter-spacing: 0;
}

#agentManagementPage .agent-ops-heading h2 {
  font-size: 1.55rem;
}

#agentManagementPage .agent-panel-heading h3 {
  font-size: 0.92rem;
}

#agentManagementPage .agent-ops-heading p,
#agentManagementPage .agent-panel-heading p {
  margin: 4px 0 0;
  color: var(--agent-muted);
  font-size: 0.73rem;
}

#agentManagementPage .agent-ops-heading-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

#agentManagementPage .agent-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--agent-border);
  border-radius: 6px;
  background: var(--agent-surface);
  color: var(--agent-text);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

#agentManagementPage .agent-icon-action:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 117, 255, 0.62);
}

#agentManagementPage .agent-icon-action.primary-action {
  background: var(--agent-blue);
  border-color: var(--agent-blue);
  color: #fff;
}

#agentManagementPage [data-user-icon] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

#agentManagementPage [data-user-icon] svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#agentManagementPage .agent-ops-refresh {
  justify-self: end;
  width: fit-content;
  height: auto;
  min-height: 34px;
  margin-top: -8px;
  padding: 5px 7px;
  border: 1px solid var(--agent-border);
  border-radius: 6px;
  background: var(--agent-surface);
}

#agentManagementPage .agent-ops-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
}

#agentManagementPage .agent-ops-summary .device-summary-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 88px;
  padding: 13px;
  border: 1px solid var(--agent-border);
  border-radius: 7px;
  background: var(--agent-surface);
}

#agentManagementPage .agent-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background: rgba(47, 117, 255, 0.12);
  color: var(--agent-blue);
}

#agentManagementPage .agent-summary-icon svg {
  width: 21px;
  height: 21px;
}

#agentManagementPage .device-summary-card.warn .agent-summary-icon {
  background: rgba(245, 170, 44, 0.13);
  color: var(--agent-amber);
}

#agentManagementPage .device-summary-card.risk .agent-summary-icon {
  background: rgba(240, 91, 108, 0.13);
  color: var(--agent-red);
}

#agentManagementPage .agent-ops-summary .device-summary-card div > span,
#agentManagementPage .agent-ops-summary .device-summary-card small {
  display: block;
  color: var(--agent-muted);
  font-size: 0.68rem;
}

#agentManagementPage .agent-ops-summary .device-summary-card strong {
  display: block;
  margin: 4px 0;
  color: var(--agent-text);
  font-size: 1.18rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

#agentManagementPage .agent-ops-main {
  display: grid;
  grid-template-columns: minmax(680px, 1fr) minmax(300px, 360px);
  gap: 12px;
  align-items: start;
}

#agentManagementPage .agent-ops-main > .panel {
  border: 1px solid var(--agent-border);
  border-radius: 7px;
  background: var(--agent-surface);
  color: var(--agent-text);
  box-shadow: none;
}

#agentManagementPage .agent-table-panel {
  grid-column: 1;
}

#agentManagementPage .agent-side-panel {
  grid-column: 2;
  grid-row: 1;
  padding: 14px;
}

#agentManagementPage .agent-failure-panel {
  grid-column: 1;
  padding: 14px;
}

#agentManagementPage .agent-deployment-panel {
  grid-column: 2;
  padding: 14px;
}

#agentManagementPage .agent-command-history {
  grid-column: 1 / -1;
}

#agentManagementPage .agent-panel-heading {
  padding: 14px;
  border-bottom: 1px solid var(--agent-border);
}

#agentManagementPage .agent-side-panel > .agent-panel-heading,
#agentManagementPage .agent-failure-panel > .agent-panel-heading,
#agentManagementPage .agent-deployment-panel > .agent-panel-heading {
  margin: -14px -14px 12px;
}

#agentManagementPage .agent-count-badge {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(47, 117, 255, 0.14);
  color: #77a5ff;
  font-size: 0.68rem;
  font-weight: 800;
}

#agentManagementPage .agent-fleet-toolbar {
  padding: 10px 12px;
  border-bottom: 1px solid var(--agent-border);
  background: var(--agent-surface-raised);
}

#agentManagementPage .agent-fleet-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#agentManagementPage .agent-table-scroll {
  overflow: auto;
}

#agentManagementPage .agent-table-panel .devices-table {
  min-width: 1020px;
}

#agentManagementPage .agent-table-panel .devices-table th,
#agentManagementPage .agent-table-panel .devices-table td,
#agentManagementPage .agent-command-history .devices-table th,
#agentManagementPage .agent-command-history .devices-table td {
  border-color: var(--agent-border);
}

#agentManagementPage .agent-table-panel .devices-table td {
  vertical-align: middle;
}

#agentManagementPage .agent-pagination {
  padding: 10px 12px;
  border-top: 1px solid var(--agent-border);
}

#agentManagementPage .agent-pagination-controls,
#agentManagementPage .agent-page-buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}

#agentManagementPage .agent-pagination-controls label {
  color: var(--agent-muted);
}

#agentManagementPage .agent-pagination-controls select {
  min-height: 30px;
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--agent-border);
  border-radius: 5px;
  background: var(--agent-surface-raised);
  color: var(--agent-text);
}

#agentManagementPage .agent-pagination-controls button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

#agentManagementPage .agent-pagination-controls button.active {
  border-color: var(--agent-green);
  background: rgba(32, 201, 133, 0.14);
  color: var(--agent-green);
}

#agentManagementPage .agent-pagination-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

#agentManagementPage .agent-page-ellipsis {
  min-width: 18px;
  text-align: center;
}

@media (max-width: 720px) {
  #agentManagementPage .agent-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  #agentManagementPage .agent-pagination-controls {
    max-width: 100%;
    overflow-x: auto;
  }
}

#agentManagementPage .agent-device-link {
  border: 0;
  background: transparent;
  color: #76a5ff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
}

#agentManagementPage .agent-cell-primary {
  color: var(--agent-text);
}

#agentManagementPage .agent-table-panel .agent-result-text {
  max-width: 190px;
  color: var(--agent-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

#agentManagementPage .agent-diagnostic-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--agent-border);
  border-radius: 5px;
  background: transparent;
  color: #87adff;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
}

#agentManagementPage .agent-diagnostic-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(32, 201, 133, 0.12);
  color: var(--agent-green);
}

#agentManagementPage .agent-side-panel .remote-session-details {
  margin: 0 0 12px;
}

#agentManagementPage .agent-side-panel .remote-session-details dt {
  color: var(--agent-muted);
}

#agentManagementPage .agent-side-panel .remote-session-details dd {
  color: var(--agent-text);
}

#agentManagementPage .agent-diagnostic-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#agentManagementPage .agent-diagnostic-actions button {
  min-height: 35px;
}

#agentManagementPage .agent-device-removal {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--agent-border);
}

#agentManagementPage .agent-device-removal h4,
#agentManagementPage .agent-device-removal p {
  margin: 0;
}

#agentManagementPage .agent-device-removal h4 {
  font-size: 0.76rem;
}

#agentManagementPage .agent-device-removal p {
  margin-top: 3px;
  color: var(--agent-muted);
  font-size: 0.72rem;
}

#agentManagementPage .agent-device-removal-actions {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

#agentManagementPage .agent-device-removal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 35px;
  padding: 7px 10px;
  border: 1px solid var(--agent-border);
  border-radius: 5px;
  background: transparent;
  color: var(--agent-text);
}

#agentManagementPage .agent-device-removal-actions button:hover {
  border-color: var(--agent-green);
}

#agentManagementPage .agent-device-removal-actions .danger-action {
  border-color: rgba(239, 68, 68, 0.45);
  color: #ef4444;
}

#agentManagementPage .agent-device-timeline {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--agent-border);
}

#agentManagementPage .agent-device-timeline h4 {
  margin: 0 0 10px;
  font-size: 0.76rem;
}

#agentManagementPage #agentDeviceTimeline {
  display: grid;
  gap: 0;
}

#agentManagementPage #agentDeviceTimeline p {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 6px;
  margin: 0;
  padding: 0 0 15px;
  color: var(--agent-text);
  font-size: 0.69rem;
}

#agentManagementPage #agentDeviceTimeline p::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 2px;
  width: 1px;
  background: var(--agent-border);
}

#agentManagementPage #agentDeviceTimeline p:last-child::after {
  display: none;
}

#agentManagementPage #agentDeviceTimeline p em {
  grid-column: 2 / -1;
  color: var(--agent-muted);
  font-size: 0.65rem;
  font-style: normal;
}

#agentManagementPage .agent-timeline-dot {
  width: 9px;
  height: 9px;
  margin-top: 2px;
  border: 2px solid var(--agent-surface);
  border-radius: 50%;
  background: var(--agent-green);
  z-index: 1;
}

#agentManagementPage .agent-timeline-dot.warn { background: var(--agent-amber); }
#agentManagementPage .agent-timeline-dot.risk { background: var(--agent-red); }

#agentManagementPage .agent-failure-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 22px;
}

#agentManagementPage .agent-failure-row p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--agent-muted);
  font-size: 0.7rem;
}

#agentManagementPage .agent-failure-row p strong {
  color: var(--agent-text);
}

#agentManagementPage .agent-failure-row > div {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

#agentManagementPage .agent-failure-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--agent-red);
}

#agentManagementPage .agent-empty-state {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--agent-muted);
  font-size: 0.72rem;
}

#agentManagementPage .agent-release-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--agent-border);
  border-radius: 6px;
  background: var(--agent-surface-raised);
}

#agentManagementPage .agent-release-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(47, 117, 255, 0.14);
  color: #7fa8ff;
}

#agentManagementPage .agent-release-card strong,
#agentManagementPage .agent-release-card small {
  display: block;
  overflow-wrap: anywhere;
}

#agentManagementPage .agent-release-card strong {
  font-size: 0.78rem;
}

#agentManagementPage .agent-release-card small,
#agentManagementPage .agent-release-card > span:last-child {
  margin-top: 3px;
  color: var(--agent-muted);
  font-size: 0.64rem;
}

#agentManagementPage .agent-deployment-scope {
  display: flex;
  gap: 16px;
  margin: 12px 0;
  padding: 0;
  border: 0;
}

#agentManagementPage .agent-deployment-scope legend,
#agentManagementPage .agent-deployment-field > span {
  width: 100%;
  margin-bottom: 7px;
  color: var(--agent-muted);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

#agentManagementPage .agent-deployment-scope label,
#agentManagementPage .agent-deployment-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--agent-text);
  font-size: 0.7rem;
}

#agentManagementPage .agent-deployment-scope input,
#agentManagementPage .agent-deployment-check input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
}

#agentManagementPage .agent-deployment-field {
  display: grid;
  margin-bottom: 12px;
}

#agentManagementPage .agent-deployment-field select {
  min-height: 35px;
  border: 1px solid var(--agent-border);
  border-radius: 5px;
  background: var(--agent-surface-raised);
  color: var(--agent-text);
  padding: 0 9px;
}

#agentManagementPage .agent-deployment-check {
  align-items: center;
  margin-bottom: 12px;
}

#agentManagementPage .agent-deployment-check span {
  display: grid;
  gap: 2px;
}

#agentManagementPage .agent-deployment-check small {
  color: var(--agent-muted);
  font-size: 0.64rem;
}

#agentManagementPage .agent-deployment-readiness {
  display: grid;
  border: 1px solid var(--agent-border);
  border-radius: 6px;
}

#agentManagementPage .agent-deployment-readiness p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 9px;
  border-bottom: 1px solid var(--agent-border);
  color: var(--agent-muted);
  font-size: 0.68rem;
}

#agentManagementPage .agent-deployment-readiness p:last-child {
  border-bottom: 0;
}

#agentManagementPage .agent-deployment-readiness strong {
  color: var(--agent-text);
  text-align: right;
}

#agentManagementPage .agent-confirm-deploy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  border: 0;
  border-radius: 6px;
  background: var(--agent-blue);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

#agentManagementPage .agent-confirm-deploy:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#agentManagementPage .agent-command-history .remote-list-head {
  padding: 14px;
  border-bottom: 1px solid var(--agent-border);
}

body[data-theme="light"] #agentManagementPage .agent-operations {
  --agent-surface: #ffffff;
  --agent-surface-raised: #f5f8fb;
  --agent-border: #d5e0e7;
  --agent-text: #102633;
  --agent-muted: #58707d;
}

body[data-theme="light"] #agentManagementPage .agent-ops-main > .panel,
body[data-theme="light"] #agentManagementPage .agent-ops-summary .device-summary-card,
body[data-theme="light"] #agentManagementPage .agent-icon-action,
body[data-theme="light"] #agentManagementPage .agent-ops-refresh {
  box-shadow: 0 8px 22px rgba(29, 58, 77, 0.05);
}

body[data-theme="light"] #agentManagementPage .devices-table th {
  background: #f2f6f9;
  color: #526b78;
}

body[data-theme="light"] #agentManagementPage .agent-table-panel .devices-table tbody tr.selected {
  background: #edf4ff;
}

@media (max-width: 1280px) {
  #agentManagementPage .agent-ops-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #agentManagementPage .agent-ops-main {
    grid-template-columns: minmax(0, 1fr);
  }

  #agentManagementPage .agent-table-panel,
  #agentManagementPage .agent-side-panel,
  #agentManagementPage .agent-failure-panel,
  #agentManagementPage .agent-deployment-panel {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  #agentManagementPage .agent-workspace {
    padding: 10px;
  }

  #agentManagementPage .agent-ops-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #agentManagementPage .agent-ops-heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #agentManagementPage .agent-ops-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #agentManagementPage .agent-ops-summary .device-summary-card {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 78px;
    padding: 10px;
  }

  #agentManagementPage .agent-summary-icon {
    width: 34px;
    height: 34px;
  }

  #agentManagementPage .agent-ops-refresh {
    justify-self: stretch;
    width: auto;
    margin-top: 0;
  }

  #agentManagementPage .agent-failure-list {
    grid-template-columns: 1fr;
  }
}

/* Patch Operations - Model C */
#patchManagementPage .patch-operations-workspace {
  --patch-bg: #eef4f8;
  --patch-panel: #ffffff;
  --patch-panel-soft: #f7fafc;
  --patch-border: #d5e1e9;
  --patch-text: #172433;
  --patch-muted: #64788a;
  --patch-blue: #2563eb;
  --patch-teal: #0f9488;
  --patch-green: #16a765;
  --patch-amber: #e79a11;
  --patch-red: #e34d59;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  color: var(--patch-text);
  background:
    radial-gradient(circle at 72% 0%, rgba(37, 99, 235, 0.09), transparent 34%),
    var(--patch-bg);
}

body.dark-mode #patchManagementPage .patch-operations-workspace,
body[data-theme="dark"] #patchManagementPage .patch-operations-workspace {
  --patch-bg: #071d26;
  --patch-panel: #0a2732;
  --patch-panel-soft: #0d303c;
  --patch-border: #1e4654;
  --patch-text: #e8f1f5;
  --patch-muted: #9db1bb;
  background: #071d26;
}

#patchManagementPage .patch-operations-workspace .panel {
  min-width: 0;
  border: 1px solid var(--patch-border);
  border-radius: 8px;
  background: var(--patch-panel);
  box-shadow: 0 7px 18px rgba(26, 47, 65, 0.06);
}

#patchManagementPage .patch-operations-heading,
#patchManagementPage .patch-section-head,
#patchManagementPage .patch-tab-action,
#patchManagementPage .live-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#patchManagementPage .patch-operations-heading h2 {
  margin: 0 0 3px;
  font-size: 25px;
  letter-spacing: 0;
}

#patchManagementPage .patch-operations-heading p,
#patchManagementPage .patch-section-head p,
#patchManagementPage .patch-tab-action p,
#patchManagementPage .live-session-head p {
  margin: 0;
  color: var(--patch-muted);
}

#patchManagementPage .patch-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

#patchManagementPage .patch-heading-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--patch-muted);
  font-size: 12px;
  font-weight: 700;
}

#patchManagementPage .patch-heading-actions > span b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--patch-muted);
}

#patchManagementPage .patch-heading-actions > span b.live {
  background: var(--patch-green);
  box-shadow: 0 0 0 4px rgba(22, 167, 101, 0.13);
}

#patchManagementPage .icon-text-button,
#patchManagementPage .patch-location-deploy,
#patchManagementPage .patch-tab-action button,
#patchManagementPage .patch-device-toolbar button,
#patchManagementPage .remote-action-grid button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--patch-border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--patch-blue);
  background: var(--patch-panel);
  font-weight: 750;
  cursor: pointer;
}

#patchManagementPage .icon-text-button svg,
#patchManagementPage .patch-tabs svg,
#patchManagementPage .patch-metric-icon svg,
#patchManagementPage .workflow-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#patchManagementPage :is(.icon-text-button, .patch-location-deploy, .patch-tab-action button, .remote-action-grid button).primary-action,
#patchManagementPage #confirmSecurityPushButton {
  border-color: var(--patch-teal);
  color: #fff;
  background: var(--patch-teal);
}

#patchManagementPage button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

#patchManagementPage .patch-overview-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(520px, 1.8fr) minmax(250px, 0.9fr);
  gap: 12px;
}

#patchManagementPage .patch-health-card,
#patchManagementPage .patch-location-compliance {
  padding: 16px;
}

#patchManagementPage .patch-health-card h3,
#patchManagementPage .patch-location-compliance h3,
#patchManagementPage .patch-section-head h3,
#patchManagementPage .patch-tab-action h3,
#patchManagementPage .live-session-head h3,
#patchManagementPage .security-push-summary h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}

#patchManagementPage .patch-health-card small,
#patchManagementPage .patch-location-compliance small {
  color: var(--patch-muted);
}

#patchManagementPage .patch-health-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}

#patchManagementPage .patch-health-ring,
#patchManagementPage .patch-location-donut {
  position: relative;
  display: grid;
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  place-items: center;
  border-radius: 50%;
}

#patchManagementPage .patch-health-ring {
  background: conic-gradient(var(--patch-green) calc(var(--patch-score) * 1%), var(--patch-remainder, #e3ebf0) 0);
}

#patchManagementPage .patch-health-ring::after,
#patchManagementPage .patch-location-donut::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: inherit;
  background: var(--patch-panel);
}

#patchManagementPage .patch-health-ring > *,
#patchManagementPage .patch-location-donut > * {
  position: relative;
  z-index: 1;
}

#patchManagementPage .patch-health-ring strong {
  align-self: end;
  font-size: 32px;
  line-height: 1;
}

#patchManagementPage .patch-health-ring > span {
  align-self: start;
  color: var(--patch-muted);
  font-size: 11px;
}

#patchManagementPage .patch-health-copy {
  display: grid;
  gap: 7px;
}

#patchManagementPage .patch-health-copy strong {
  color: var(--patch-green);
  font-size: 21px;
}

#patchManagementPage .patch-health-ring[data-health-state="critical"] + .patch-health-copy strong {
  color: var(--patch-red);
}

#patchManagementPage .patch-health-copy span {
  color: var(--patch-muted);
  line-height: 1.45;
}

#patchManagementPage .patch-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 1fr));
  overflow: hidden;
}

#patchManagementPage .patch-status-metric {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 154px;
  gap: 5px;
  padding: 16px;
  border-right: 1px solid var(--patch-border);
}

#patchManagementPage .patch-status-metric:last-child {
  border-right: 0;
}

#patchManagementPage .patch-status-metric::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}

#patchManagementPage .patch-status-metric.good { color: var(--patch-green); }
#patchManagementPage .patch-status-metric.warn { color: var(--patch-amber); }
#patchManagementPage .patch-status-metric.scan { color: var(--patch-blue); }
#patchManagementPage .patch-status-metric.risk { color: var(--patch-red); }

#patchManagementPage .patch-status-metric strong {
  color: var(--patch-text);
  font-size: 24px;
}

#patchManagementPage .patch-status-metric > span:not(.patch-metric-icon) {
  color: var(--patch-text);
  font-weight: 700;
}

#patchManagementPage .patch-status-metric small {
  color: var(--patch-muted);
}

#patchManagementPage .patch-metric-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

#patchManagementPage .patch-location-chart-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 15px;
}

#patchManagementPage .patch-location-donut span {
  display: grid;
  text-align: center;
}

#patchManagementPage .patch-location-donut strong {
  font-size: 26px;
}

#patchManagementPage .patch-location-legend {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 6px;
}

#patchManagementPage .patch-location-legend span {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--patch-muted);
  font-size: 11px;
}

#patchManagementPage .patch-location-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--location-color);
}

#patchManagementPage .patch-location-legend b {
  color: var(--patch-text);
}

#patchManagementPage .patch-location-panel {
  overflow: hidden;
}

#patchManagementPage .patch-section-head,
#patchManagementPage .patch-tab-action {
  padding: 12px 14px;
  border-bottom: 1px solid var(--patch-border);
}

#patchManagementPage .patch-table-scroll {
  max-width: 100%;
  overflow: auto;
}

#patchManagementPage .patch-location-table,
#patchManagementPage .patch-operations-table,
#patchManagementPage .patch-tab-view .devices-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--patch-text);
}

#patchManagementPage .patch-location-table th,
#patchManagementPage .patch-location-table td,
#patchManagementPage .patch-operations-table th,
#patchManagementPage .patch-operations-table td,
#patchManagementPage .patch-tab-view .devices-table th,
#patchManagementPage .patch-tab-view .devices-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--patch-border);
  text-align: left;
  vertical-align: middle;
}

#patchManagementPage table th {
  color: var(--patch-muted);
  background: var(--patch-panel-soft);
  font-size: 10px;
  text-transform: uppercase;
}

#patchManagementPage table td {
  font-size: 12px;
}

#patchManagementPage .patch-operations-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 12px;
}

#patchManagementPage .patch-center-panel {
  overflow: hidden;
}

#patchManagementPage .patch-tabs {
  display: flex;
  gap: 3px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--patch-border);
  overflow-x: auto;
}

#patchManagementPage .patch-tabs button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 8px 13px;
  color: var(--patch-muted);
  background: transparent;
  font-weight: 750;
  white-space: nowrap;
}

#patchManagementPage .patch-tabs button.active {
  border-bottom-color: var(--patch-blue);
  color: var(--patch-blue);
}

#patchManagementPage .patch-tab-view[hidden] {
  display: none !important;
}

#patchManagementPage .patch-device-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 150px 145px auto auto;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--patch-border);
}

#patchManagementPage .patch-device-toolbar .device-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

#patchManagementPage .patch-device-toolbar .device-search svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#patchManagementPage .patch-device-toolbar :is(input, select, button) {
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--patch-border);
  border-radius: 5px;
  padding: 7px 9px;
  color: var(--patch-text);
  background: var(--patch-panel);
}

#patchManagementPage .patch-device-toolbar input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

#patchManagementPage .toolbar-spacer {
  align-self: center;
  justify-self: end;
  color: var(--patch-muted);
  font-weight: 700;
}

#patchManagementPage .patch-operations-table {
  min-width: 1060px;
}

#patchManagementPage .patch-operations-table tr.selected td {
  background: color-mix(in srgb, var(--patch-blue) 8%, var(--patch-panel));
}

#patchManagementPage .patch-cell-wrap {
  display: block;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#patchManagementPage .patch-deployment-panel {
  position: sticky;
  top: 58px;
  overflow: hidden;
}

#patchManagementPage .patch-deployment-panel[hidden] {
  display: none;
}

#patchManagementPage .live-session-head {
  padding: 14px;
  border-bottom: 1px solid var(--patch-border);
}

#patchManagementPage .live-session-head .status {
  margin-bottom: 7px;
}

#patchManagementPage .live-session-stats {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--patch-muted);
  font-size: 11px;
}

#patchManagementPage .live-session-stats button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--patch-border);
  border-radius: 5px;
  color: var(--patch-blue);
  background: transparent;
  font-size: 20px;
}

#patchManagementPage .patch-deployment-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--patch-border);
}

#patchManagementPage .patch-deployment-form > label {
  display: grid;
  gap: 5px;
  color: var(--patch-muted);
  font-size: 11px;
  font-weight: 700;
}

#patchManagementPage .patch-deployment-form :is(select, input[type="datetime-local"]) {
  width: 100%;
  min-height: 37px;
  border: 1px solid var(--patch-border);
  border-radius: 5px;
  padding: 7px 9px;
  color: var(--patch-text);
  background: var(--patch-panel);
}

#patchManagementPage .patch-scope-control {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
}

#patchManagementPage .patch-scope-control legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--patch-muted);
  font-size: 11px;
  font-weight: 700;
}

#patchManagementPage .patch-scope-control label {
  display: block;
}

#patchManagementPage .patch-scope-control input {
  position: absolute;
  opacity: 0;
}

#patchManagementPage .patch-scope-control span {
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid var(--patch-border);
  border-radius: 5px;
  font-weight: 750;
}

#patchManagementPage .patch-scope-control input:checked + span {
  border-color: var(--patch-blue);
  color: var(--patch-blue);
  background: color-mix(in srgb, var(--patch-blue) 10%, transparent);
}

#patchManagementPage .patch-location-selector {
  display: grid;
  gap: 6px;
}

#patchManagementPage .patch-location-selector[hidden] {
  display: none;
}

#patchManagementPage .patch-location-selector > span {
  color: var(--patch-muted);
  font-size: 11px;
  font-weight: 700;
}

#patchManagementPage #patchDeploymentLocationOptions {
  display: grid;
  max-height: 132px;
  border: 1px solid var(--patch-border);
  border-radius: 5px;
  overflow-y: auto;
}

#patchManagementPage #patchDeploymentLocationOptions label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--patch-border);
}

#patchManagementPage .patch-inline-check {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
}

#patchManagementPage .security-push-summary {
  padding: 14px;
}

#patchManagementPage .security-push-summary .policy-detail-section {
  display: grid;
  gap: 0;
  margin: 10px 0;
  border: 1px solid var(--patch-border);
  border-radius: 5px;
}

#patchManagementPage .security-push-summary .policy-detail-section p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px;
  border-bottom: 1px solid var(--patch-border);
  color: var(--patch-muted);
}

#patchManagementPage .security-push-summary .policy-detail-section p:last-child {
  border-bottom: 0;
}

#patchManagementPage .security-push-summary .policy-detail-section span {
  color: var(--patch-text);
  font-weight: 750;
  text-align: right;
}

#patchManagementPage .remote-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

#patchManagementPage .security-push-status {
  margin: 0 14px 14px;
  border: 1px solid var(--patch-border);
  border-radius: 5px;
  padding: 10px;
  line-height: 1.5;
}

#patchManagementPage .patch-workflow-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
}

#patchManagementPage .patch-workflow-strip article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#patchManagementPage .patch-workflow-strip article > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 5px;
}

#patchManagementPage .patch-workflow-strip small {
  grid-column: 1 / -1;
  color: var(--patch-muted);
}

#patchManagementPage .patch-workflow-strip strong {
  font-size: 22px;
}

#patchManagementPage .patch-workflow-strip article > div > span {
  color: var(--patch-muted);
}

#patchManagementPage .workflow-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--patch-blue);
  background: color-mix(in srgb, var(--patch-blue) 12%, transparent);
}

#patchManagementPage .workflow-icon.installed,
#patchManagementPage .workflow-icon.verified {
  color: var(--patch-green);
  background: color-mix(in srgb, var(--patch-green) 12%, transparent);
}

#patchManagementPage .patch-workflow-strip > i {
  width: 44px;
  height: 1px;
  background: var(--patch-border);
}

@media (max-width: 1320px) {
  #patchManagementPage .patch-overview-grid {
    grid-template-columns: 1fr 2fr;
  }

  #patchManagementPage .patch-location-compliance {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1050px) {
  #patchManagementPage .patch-operations-layout {
    grid-template-columns: 1fr;
  }

  #patchManagementPage .patch-deployment-panel {
    position: static;
  }

  #patchManagementPage .patch-device-toolbar {
    grid-template-columns: minmax(200px, 1fr) repeat(2, 140px);
  }

  #patchManagementPage .patch-device-toolbar .toolbar-spacer {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  #patchManagementPage .patch-operations-workspace {
    padding: 12px;
  }

  #patchManagementPage .patch-operations-heading,
  #patchManagementPage .patch-heading-actions {
    align-items: stretch;
  }

  #patchManagementPage .patch-operations-heading {
    flex-direction: column;
  }

  #patchManagementPage .patch-heading-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #patchManagementPage .patch-heading-actions > span {
    grid-column: 1 / -1;
  }

  #patchManagementPage .patch-overview-grid {
    grid-template-columns: 1fr;
  }

  #patchManagementPage .patch-location-compliance {
    grid-column: auto;
  }

  #patchManagementPage .patch-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  #patchManagementPage .patch-status-metric:nth-child(2) {
    border-right: 0;
  }

  #patchManagementPage .patch-status-metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--patch-border);
  }

  #patchManagementPage .patch-health-content,
  #patchManagementPage .patch-location-chart-wrap {
    align-items: flex-start;
  }

  #patchManagementPage .patch-device-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  #patchManagementPage .patch-device-toolbar .device-search {
    grid-column: 1 / -1;
  }

  #patchManagementPage .patch-workflow-strip {
    grid-template-columns: 1fr 1fr;
  }

  #patchManagementPage .patch-workflow-strip > i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #patchManagementPage .patch-operations-workspace *,
  #patchManagementPage .patch-operations-workspace *::before,
  #patchManagementPage .patch-operations-workspace *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Device user settings - Model C */
.device-control-dialog.device-control-model-c {
  width: min(900px, calc(100vw - 32px));
  border-left: 1px solid #bfd0d9;
  background: #edf3f6;
}

.device-control-model-c .device-control-head {
  align-items: center;
  padding: 14px 18px;
}

.device-control-model-c .device-control-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.device-control-model-c .device-control-device-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #bed0da;
  border-radius: 6px;
  color: #2563eb;
  background: #eef4ff;
}

.device-control-model-c .device-control-device-icon svg,
.device-control-model-c .device-control-nav svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.device-control-model-c .device-control-head-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 1px;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid #d5e1e7;
  border-radius: 6px;
  background: #d5e1e7;
}

.device-control-model-c .device-control-head-status > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 10px;
  background: #f7fafc;
}

.device-control-model-c .device-control-head-status small {
  color: #687f8c;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.device-control-model-c .device-control-head-status strong {
  overflow: hidden;
  color: #173442;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-control-model-c .device-control-form {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-content: start;
  gap: 10px 14px;
  padding: 14px;
  scroll-behavior: smooth;
}

.device-control-model-c .device-control-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-column: 1;
  grid-row: 1 / span 20;
  align-self: start;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid #d0dee5;
  border-radius: 6px;
  background: #ffffff;
}

.device-control-model-c .device-control-nav button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 8px;
  border: 0;
  border-radius: 4px;
  color: #415d6c;
  background: transparent;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: left;
}

.device-control-model-c .device-control-nav button:hover {
  color: #174fca;
  background: #eef4ff;
}

.device-control-model-c .device-control-nav button.active {
  color: #174fca;
  background: #e2ecff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.device-control-model-c .device-control-section,
.device-control-model-c .device-control-apply,
.device-control-model-c .device-control-actions {
  grid-column: 2;
}

.device-control-model-c .device-control-section,
.device-control-model-c .device-control-apply {
  margin-bottom: 0;
  box-shadow: 0 1px 2px rgba(15, 35, 46, 0.04);
}

.device-control-model-c .device-control-section {
  scroll-margin-top: 12px;
}

.device-control-model-c .device-control-actions {
  position: sticky;
  bottom: -14px;
  z-index: 3;
  margin: 0 -14px -14px;
  padding: 12px 14px;
  border-top: 1px solid #d1dfe6;
  background: rgba(247, 250, 251, 0.96);
  backdrop-filter: blur(8px);
}

.device-control-model-c .device-control-actions button {
  min-width: 120px;
  min-height: 38px;
}

body[data-theme="dark"] .device-control-dialog.device-control-model-c {
  border-color: #244653;
  background: #071d26;
}

body[data-theme="dark"] .device-control-model-c .device-control-device-icon,
body[data-theme="dark"] .device-control-model-c .device-control-nav,
body[data-theme="dark"] .device-control-model-c .device-control-head-status > span {
  border-color: #244653;
  color: #bcd4ff;
  background: #08232d;
}

body[data-theme="dark"] .device-control-model-c .device-control-head-status {
  border-color: #244653;
  background: #244653;
}

body[data-theme="dark"] .device-control-model-c .device-control-head-status strong {
  color: #e7f5f8;
}

body[data-theme="dark"] .device-control-model-c .device-control-nav button {
  color: #a8bec8;
}

body[data-theme="dark"] .device-control-model-c .device-control-nav button:hover,
body[data-theme="dark"] .device-control-model-c .device-control-nav button.active {
  color: #dce9ff;
  background: #12355f;
}

body[data-theme="dark"] .device-control-model-c .device-control-actions {
  border-color: #244653;
  background: rgba(7, 29, 38, 0.96);
}

@media (max-width: 760px) {
  .device-control-dialog.device-control-model-c {
    width: 100%;
  }

  .device-control-model-c .device-control-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .device-control-model-c .device-control-head-status {
    order: 3;
    width: 100%;
  }

  .device-control-model-c .device-control-form {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .device-control-model-c .device-control-nav {
    position: sticky;
    top: 0;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    overflow-x: auto;
  }

  .device-control-model-c .device-control-nav button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-width: 62px;
    padding: 7px 4px;
    text-align: center;
  }

  .device-control-model-c .device-control-nav button span {
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .device-control-model-c .device-control-section,
  .device-control-model-c .device-control-apply,
  .device-control-model-c .device-control-actions {
    grid-column: 1;
  }

  .device-control-model-c .device-control-actions {
    bottom: -10px;
    margin: 0 -10px -10px;
  }
}

/* Groups Settings Model C */
#groupsPage .groups-workspace {
  --group-c-bg: #071a23;
  --group-c-surface: #0a222d;
  --group-c-surface-raised: #0d2a37;
  --group-c-line: #244653;
  --group-c-text: #eaf4f8;
  --group-c-muted: #91a9b5;
  --group-c-accent: #3b82f6;
  --group-c-success: #23c483;
  --group-c-warning: #f2b53d;
  --group-c-danger: #f15b6c;
  position: relative;
  padding-bottom: 76px;
  color: var(--group-c-text);
}

body[data-theme="light"] #groupsPage .groups-workspace {
  --group-c-bg: #edf3f6;
  --group-c-surface: #ffffff;
  --group-c-surface-raised: #f7fafc;
  --group-c-line: #cedce4;
  --group-c-text: #132633;
  --group-c-muted: #5f7481;
  --group-c-accent: #2563eb;
  --group-c-success: #0b9b68;
  --group-c-warning: #c77d05;
  --group-c-danger: #d63f50;
}

#groupsPage .group-c-heading {
  margin: 0;
}

#groupsPage .group-c-heading h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 3px 0 5px;
  color: var(--group-c-text);
}

#groupsPage .group-c-heading h2 svg,
#groupsPage .group-c-heading .details-actions svg,
#groupsPage .group-c-summary svg,
#groupsPage .group-c-navigation svg,
#groupsPage .group-c-editor svg,
#groupsPage .group-c-context svg,
#groupsPage .group-c-members svg,
#groupsPage .group-c-activity svg,
#groupsPage .group-c-action-bar svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#groupsPage .group-c-breadcrumb {
  margin: 0;
  color: var(--group-c-muted);
  font-size: 0.7rem;
}

#groupsPage .group-c-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--group-c-line);
  background: var(--group-c-surface);
}

#groupsPage .group-c-summary article {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 13px 16px;
  border-right: 1px solid var(--group-c-line);
}

#groupsPage .group-c-summary article:last-child {
  border-right: 0;
}

#groupsPage .group-c-summary article > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--group-c-line);
  border-radius: 6px;
  background: var(--group-c-surface-raised);
  color: var(--group-c-accent);
}

#groupsPage .group-c-summary article > div {
  display: grid;
  gap: 2px;
}

#groupsPage .group-c-summary strong {
  color: var(--group-c-text);
  font-size: 1.15rem;
}

#groupsPage .group-c-summary small {
  color: var(--group-c-muted);
  font-size: 0.68rem;
}

#groupsPage .good-text {
  color: var(--group-c-success) !important;
}

#groupsPage .risk-text {
  color: var(--group-c-danger) !important;
}

#groupsPage .group-c-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: start;
}

#groupsPage :where(.group-c-navigation, .group-c-editor, .group-c-effective, .group-c-agent-actions, .group-c-members, .group-c-activity) {
  min-width: 0;
  border-color: var(--group-c-line);
  background: var(--group-c-surface);
  color: var(--group-c-text);
}

#groupsPage .group-c-navigation {
  position: sticky;
  top: 10px;
  padding: 10px;
}

#groupsPage .group-c-selector {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

#groupsPage .group-c-selector > span,
#groupsPage .group-c-compact-field > span {
  color: var(--group-c-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

#groupsPage :where(.group-c-selector select, .group-c-compact-field select, .group-c-compact-field input, .group-c-add-site input) {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--group-c-line);
  border-radius: 4px;
  background: var(--group-c-surface-raised);
  color: var(--group-c-text);
}

#groupsPage .group-c-section-nav {
  display: grid;
  gap: 3px;
}

#groupsPage .group-c-section-nav :is(button, a) {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--group-c-muted);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

#groupsPage .group-c-section-nav :is(button, a):hover,
#groupsPage .group-c-section-nav button.active {
  border-color: var(--group-c-line);
  background: var(--group-c-surface-raised);
  color: var(--group-c-text);
  transform: translateX(2px);
}

#groupsPage .group-c-section-nav button.active {
  box-shadow: inset 3px 0 0 var(--group-c-accent);
  color: var(--group-c-accent);
}

#groupsPage .group-c-group-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--group-c-line);
}

#groupsPage .group-c-group-list header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
}

#groupsPage .group-c-group-list header span,
#groupsPage .group-c-group-list > p {
  color: var(--group-c-muted);
}

#groupsPage .group-c-group-list > p {
  margin: 4px 0 8px;
  font-size: 0.62rem;
}

#groupsPage .group-c-group-list > div {
  display: grid;
  gap: 4px;
  max-height: 290px;
  overflow-y: auto;
}

#groupsPage .group-c-group-list button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 5px 7px;
  border: 1px solid var(--group-c-line);
  border-radius: 4px;
  background: transparent;
  color: var(--group-c-text);
  text-align: left;
}

#groupsPage .group-c-group-list button > span {
  display: grid;
  place-items: center;
  color: var(--group-c-accent);
}

#groupsPage .group-c-group-list button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#groupsPage .group-c-group-list button small {
  color: var(--group-c-muted);
}

#groupsPage .group-c-group-list button:hover,
#groupsPage .group-c-group-list button.selected,
#groupsPage .group-c-group-list button.drag-over {
  border-color: var(--group-c-accent);
  background: color-mix(in srgb, var(--group-c-accent) 10%, var(--group-c-surface));
}

#groupsPage .group-c-editor {
  overflow: hidden;
  padding: 0;
}

#groupsPage .group-c-editor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--group-c-line);
  scroll-margin-top: 12px;
}

#groupsPage .group-c-editor > header > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

#groupsPage .group-c-title-icon,
#groupsPage .group-c-setting-icon,
#groupsPage .group-c-effective header > div > span,
#groupsPage .group-c-agent-actions header > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--group-c-line);
  border-radius: 6px;
  background: var(--group-c-surface-raised);
  color: var(--group-c-accent);
}

#groupsPage .group-c-editor :where(h3, p, small),
#groupsPage .group-c-context :where(h3, p, small) {
  margin: 0;
}

#groupsPage .group-c-editor header h3 {
  margin: 2px 0;
  font-size: 0.94rem;
}

#groupsPage .group-c-editor header p,
#groupsPage .group-c-editor header small {
  color: var(--group-c-muted);
  font-size: 0.68rem;
}

#groupsPage .group-c-unassigned-note {
  display: flex;
  gap: 10px;
  margin: 12px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--group-c-warning) 45%, var(--group-c-line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--group-c-warning) 9%, var(--group-c-surface));
}

#groupsPage .group-c-unassigned-note p {
  margin-top: 3px;
  color: var(--group-c-muted);
  font-size: 0.68rem;
}

#groupsPage .group-c-settings-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--group-c-line);
  scroll-margin-top: 12px;
}

#groupsPage .group-c-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#groupsPage .group-c-section-heading h3 {
  font-size: 0.82rem;
}

#groupsPage .group-c-section-heading p,
#groupsPage .group-c-section-heading > span {
  margin-top: 3px;
  color: var(--group-c-muted);
  font-size: 0.65rem;
}

#groupsPage .group-c-section-heading a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--group-c-accent);
  font-size: 0.66rem;
  font-weight: 700;
  text-decoration: none;
}

#groupsPage .group-c-section-heading a svg {
  width: 14px;
  height: 14px;
}

#groupsPage .group-c-setting-row {
  display: grid;
  grid-template-columns: 38px minmax(160px, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 8px 0;
  border-top: 1px solid var(--group-c-line);
}

#groupsPage .group-c-setting-row > div:nth-child(2),
#groupsPage .group-c-setting-row > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

#groupsPage .group-c-setting-row strong {
  color: var(--group-c-text);
  font-size: 0.75rem;
}

#groupsPage .group-c-setting-row small {
  color: var(--group-c-muted);
  font-size: 0.64rem;
}

#groupsPage .group-c-setting-icon {
  width: 34px;
  height: 34px;
}

#groupsPage .group-c-segmented {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--group-c-line);
  border-radius: 5px;
  background: var(--group-c-surface-raised);
}

#groupsPage .group-c-segmented label {
  cursor: pointer;
}

#groupsPage .group-c-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#groupsPage .group-c-segmented span {
  display: grid;
  place-items: center;
  min-height: 31px;
  padding: 0 8px;
  border-radius: 3px;
  color: var(--group-c-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

#groupsPage .group-c-segmented input:checked + span {
  background: var(--group-c-accent);
  color: #fff;
}

#groupsPage .group-c-segmented input:focus-visible + span {
  outline: 2px solid var(--group-c-accent);
  outline-offset: 2px;
}

#groupsPage .group-c-switch-row {
  grid-template-columns: 38px minmax(160px, 1fr) 42px;
  cursor: pointer;
}

#groupsPage .group-c-switch-row > input {
  position: absolute;
  opacity: 0;
}

#groupsPage .group-c-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border: 1px solid var(--group-c-line);
  border-radius: 12px;
  background: var(--group-c-muted);
  transition: background-color 150ms ease;
}

#groupsPage .group-c-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform 160ms ease;
}

#groupsPage .group-c-switch-row > input:checked + .group-c-switch {
  background: var(--group-c-success);
}

#groupsPage .group-c-switch-row > input:checked + .group-c-switch::after {
  transform: translateX(18px);
}

#groupsPage .group-c-switch-row > input:focus-visible + .group-c-switch {
  outline: 2px solid var(--group-c-accent);
  outline-offset: 2px;
}

#groupsPage .group-c-site-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
}

#groupsPage .group-c-site-list > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 5px 0 9px;
  border: 1px solid var(--group-c-line);
  border-radius: 4px;
  background: var(--group-c-surface-raised);
  color: var(--group-c-text);
  font-size: 0.66rem;
}

#groupsPage .group-c-site-list > span > svg {
  width: 14px;
  height: 14px;
  color: var(--group-c-accent);
}

#groupsPage .group-c-site-list button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--group-c-muted);
}

#groupsPage .group-c-site-list button svg {
  width: 13px;
  height: 13px;
}

#groupsPage .group-c-empty-sites {
  margin: 8px 0;
  color: var(--group-c-muted);
  font-size: 0.67rem;
}

#groupsPage .group-c-add-site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 9px;
}

#groupsPage .group-c-add-site button {
  min-width: 94px;
}

#groupsPage .group-c-setting-value {
  color: var(--group-c-accent);
  font-size: 0.7rem;
  font-weight: 800;
}

#groupsPage #groupCApplicationControl .group-c-setting-row,
#groupsPage #groupCRestartSchedule .group-c-setting-row {
  grid-template-columns: 38px minmax(150px, 1fr) auto auto;
}

#groupsPage .group-c-compact-field {
  display: grid;
  gap: 4px;
  min-width: 112px;
}

#groupsPage .group-c-save-status {
  min-height: 34px;
  margin: 0;
  padding: 9px 16px;
  color: var(--group-c-accent);
  font-size: 0.68rem;
}

#groupsPage .group-c-context {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#groupsPage .group-c-effective,
#groupsPage .group-c-agent-actions {
  overflow: hidden;
  padding: 0;
}

#groupsPage .group-c-effective > header,
#groupsPage .group-c-agent-actions > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--group-c-line);
}

#groupsPage .group-c-effective > header > div,
#groupsPage .group-c-agent-actions > header {
  display: flex;
  align-items: center;
  gap: 8px;
}

#groupsPage .group-c-effective header > div > span,
#groupsPage .group-c-agent-actions header > span {
  width: 32px;
  height: 32px;
}

#groupsPage .group-c-effective h3,
#groupsPage .group-c-agent-actions h3 {
  font-size: 0.78rem;
}

#groupsPage .group-c-effective dl {
  margin: 0;
  padding: 5px 12px 12px;
}

#groupsPage .group-c-effective dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--group-c-line);
}

#groupsPage .group-c-effective dl > div:last-child {
  border-bottom: 0;
}

#groupsPage .group-c-effective dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--group-c-muted);
  font-size: 0.66rem;
}

#groupsPage .group-c-effective dt svg {
  width: 14px;
  height: 14px;
}

#groupsPage .group-c-effective dd {
  margin: 0;
  color: var(--group-c-text);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: right;
}

#groupsPage .group-c-effective .group-c-coverage {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) 34px;
}

#groupsPage .group-c-coverage dt {
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--group-c-line);
}

#groupsPage .group-c-coverage dt span {
  height: 100%;
  background: var(--group-c-success);
}

#groupsPage .group-c-agent-actions > button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: calc(100% - 20px);
  min-height: 54px;
  margin: 8px 10px;
  padding: 7px 9px;
  border: 1px solid var(--group-c-line);
  border-radius: 5px;
  background: var(--group-c-surface-raised);
  color: var(--group-c-text);
  text-align: left;
  transition: border-color 150ms ease, transform 150ms ease;
}

#groupsPage .group-c-agent-actions > button:hover:not(:disabled) {
  border-color: var(--group-c-accent);
  transform: translateY(-1px);
}

#groupsPage .group-c-agent-actions > button > svg:first-child {
  color: var(--group-c-accent);
}

#groupsPage .group-c-agent-actions > button > svg:last-child {
  width: 14px;
  height: 14px;
  color: var(--group-c-muted);
}

#groupsPage .group-c-agent-actions button span {
  display: grid;
  gap: 2px;
}

#groupsPage .group-c-agent-actions button strong {
  font-size: 0.7rem;
}

#groupsPage .group-c-agent-actions button small {
  color: var(--group-c-muted);
  font-size: 0.61rem;
}

#groupsPage :where(.group-c-members, .group-c-activity) {
  overflow: hidden;
  padding: 0;
}

#groupsPage :where(.group-c-members, .group-c-activity) > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--group-c-line);
}

#groupsPage :where(.group-c-members, .group-c-activity) > header > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

#groupsPage :where(.group-c-members, .group-c-activity) h3 {
  margin: 0 0 2px;
  font-size: 0.8rem;
}

#groupsPage :where(.group-c-members, .group-c-activity) p {
  margin: 0;
  color: var(--group-c-muted);
  font-size: 0.65rem;
}

#groupsPage .group-c-members .devices-table,
#groupsPage .group-c-activity .devices-table {
  color: var(--group-c-text);
}

#groupsPage .group-c-action-bar {
  position: sticky;
  z-index: 12;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid var(--group-c-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--group-c-surface) 94%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}

#groupsPage .group-c-action-bar p {
  margin: 0;
  color: var(--group-c-muted);
  font-size: 0.67rem;
}

#groupsPage .group-c-action-bar > div {
  display: flex;
  gap: 7px;
}

#groupsPage .group-c-action-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
}

#groupsPage .group-c-action-bar button svg {
  width: 15px;
  height: 15px;
}

#groupsPage .group-c-navigation button:disabled,
#groupsPage .group-c-editor button:disabled,
#groupsPage .group-c-context button:disabled,
#groupsPage .group-c-action-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

body[data-theme="light"] #groupsPage :where(.group-c-heading p, .group-c-summary small, .group-c-editor p, .group-c-editor small, .group-c-context small, .group-c-members p, .group-c-activity p) {
  color: var(--group-c-muted);
}

body[data-theme="light"] #groupsPage :where(.group-c-members .devices-table th, .group-c-activity .devices-table th) {
  background: #f3f7f9;
  color: #597180;
}

body[data-theme="light"] #groupsPage :where(.group-c-members .devices-table td, .group-c-activity .devices-table td) {
  border-color: var(--group-c-line);
  color: #263e4c;
}

body[data-theme="light"] #groupsPage .model-d-device-table tr.is-selected {
  background: #edf4ff;
}

body[data-theme="light"] #groupsPage .model-d-group-pill {
  border-color: var(--group-c-line);
  color: #294454;
}

@media (max-width: 1220px) {
  #groupsPage .group-c-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  #groupsPage .group-c-context {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  #groupsPage .groups-workspace {
    padding-bottom: 10px;
  }

  #groupsPage .group-c-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #groupsPage .group-c-summary article:nth-child(2) {
    border-right: 0;
  }

  #groupsPage .group-c-summary article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--group-c-line);
  }

  #groupsPage .group-c-layout {
    grid-template-columns: 1fr;
  }

  #groupsPage .group-c-navigation {
    position: static;
  }

  #groupsPage .group-c-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #groupsPage .group-c-group-list > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 220px;
  }

  #groupsPage .group-c-context {
    grid-column: auto;
  }

  #groupsPage .group-c-action-bar {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  #groupsPage .group-c-action-bar > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #groupsPage .group-c-heading,
  #groupsPage :where(.group-c-members, .group-c-activity) > header {
    align-items: stretch;
    flex-direction: column;
  }

  #groupsPage .group-c-heading .details-actions {
    width: 100%;
  }

  #groupsPage .group-c-heading .details-actions > * {
    flex: 1;
  }

  #groupsPage .group-c-summary,
  #groupsPage .group-c-context,
  #groupsPage .group-c-section-nav,
  #groupsPage .group-c-group-list > div {
    grid-template-columns: 1fr;
  }

  #groupsPage .group-c-summary article {
    border-right: 0;
    border-bottom: 1px solid var(--group-c-line);
  }

  #groupsPage .group-c-summary article:last-child {
    border-bottom: 0;
  }

  #groupsPage .group-c-setting-row,
  #groupsPage #groupCApplicationControl .group-c-setting-row,
  #groupsPage #groupCRestartSchedule .group-c-setting-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  #groupsPage .group-c-setting-row > :nth-child(n + 3) {
    grid-column: 1 / -1;
    width: 100%;
  }

  #groupsPage .group-c-switch-row {
    grid-template-columns: 38px minmax(0, 1fr) 42px;
  }

  #groupsPage .group-c-switch-row > :nth-child(n + 3) {
    grid-column: auto;
    width: auto;
  }

  #groupsPage .group-c-segmented,
  #groupsPage .group-c-add-site,
  #groupsPage .group-c-action-bar > div {
    grid-template-columns: 1fr;
  }

  #groupsPage .group-c-action-bar button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #groupsPage .group-c-section-nav :is(button, a),
  #groupsPage .group-c-switch,
  #groupsPage .group-c-switch::after,
  #groupsPage .group-c-agent-actions > button {
    scroll-behavior: auto;
    transition: none;
  }
}

/* Employee Directory Model A */
body[data-theme="dark"] #usersPage .summary-card-icon {
  color: #7ea8ff;
  background: rgba(47, 111, 237, 0.16);
}

body[data-theme="dark"] #usersPage .users-summary-grid article:nth-child(2) .summary-card-icon {
  color: #55d8c9;
  background: rgba(0, 143, 127, 0.16);
}

body[data-theme="dark"] #usersPage .users-summary-grid article:nth-child(3) .summary-card-icon {
  color: #f4c76b;
  background: rgba(183, 121, 0, 0.16);
}

body[data-theme="dark"] #usersPage .users-summary-grid article:nth-child(4) .summary-card-icon {
  color: #6ed69b;
  background: rgba(22, 122, 73, 0.18);
}

body[data-theme="dark"] #usersPage :is(.employee-policy-list span, .employee-device-list button) {
  background: rgba(9, 28, 38, 0.74);
  border-color: rgba(143, 181, 193, 0.2);
}

body[data-theme="light"] #usersPage :is(.employee-policy-list span, .employee-device-list button) {
  color: #17303d;
  background: #f8fbfc;
  border-color: #d8e6ea;
}

body[data-theme="light"] #usersPage .employee-directory-details dd,
body[data-theme="light"] #usersPage .employee-section-title h4,
body[data-theme="light"] #usersPage .employee-group-value,
body[data-theme="light"] #usersPage .employee-device-list strong {
  color: #102633;
}

@media (max-width: 1100px) {
  #usersPage .users-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #usersPage .users-layout {
    grid-template-columns: 1fr;
  }

  #usersPage .users-side-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  #usersPage .users-workspace {
    padding: 10px;
  }

  #usersPage .details-heading,
  #usersPage .users-heading-actions,
  #usersPage .device-toolbar {
    align-items: stretch;
  }

  #usersPage .users-heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #usersPage .users-heading-actions button {
    min-width: 0;
  }

  #usersPage .users-summary-grid {
    grid-template-columns: 1fr;
  }

  #usersPage .users-summary-grid .device-summary-card {
    min-height: 92px;
  }

  #usersPage .device-search {
    min-width: 100%;
  }

  #usersPage .device-toolbar > :is(button, select) {
    flex: 1 1 calc(50% - 8px);
  }

  #usersPage .toolbar-spacer {
    display: none;
  }

  #usersPage .employee-directory-details > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  #usersPage .employee-directory-details dd {
    text-align: left;
  }

  #usersPage .employee-inspector-actions {
    grid-template-columns: 1fr;
  }
}

/* One loading indicator is shared by boot, dashboard, and API-backed pages. */
.shared-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 240px;
  color: #e9f6fb;
  font-size: 15px;
  text-align: center;
}

.shared-loading-spinner {
  display: block;
  width: 48px;
  height: 48px;
  border: 4px solid #315161;
  border-top-color: #4ba9e9;
  border-radius: 50%;
  animation: page-data-loading-spin 0.9s linear infinite;
}

.boot-loading-page .shared-loading-content {
  min-height: 0;
}

.page-data-loading {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  top: auto;
  z-index: 89;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #315161;
  border-radius: 6px;
  background: rgba(11, 32, 41, 0.96);
  color: #e9f6fb;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  pointer-events: none;
}

.page-data-loading .shared-loading-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.page-data-loading[hidden] {
  display: none;
}

body[data-theme="light"] .page-data-loading {
  border-color: #bfd2da;
  background: #fff;
  color: #183745;
}

body[data-theme="light"] .shared-loading-content { color: #183745; }
body[data-theme="light"] .shared-loading-spinner { border-color: #bfd2da; border-top-color: #1674aa; }

@keyframes page-data-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .shared-loading-spinner { animation: none; }
}

.icon-button > svg,
.search-box span > svg,
.device-search span > svg,
.ops-mini-search span > svg,
#dashboardPage .ops-side-icon > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-box span,
.device-search span,
.ops-mini-search span {
  display: grid;
  place-items: center;
}

.alert-dot:has(> svg)::before {
  display: none;
}

.detail-close > svg,
button[aria-label^="Close"] > svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (max-width: 900px) {
  .boot-skeleton-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .boot-skeleton-sidebar {
    padding: 18px 12px;
  }

  .boot-skeleton-sidebar span,
  .boot-skeleton-sidebar i {
    width: 100%;
  }

  .boot-skeleton-kpis,
  .boot-skeleton-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .boot-skeleton-shell {
    grid-template-columns: 1fr;
  }

  .boot-skeleton-sidebar {
    display: none;
  }

  .boot-skeleton-main {
    padding: 12px;
  }

  .boot-skeleton-topbar,
  .boot-skeleton-kpis,
  .boot-skeleton-grid {
    grid-template-columns: 1fr;
  }

  .boot-skeleton-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .boot-skeleton-topbar span {
    width: 100%;
  }
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-dark);
}

.live-alert-popup {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  grid-template-columns: 42px minmax(220px, 320px) auto;
  align-items: center;
  gap: 14px;
  max-width: min(720px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid rgba(255, 86, 86, 0.42);
  border-radius: 8px;
  background: rgba(8, 20, 26, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  color: #eef9f8;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.live-alert-popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.live-alert-popup.is-leaving {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
}

.live-alert-popup[hidden] {
  display: none;
}

.live-alert-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(184, 50, 50, 0.18);
  border: 1px solid rgba(255, 86, 86, 0.48);
  color: #ff7777;
  font-weight: 800;
}

.live-alert-copy {
  display: grid;
  gap: 4px;
}

.live-alert-copy strong {
  font-size: 0.95rem;
}

.live-alert-copy span {
  color: rgba(238, 249, 248, 0.74);
  font-size: 0.82rem;
  line-height: 1.35;
}

.live-alert-actions {
  display: flex;
  gap: 8px;
}

.live-alert-actions button {
  min-width: 74px;
  height: 34px;
  border: 1px solid rgba(59, 130, 246, 0.36);
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.14);
  color: #dffdf9;
  font-weight: 700;
  cursor: pointer;
}

.live-alert-actions button:first-child {
  background: #2563eb;
  border-color: #3b82f6;
  color: #fff;
}

.live-alert-menu {
  position: fixed;
  right: 24px;
  top: 58px;
  z-index: 58;
  width: min(380px, calc(100vw - 32px));
  border: 1px solid rgba(154, 208, 207, 0.2);
  border-radius: 8px;
  background: rgba(7, 19, 27, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  color: #edfafa;
  overflow: hidden;
}

.live-alert-menu[hidden] {
  display: none;
}

.live-alert-menu-head,
.live-alert-menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.12);
}

.live-alert-menu-head span,
.live-alert-menu-item span,
.live-alert-menu-empty span {
  display: block;
  margin-top: 3px;
  color: rgba(237, 250, 250, 0.62);
  font-size: 0.76rem;
}

.live-alert-menu-head button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(154, 208, 207, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #d9eeee;
  cursor: pointer;
}

.live-alert-menu-list {
  display: grid;
  max-height: 330px;
  overflow: auto;
}

.live-alert-menu-item,
.live-alert-menu-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.08);
}

.live-alert-menu-item {
  border-left: 3px solid #3b82f6;
  cursor: pointer;
}

.live-alert-menu-item:hover {
  background: rgba(59, 130, 246, 0.08);
}

.live-alert-menu-item.risk {
  border-left-color: #d84256;
}

.live-alert-menu-item.warn {
  border-left-color: #d9ab43;
}

.live-alert-menu-item small {
  color: #9fded8;
  font-size: 0.72rem;
  font-weight: 800;
}

.live-alert-menu-actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(154, 208, 207, 0.12);
  border-bottom: 0;
}

.live-alert-menu-actions button {
  height: 34px;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 720px) {
  .live-alert-popup {
    left: 16px;
    right: 16px;
    bottom: 16px;
    grid-template-columns: 38px 1fr;
  }

  .live-alert-menu {
    left: 16px;
    right: 16px;
    top: 56px;
    width: auto;
  }

  .live-alert-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.login-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 540px);
  align-items: center;
  gap: clamp(28px, 6vw, 78px);
  min-height: 100vh;
  padding: clamp(28px, 6vw, 74px) clamp(28px, 6vw, 78px);
  overflow: hidden;
  isolation: isolate;
  background: #08172b;
  color-scheme: light;
}

.login-page[hidden] {
  display: none;
}

.background-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #08172b;
}

.preview-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.78) contrast(1.06) saturate(0.92);
  opacity: 0.88;
}

.background-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(255, 255, 255, 0.025) 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(255, 255, 255, 0.02) 20px);
  mask-image: radial-gradient(circle at 28% 74%, black 0 32%, transparent 58%);
}

.background-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 23, 43, 0.72), rgba(8, 23, 43, 0.5) 52%, rgba(8, 23, 43, 0.24)),
    radial-gradient(circle at 18% 72%, rgba(29, 78, 216, 0.2), transparent 36%);
}

.sidebar {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 168px;
  height: 430px;
  padding: 22px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(1, 14, 20, 0.72);
  filter: blur(0.35px);
  opacity: 0;
}

.mini-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: #dfeeee;
  font-size: 0.76rem;
  font-weight: 700;
}

.mini-logo svg {
  width: 24px;
  height: 24px;
  color: var(--accent-bright);
}

.sidebar nav {
  display: grid;
  gap: 8px;
}

.sidebar nav span {
  display: block;
  padding: 9px 10px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 600;
}

.sidebar nav span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.sidebar nav .active {
  background: rgba(37, 99, 235, 0.28);
  color: #60a5fa;
}

.dashboard-panel {
  position: absolute;
  left: 170px;
  top: 54px;
  width: min(41vw, 440px);
  height: 330px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(8, 24, 32, 0.58);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
  transform: rotate(5deg);
  transform-origin: left top;
  filter: blur(1.1px);
  opacity: 0;
}

.dashboard-panel header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #dbe9ec;
  font-size: 1rem;
}

.dashboard-panel header strong {
  margin-right: auto;
}

.dashboard-panel header span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.metric-card {
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.8);
}

.metric-card small {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.metric-card > strong {
  display: block;
  color: #fff;
  font-size: 1.45rem;
}

.metric-card span,
.distribution p,
.alerts p {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.72rem;
}

.ring {
  position: absolute;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-left: 142px;
  margin-top: -58px;
  border: 10px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent-bright);
  border-right-color: var(--accent-bright);
  border-radius: 50%;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.distribution p,
.alerts p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
}

.distribution b {
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--accent-bright);
}

.chart-card {
  grid-column: span 1;
}

.chart-line {
  height: 62px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(135deg, transparent 7%, rgba(59, 130, 246, 0.32) 8% 13%, transparent 14%),
    linear-gradient(25deg, transparent 32%, rgba(59, 130, 246, 0.32) 33% 40%, transparent 41%),
    linear-gradient(145deg, transparent 56%, rgba(59, 130, 246, 0.32) 57% 66%, transparent 67%);
}

.office-window {
  position: absolute;
  right: 56px;
  top: 0;
  display: grid;
  grid-template-columns: repeat(2, 80px);
  grid-template-rows: repeat(2, 110px);
  gap: 8px;
  padding: 26px 22px;
  border-left: 8px solid rgba(255, 255, 255, 0.2);
  background: rgba(192, 214, 224, 0.18);
  filter: blur(0.8px);
  opacity: 0;
}

.office-window span {
  background: rgba(206, 226, 236, 0.36);
}

.laptop {
  position: absolute;
  right: 70px;
  bottom: 78px;
  width: 360px;
  height: 210px;
  transform: perspective(700px) rotateY(-15deg) rotateX(3deg);
  opacity: 0;
  filter: blur(0.25px);
}

.screen {
  position: absolute;
  inset: 0 30px 42px 12px;
  border: 8px solid #0b1217;
  border-radius: 10px;
  background:
    radial-gradient(circle at 52% 52%, #1859c9 0 17%, #0d4bb6 18% 27%, transparent 28%),
    radial-gradient(circle at 62% 48%, transparent 0 24%, #237ae7 25% 31%, transparent 32%),
    linear-gradient(135deg, #062d73, #081724 62%);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.38);
}

.base {
  position: absolute;
  left: 54px;
  right: 0;
  bottom: 8px;
  height: 52px;
  border-radius: 7px 12px 20px 18px;
  background: linear-gradient(145deg, #1a2329, #080d11);
  transform: skewX(-16deg);
}

.plant {
  position: absolute;
  right: 18px;
  bottom: 150px;
  width: 74px;
  height: 120px;
  background:
    radial-gradient(circle at 32% 22%, rgba(37, 99, 235, 0.42) 0 15px, transparent 16px),
    radial-gradient(circle at 60% 34%, rgba(59, 130, 246, 0.36) 0 16px, transparent 17px),
    radial-gradient(circle at 42% 52%, rgba(30, 64, 175, 0.32) 0 18px, transparent 19px);
  filter: blur(1px);
  opacity: 0;
}

.shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 12, 24, 0.04), rgba(4, 12, 24, 0.22)),
    radial-gradient(circle at 60% 43%, transparent 0 28%, rgba(4, 12, 24, 0.18) 78%);
}

.brand-block {
  display: block;
  align-self: end;
  max-width: 430px;
  margin-bottom: clamp(10px, 5vw, 46px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(4, 12, 24, 0.5);
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  width: 58px;
  height: 58px;
  color: #1d4ed8;
  stroke-width: 2.8;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  color: #fff;
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0;
}

h1 span,
h2 span {
  color: #3b82f6;
}

.gold-rule,
.login-rule {
  width: 52px;
  height: 2px;
  background: #d9ab43;
}

.gold-rule {
  margin: 20px 0 14px;
}

.brand-block p {
  margin-bottom: 28px;
  color: #e2e8f0;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  max-width: 430px;
}

.features div {
  min-width: 0;
}

.features svg {
  width: 32px;
  height: 32px;
  margin-bottom: 9px;
  color: #60a5fa;
}

.features span {
  display: block;
  color: #f8fafc;
  font-size: clamp(0.72rem, 1.1vw, 0.84rem);
  line-height: 1.25;
}

.login-card {
  grid-column: 2;
  width: min(100%, 540px);
  justify-self: end;
  padding: clamp(36px, 4.8vw, 54px) clamp(38px, 4.8vw, 56px) 34px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  color: #111827;
  box-shadow: 0 22px 60px rgba(17, 24, 39, 0.14);
  color-scheme: light;
}

.login-card input:not([type="checkbox"]) {
  border-color: #cbd5e1;
  background-color: #fff;
  color: #111827;
  -webkit-text-fill-color: #111827;
  color-scheme: light;
}

.login-card input::placeholder {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
  opacity: 1;
}

body[data-theme="dark"] .login-card {
  color: #111827;
  color-scheme: light;
}

body[data-theme="dark"] .login-card .login-logo h2 {
  color: #111827;
}

body[data-theme="dark"] .login-card :where(.signin-copy, .field > span:first-child, .remember) {
  color: #314052;
}

body[data-theme="dark"] .login-card .form-row a {
  color: #1d4ed8;
}

body[data-theme="dark"] .login-card .toggle-password {
  border-color: transparent;
  background: transparent;
  color: #64748b;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
  min-width: 0;
}

.login-logo svg {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  color: #1d4ed8;
  stroke-width: 2.8;
}

h2 {
  margin: 0;
  color: #111827;
  font-size: clamp(1.8rem, 2.2vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: normal;
  white-space: nowrap;
}

.signin-copy {
  margin-bottom: 10px;
  color: #263445;
  text-align: center;
  font-size: 1.18rem;
  font-weight: 700;
}

.login-rule {
  margin: 0 auto 26px;
}

form {
  display: grid;
  gap: 17px;
}

.field {
  display: grid;
  gap: 8px;
}

.field > span:first-child,
.remember,
.form-row a {
  color: #314052;
  font-size: 0.83rem;
  font-weight: 500;
}

.input-wrap {
  position: relative;
  display: block;
}

.input-wrap > svg {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  color: #64748b;
  transform: translateY(-50%);
  pointer-events: none;
}

input {
  width: 100%;
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  font: inherit;
  outline: none;
  padding: 0 42px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

input:focus {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.13);
}

.toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transform: translateY(-50%);
}

.toggle-password:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.toggle-password svg {
  width: 18px;
  height: 18px;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.remember input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  accent-color: #1d4ed8;
}

.form-row a {
  color: #1d4ed8;
}

.sign-in {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  margin-top: 8px;
  border: 0;
  border-radius: 6px;
  background: #1d4ed8;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: filter 150ms ease, transform 150ms ease;
}

.sign-in:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.sign-in:disabled {
  cursor: wait;
  opacity: 0.86;
  transform: none;
}

.button-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.48);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 750ms linear infinite;
}

.sign-in.is-loading .button-spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

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

.form-message.success {
  color: #1d4ed8;
}

.mfa-panel {
  display: grid;
  gap: 13px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 31, 42, 0.12);
}

.mfa-panel[hidden] {
  display: none;
}

.password-reset-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.password-reset-panel[hidden] {
  display: none;
}

.password-reset-head {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.password-reset-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.password-reset-panel .field {
  margin-bottom: 12px;
}

.password-reset-panel .mfa-back {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
}

.mfa-head {
  display: grid;
  gap: 4px;
  text-align: center;
}

.mfa-head strong {
  color: var(--ink);
  font-size: 1rem;
}

.mfa-head span,
.mfa-secret span {
  color: #50636d;
  font-size: 0.78rem;
}

.mfa-qr-wrap {
  display: grid;
  place-items: center;
  width: 178px;
  height: 178px;
  margin: 0 auto;
  border: 1px solid #d7e1e5;
  border-radius: 6px;
  background: #fff;
}

.mfa-qr-wrap[hidden] {
  display: none;
}

.mfa-qr-wrap img {
  width: 154px;
  height: 154px;
  image-rendering: pixelated;
}

.mfa-code-field input {
  padding: 0 14px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.trust-device {
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 5px;
  background: rgba(37, 99, 235, 0.07);
  color: #2c3a43;
  font-weight: 700;
}

.trust-device input {
  accent-color: var(--accent);
}

.mfa-secret {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 5px;
  background: rgba(37, 99, 235, 0.06);
}

.mfa-secret[hidden] {
  display: none;
}

.mfa-secret code {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: normal;
  word-break: break-word;
}

.mfa-back {
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #1d4ed8;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.mfa-back:hover {
  border-color: #1d4ed8;
  background: rgba(29, 78, 216, 0.06);
}

@media (max-width: 920px) {
  .login-page {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 34px;
    min-height: 100dvh;
    overflow: auto;
  }

  .background-scene::after {
    background:
      linear-gradient(rgba(8, 23, 43, 0.58), rgba(8, 23, 43, 0.7)),
      radial-gradient(circle at 22% 72%, rgba(29, 78, 216, 0.22), transparent 42%);
  }

  .brand-block {
    align-self: auto;
    margin-bottom: 0;
    order: 2;
  }

  .login-card {
    grid-column: 1;
    justify-self: center;
    width: min(100%, 540px);
    order: 1;
  }

  .dashboard-panel {
    width: 520px;
    opacity: 0.42;
  }
}

@media (max-width: 620px) {
  .login-page {
    align-content: start;
    gap: 24px;
    padding: max(24px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  }

  .brand-block {
    width: 100%;
    padding: 4px 2px 0;
  }

  .brand-title {
    gap: 12px;
  }

  .brand-icon {
    width: 54px;
    height: 54px;
  }

  .features {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 18px 14px;
  }

  .login-card {
    width: 100%;
    padding: 28px 20px 24px;
    box-shadow: 0 18px 42px rgba(4, 12, 24, 0.28);
  }

  .login-logo {
    gap: 10px;
    flex-wrap: nowrap;
    text-align: center;
  }

  .login-logo svg {
    width: 44px;
    height: 44px;
  }

  h2 {
    font-size: clamp(1.35rem, 6.2vw, 1.55rem);
    line-height: 1.08;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  input {
    height: 46px;
    font-size: 16px;
  }

  .sign-in {
    min-height: 46px;
  }

  .form-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .laptop {
    right: -150px;
  }
}

.dashboard-page {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 8%, rgba(59, 130, 246, 0.14), transparent 28%),
    radial-gradient(circle at 42% 92%, rgba(217, 171, 67, 0.08), transparent 28%),
    #071216;
  color: #edf7f6;
}

.dashboard-page[hidden] {
  display: none;
}

.dashboard-page[data-live-ready="false"] .dense-content {
  visibility: visible;
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 24px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 14, 20, 0.95);
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  margin-bottom: 24px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}

.app-logo svg {
  width: 34px;
  height: 34px;
  color: var(--accent-bright);
}

.app-logo b {
  color: var(--accent-bright);
}

.app-nav {
  display: grid;
  gap: 6px;
}

.app-nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 6px;
  color: rgba(237, 247, 246, 0.72);
  font-size: 0.94rem;
  font-weight: 600;
}

.app-nav a::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-right: 11px;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

.app-nav a.active,
.app-nav a:hover {
  background: rgba(59, 130, 246, 0.16);
  color: #27dfcf;
}

.sidebar-actions {
  margin-top: auto;
}

.sidebar-actions button,
.header-actions button,
.card-topline button,
.quick-actions button {
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.11);
  color: #dffdfa;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.sidebar-actions button {
  width: 100%;
  min-height: 40px;
}

.dashboard-main {
  min-width: 0;
  padding: 28px;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.dashboard-header p {
  margin-bottom: 6px;
  color: var(--accent-bright);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-header h2 {
  color: #f8fbff;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.header-actions button,
.card-topline button {
  min-height: 38px;
  padding: 0 14px;
}

.header-actions button:last-child {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color: transparent;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.summary-card,
.dash-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(12, 30, 38, 0.82);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.summary-card {
  min-height: 130px;
  padding: 18px;
}

.summary-card span,
.card-topline span {
  display: block;
  margin-bottom: 8px;
  color: rgba(237, 247, 246, 0.62);
  font-size: 0.82rem;
  font-weight: 700;
}

.summary-card strong {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: 2rem;
}

.summary-card small {
  color: #74d9ce;
  font-size: 0.82rem;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 14px;
}

.dash-card {
  min-width: 0;
  padding: 18px;
}

.card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.card-topline h3 {
  margin: 0;
  color: #f8fbff;
  font-size: 1.12rem;
}

.card-topline strong {
  color: #37e0d0;
  font-size: 2.1rem;
}

.bar-list {
  display: grid;
  gap: 16px;
}

.bar-list p {
  display: grid;
  grid-template-columns: 145px 1fr 42px;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: rgba(237, 247, 246, 0.78);
  font-size: 0.86rem;
}

.bar-list b {
  height: 8px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, var(--accent-bright) var(--value), rgba(255, 255, 255, 0.1) var(--value));
}

.bar-list em {
  color: #fff;
  font-style: normal;
  font-weight: 800;
}

.donut-wrap {
  display: grid;
  grid-template-columns: 128px 1fr;
  align-items: center;
  gap: 20px;
}

.donut-chart {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #0c1e26 0 48%, transparent 49%),
    conic-gradient(var(--accent-bright) 0 78%, #d9ab43 78% 91%, #d85a5a 91% 97%, rgba(255, 255, 255, 0.15) 97% 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}

.donut-wrap ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.donut-wrap li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(237, 247, 246, 0.78);
  font-size: 0.86rem;
}

.donut-wrap li b,
.alert-list b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-bright);
}

.donut-wrap li:nth-child(2) b,
.alert-list .warning b {
  background: var(--gold);
}

.donut-wrap li:nth-child(3) b,
.alert-list .critical b {
  background: #e35b5b;
}

.donut-wrap li:nth-child(4) b {
  background: rgba(255, 255, 255, 0.45);
}

.donut-wrap li span {
  margin-left: auto;
  color: #fff;
  font-weight: 800;
}

.alert-list {
  display: grid;
  gap: 12px;
}

.alert-list p {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(237, 247, 246, 0.8);
  font-size: 0.86rem;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-actions button {
  min-height: 42px;
}

.inventory-card {
  grid-column: 1 / -1;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: rgba(237, 247, 246, 0.82);
  font-size: 0.9rem;
}

th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  text-align: left;
}

th {
  color: rgba(237, 247, 246, 0.58);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 800;
}

.status.good {
  background: rgba(59, 130, 246, 0.16);
  color: #38e6d4;
}

.status.warn {
  background: rgba(217, 171, 67, 0.16);
  color: #f0c96a;
}

.status.risk {
  background: rgba(227, 91, 91, 0.16);
  color: #ff8d8d;
}

@media (max-width: 1100px) {
  .dashboard-page {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .app-logo span,
  .app-nav a,
  .sidebar-actions button {
    font-size: 0;
  }

  .app-logo,
  .app-nav a {
    justify-content: center;
  }

  .app-nav a::before {
    margin-right: 0;
  }

  .summary-grid,
  .dashboard-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-card {
    grid-column: 1 / -1;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .dashboard-page {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    min-height: auto;
    padding: 14px;
  }

  .app-logo span,
  .app-nav a,
  .sidebar-actions button {
    font-size: inherit;
  }

  .app-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-nav a {
    justify-content: flex-start;
  }

  .app-nav a::before {
    margin-right: 8px;
  }

  .dashboard-main {
    padding: 18px;
  }

  .dashboard-header,
  .header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .summary-grid,
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
}

.dense-dashboard {
  display: block;
  min-height: 100vh;
  padding: 7px 10px 12px;
  background:
    radial-gradient(circle at 72% 12%, rgba(37, 99, 235, 0.14), transparent 24%),
    linear-gradient(180deg, #061018, #041016 46%, #030b10);
  color: #e8f7f6;
}

@media (min-width: 1000px) {
  .dense-dashboard {
    zoom: 0.86;
    min-height: 116.28vh;
  }

  .dense-dashboard > .devices-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 116.28vh;
    min-height: 116.28vh;
  }

  .dense-dashboard > .app-drawer {
    bottom: auto;
    height: 116.28vh;
  }
}

.dense-dashboard[hidden] {
  display: none;
}

.app-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 286px;
  padding: 14px;
  overflow-y: auto;
  border-right: 1px solid rgba(154, 208, 207, 0.16);
  background:
    radial-gradient(circle at 18% 86%, rgba(0, 188, 212, 0.14), transparent 24%),
    #07141c;
  box-shadow: 28px 0 60px rgba(0, 0, 0, 0.38);
  transform: translateX(-105%);
  transition: transform 180ms ease;
}

.app-drawer.open {
  transform: translateX(0);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: none;
  border: 0;
  background: rgba(0, 0, 0, 0.44);
  cursor: pointer;
}

.drawer-backdrop.open {
  display: block;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.drawer-nav {
  display: grid;
  gap: 5px;
}

.drawer-nav small {
  margin: 13px 8px 5px;
  color: #788f91;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.drawer-nav a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 5px;
  color: #c9dddd;
  font-size: 0.82rem;
  font-weight: 800;
}

.drawer-nav a:hover {
  background: rgba(0, 188, 180, 0.18);
  color: #20e7d9;
}

.drawer-nav a::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
  filter:
    drop-shadow(0.45px 0 0 currentColor)
    drop-shadow(-0.45px 0 0 currentColor)
    drop-shadow(0 0.45px 0 currentColor)
    drop-shadow(0 -0.45px 0 currentColor);
}

.dense-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 46px;
  margin-bottom: 7px;
}

.title-group,
.topbar-tools,
.admin-chip {
  display: flex;
  align-items: center;
}

.title-group {
  gap: 12px;
}

.title-group h2 {
  margin: 0;
  color: #f8fbff;
  font-size: 1rem;
  line-height: 1;
}

.title-group p {
  margin: 5px 0 0;
  color: #a6bab9;
  font-size: 0.72rem;
}

.topbar-tools {
  gap: 9px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(154, 208, 207, 0.18);
  border-radius: 6px;
  background: rgba(10, 26, 35, 0.84);
  color: #d9eeee;
  cursor: pointer;
}

.alert-dot {
  position: relative;
  display: grid;
  place-items: center;
  font-size: 0;
}

.alert-dot::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dense-topbar button[aria-label="Settings"],
.devices-topbar button[aria-label="Settings"] {
  display: none;
}

.alert-dot::after {
  content: attr(data-count);
  position: absolute;
  right: -4px;
  top: -6px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  background: #d84256;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
}

.alert-dot:not(.has-live-alerts)::after {
  display: none;
}

.search-box {
  position: relative;
  display: block;
  width: min(32vw, 270px);
}

.search-box span {
  position: absolute;
  left: 12px;
  top: 50%;
  color: #7f9696;
  transform: translateY(-50%);
}

.search-box input {
  width: 100%;
  height: 32px;
  border-color: rgba(154, 208, 207, 0.18);
  border-radius: 6px;
  background: rgba(10, 26, 35, 0.84);
  color: #e8f7f6;
  font-size: 0.72rem;
  padding-left: 34px;
}

.admin-chip {
  gap: 9px;
  min-width: 130px;
}

.admin-chip > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #0fa79b;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
}

.admin-chip strong,
.admin-chip small {
  display: block;
}

.admin-chip strong {
  color: #fff;
  font-size: 0.76rem;
}

.admin-chip small {
  color: #a6bab9;
  font-size: 0.68rem;
}

.dense-content {
  display: grid;
  gap: 7px;
}

.dashboard-security-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 66, 86, 0.72);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(216, 66, 86, 0.2), rgba(10, 26, 35, 0.94));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.dashboard-security-banner[hidden] {
  display: none;
}

.dashboard-security-banner strong {
  display: inline-block;
  margin-left: 8px;
  color: #fff;
  font-size: 0.96rem;
}

.dashboard-security-banner p {
  margin: 7px 0 0;
  color: #ffd8dd;
  font-size: 0.78rem;
  font-weight: 700;
}

.dashboard-security-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dashboard-security-banner button {
  min-width: 112px;
  min-height: 34px;
  border: 1px solid rgba(255, 130, 145, 0.55);
  border-radius: 5px;
  background: rgba(216, 66, 86, 0.2);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.kpi-card,
.panel {
  position: relative;
  border: 1px solid rgba(154, 208, 207, 0.15);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(10, 29, 39, 0.96), rgba(8, 25, 34, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

#dashboardPage .kpi-card:hover,
#dashboardPage .panel:hover,
#dashboardPage .kpi-card:focus-within,
#dashboardPage .panel:focus-within {
  border-color: rgba(36, 226, 211, 0.72);
  background: linear-gradient(180deg, rgba(13, 42, 51, 0.98), rgba(8, 31, 39, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(36, 226, 211, 0.12),
    0 12px 30px rgba(0, 216, 202, 0.1);
  transform: translateY(-1px);
}

#dashboardPage .kpi-card:hover::before,
#dashboardPage .panel:hover::before,
#dashboardPage .kpi-card:focus-within::before,
#dashboardPage .panel:focus-within::before {
  opacity: 1;
}

.kpi-card::before,
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(36, 226, 211, 0.22), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 40%);
  transition: opacity 160ms ease;
}

.kpi-card {
  min-height: 82px;
  padding: 11px 14px;
}

.kpi-card span,
.panel h3 {
  display: block;
  margin: 0 0 7px;
  color: #e8f7f6;
  font-size: 0.78rem;
  font-weight: 800;
}

.kpi-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kpi-card strong {
  color: #fff;
  font-size: 1.55rem;
}

.kpi-card > b,
.mini-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #19c9bd var(--value), rgba(255, 255, 255, 0.1) var(--value));
}

.kpi-card > b {
  margin: 6px 0 9px;
}

.kpi-card.risk {
  border-color: rgba(216, 66, 86, 0.66);
  background: linear-gradient(180deg, rgba(50, 18, 27, 0.96), rgba(11, 24, 31, 0.96));
}

.kpi-card.risk > b {
  background:
    linear-gradient(90deg, #d84256 var(--value), rgba(255, 255, 255, 0.1) var(--value));
}

.kpi-card.risk small {
  color: #ff8d9b;
}

.kpi-card small,
.up {
  color: #40dca5;
  font-size: 0.7rem;
}

.down,
.kpi-card.warning small {
  color: #ff6f73;
}

.windows-mark {
  width: 42px;
  height: 42px;
  background:
    linear-gradient(90deg, transparent 47%, #061018 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, #061018 48% 52%, transparent 53%),
    #0aa4ff;
  transform: skewY(-4deg);
}

.insight-row {
  display: grid;
  grid-template-columns: 1.2fr 1.42fr 1.2fr 1.18fr;
  gap: 7px;
}

.ops-row {
  display: grid;
  grid-template-columns: 1.25fr 1.25fr 0.9fr 1.25fr;
  gap: 7px;
}

.panel {
  min-width: 0;
  padding: 10px 13px;
}

.overview-body,
.version-body {
  display: grid;
  grid-template-columns: 0.8fr 86px 1fr;
  align-items: center;
  gap: 14px;
}

.overview-body strong {
  display: block;
  color: #fff;
  font-size: 1.45rem;
}

.overview-body span,
.version-panel > small {
  color: #a6bab9;
  font-size: 0.72rem;
}

.big-donut,
.version-donut {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  transition: filter 160ms ease, transform 160ms ease;
}

.big-donut {
  background:
    radial-gradient(circle at center, #07141b 0 46%, transparent 47%),
    conic-gradient(#13c7ba 0 78.7%, #2a9ce8 78.7% 93.1%, #e5535f 93.1% 100%);
}

.version-donut {
  background:
    radial-gradient(circle at center, #07141b 0 47%, transparent 48%),
    conic-gradient(#1da4ff 0 57.9%, #12c5b8 57.9% 83.5%, #f2b94f 83.5% 93.6%, #7367e8 93.6% 98.4%, #64747a 98.4% 100%);
}

.overview-body ul,
.version-body ul,
.health-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-body li,
.version-body li,
.health-panel li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c8dbda;
  font-size: 0.72rem;
}

.overview-body li b,
.version-body li b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #13c7ba;
}

.overview-body li:nth-child(2) b,
.version-body li:nth-child(2) b {
  background: #2a9ce8;
}

.overview-body li:nth-child(3) b,
.version-body li:nth-child(3) b {
  background: #e5535f;
}

.version-body li:nth-child(4) b {
  background: #7367e8;
}

.version-body li:nth-child(5) b {
  background: #64747a;
}

.overview-body li span,
.version-body li span,
.health-panel li span,
.pending-panel p span,
.alert-summary p span,
.alert-summary strong span {
  margin-left: auto;
  color: #dff7f5;
}

.trend-panel h3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.trend-panel h3 strong {
  color: #fff;
  font-size: 1.2rem;
}

.trend-panel h3 small {
  display: block;
  color: #a6bab9;
  font-size: 0.62rem;
  text-align: right;
}

.line-chart {
  display: block;
  width: 100%;
  height: 150px;
  max-height: 150px;
  overflow: visible;
}

.grid-lines path {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.axis-labels text {
  fill: #8da3a2;
  font-size: 8px;
}

.trend-area {
  fill: url("#trendFill");
  stroke: none;
  transition: opacity 160ms ease;
}

.trend-line {
  fill: none;
  stroke: #3b82f6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: filter 160ms ease, stroke-width 160ms ease;
}

.trend-points circle {
  fill: #3b82f6;
  stroke: #082028;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: filter 160ms ease, r 160ms ease, transform 160ms ease;
}

#dashboardPage .overview-panel:hover .big-donut,
#dashboardPage .version-panel:hover .version-donut,
.overview-panel:focus-within .big-donut,
.version-panel:focus-within .version-donut {
  filter: drop-shadow(0 0 12px rgba(24, 199, 187, 0.5));
  transform: scale(1.03);
}

#dashboardPage .trend-panel:hover .trend-area,
.trend-panel:focus-within .trend-area {
  opacity: 0.92;
}

#dashboardPage .trend-panel:hover .trend-line,
.trend-panel:focus-within .trend-line {
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(24, 199, 187, 0.72));
}

#dashboardPage .trend-panel:hover .trend-points circle,
.trend-panel:focus-within .trend-points circle {
  r: 4;
  filter: drop-shadow(0 0 5px rgba(24, 199, 187, 0.85));
}

.health-panel li {
  min-height: 19px;
}

.health-panel li::first-letter {
  color: #54e486;
}

.remote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.remote-grid button,
.inventory-head button,
.inventory-footer button {
  min-height: 30px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #dff7f5;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}

.pending-panel p,
.alert-summary p,
.reports-panel p,
.alert-summary strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  color: #c8dbda;
  font-size: 0.78rem;
}

.pending-panel p span,
.alert-summary .warning span {
  color: #f2b94f;
}

.alert-summary .critical span {
  color: #ff6572;
}

.dense-inventory {
  overflow-x: auto;
  padding-bottom: 10px;
}

.inventory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 5px;
}

.inventory-head h3 {
  margin-bottom: 0;
}

.inventory-head div {
  display: flex;
  gap: 8px;
}

.dense-inventory table,
.devices-table {
  min-width: 1180px;
  font-size: 0.72rem;
}

.devices-table td small {
  display: block;
  margin-top: 3px;
  color: #8da3a2;
  font-size: 0.66rem;
  font-weight: 700;
}

.dense-inventory th,
.dense-inventory td {
  padding: 6px 9px;
}

.mini-bar {
  width: 92px;
}

.inventory-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 7px;
  color: #92aaa9;
  font-size: 0.72rem;
}

.inventory-footer div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.inventory-footer button {
  min-width: 28px;
  min-height: 28px;
}

.inventory-footer button:first-child {
  border-color: #10bcb0;
  color: #3b82f6;
}

@media (max-width: 1100px) {
  .kpi-row,
  .insight-row,
  .ops-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .dense-topbar,
  .topbar-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }

  .kpi-row,
  .insight-row,
  .ops-row {
    grid-template-columns: 1fr;
  }
}

.devices-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.devices-page[hidden] {
  display: none;
}

.devices-page,
.device-details-page,
.users-page,
.groups-page,
.applications-page,
.policies-page,
.remote-access-page,
.agent-management-page,
.patch-management-page,
.compliance-page,
.alerts-page,
.reports-page,
.roles-page,
.audit-page,
.settings-page {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
}

.device-details-page[hidden],
.users-page[hidden],
.groups-page[hidden],
.applications-page[hidden],
.policies-page[hidden],
.remote-access-page[hidden],
.agent-management-page[hidden],
.patch-management-page[hidden],
.compliance-page[hidden],
.alerts-page[hidden],
.reports-page[hidden],
.roles-page[hidden],
.audit-page[hidden],
.settings-page[hidden] {
  display: none;
}

.devices-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  padding: 14px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(154, 208, 207, 0.13);
  background:
    radial-gradient(circle at 22% 85%, rgba(0, 188, 212, 0.14), transparent 20%),
    #07141c;
}

.devices-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.devices-brand > .icon-button {
  order: 3;
  flex: 0 0 32px;
  margin-left: auto;
  font-size: 0;
}

.devices-brand > .icon-button::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18M16 15l-3-3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18M16 15l-3-3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.devices-brand > .icon-button[data-sidebar-toggle="true"]::before,
#closeMenuButton[data-sidebar-toggle="true"]::before {
  content: none;
}

.devices-brand > .icon-button[data-sidebar-toggle="true"] .ui-icon,
#closeMenuButton[data-sidebar-toggle="true"] .ui-icon {
  width: 17px;
  height: 17px;
}

.sidebar-collapsed .devices-brand > .icon-button::before {
  transform: rotate(180deg);
}

.devices-brand svg {
  width: 31px;
  height: 31px;
  color: #3b82f6;
}

.devices-brand strong {
  color: #fff;
  font-size: 1rem;
}

.devices-brand span {
  color: #3b82f6;
}

.devices-nav {
  display: grid;
  gap: 4px;
}

.devices-nav small {
  margin: 13px 8px 5px;
  color: #788f91;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.devices-nav a,
.collapse-button {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 5px;
  color: #c9dddd;
  font-size: 0.78rem;
  font-weight: 700;
}

.devices-nav a::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 9px;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
  filter:
    drop-shadow(0.45px 0 0 currentColor)
    drop-shadow(-0.45px 0 0 currentColor)
    drop-shadow(0 0.45px 0 currentColor)
    drop-shadow(0 -0.45px 0 currentColor);
}

.app-nav a,
.drawer-nav a,
.devices-nav a {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E");
}

.app-nav a[href="#dashboard"],
.drawer-nav a[href="#dashboard"],
.devices-nav a[href="#dashboard"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12 12 3l9 9'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

.app-nav a[href="#devices"],
.drawer-nav a[href="#devices"],
.devices-nav a[href="#devices"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M12 16v4'/%3E%3C/svg%3E");
}

.app-nav a[href="#users"],
.drawer-nav a[href="#users"],
.devices-nav a[href="#users"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.8-4 4.5-6 8-6s6.2 2 8 6'/%3E%3C/svg%3E");
}

.app-nav a[href="#groups"],
.drawer-nav a[href="#groups"],
.devices-nav a[href="#groups"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M2 21c1.4-3.5 3.7-5 7-5s5.6 1.5 7 5'/%3E%3Cpath d='M14 16c2.7.2 4.7 1.8 6 5'/%3E%3C/svg%3E");
}

.app-nav a[href="#policies"],
.drawer-nav a[href="#policies"],
.devices-nav a[href="#policies"],
.app-nav a[href="#compliance"],
.drawer-nav a[href="#compliance"],
.devices-nav a[href="#compliance"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7v5c0 5-3.4 8.5-8 10-4.6-1.5-8-5-8-10V7l8-4Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
}

.app-nav a[href="#alerts"],
.drawer-nav a[href="#alerts"],
.devices-nav a[href="#alerts"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a7 7 0 0 0-7 7v4l-2 3h18l-2-3v-4a7 7 0 0 0-7-7Z'/%3E%3Cpath d='M9 20h6'/%3E%3C/svg%3E");
}

.app-nav a[href="#reports"],
.drawer-nav a[href="#reports"],
.devices-nav a[href="#reports"],
.app-nav a[href="#audit-logs"],
.drawer-nav a[href="#audit-logs"],
.devices-nav a[href="#audit-logs"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
}

.app-nav a[href="#applications"],
.drawer-nav a[href="#applications"],
.devices-nav a[href="#applications"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");
}

.app-nav a[href="#patch-management"],
.drawer-nav a[href="#patch-management"],
.devices-nav a[href="#patch-management"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M3 12h4'/%3E%3Cpath d='M17 12h4'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='m10 12 1.5 1.5L15 10'/%3E%3C/svg%3E");
}

.app-nav a[href="#agent-management"],
.drawer-nav a[href="#agent-management"],
.devices-nav a[href="#agent-management"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 2v4'/%3E%3Cpath d='M15 2v4'/%3E%3Cpath d='M9 18v4'/%3E%3Cpath d='M15 18v4'/%3E%3Cpath d='M2 9h4'/%3E%3Cpath d='M2 15h4'/%3E%3Cpath d='M18 9h4'/%3E%3Cpath d='M18 15h4'/%3E%3C/svg%3E");
}

.app-nav a[href="#remote-access"],
.drawer-nav a[href="#remote-access"],
.devices-nav a[href="#remote-access"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M8 11h8'/%3E%3C/svg%3E");
}

.app-nav a[href="#roles-permissions"],
.drawer-nav a[href="#roles-permissions"],
.devices-nav a[href="#roles-permissions"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M2 21c1.3-4 3.3-6 6-6s4.7 2 6 6'/%3E%3Cpath d='M17 11v6'/%3E%3Cpath d='M14 14h6'/%3E%3C/svg%3E");
}

.app-nav a[href="#settings"],
.drawer-nav a[href="#settings"],
.devices-nav a[href="#settings"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.1 2.1-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21h-3v-.7a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1-2.1-2.1.1-.1A1.7 1.7 0 0 0 5 15a1.7 1.7 0 0 0-1.6-1H3v-3h.4A1.7 1.7 0 0 0 5 10a1.7 1.7 0 0 0-.3-1.9l-.1-.1 2.1-2.1.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.6V3h3v.7a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1 2.1 2.1-.1.1A1.7 1.7 0 0 0 19 10a1.7 1.7 0 0 0 1.6 1h.4v3h-.4a1.7 1.7 0 0 0-1.2 1Z'/%3E%3C/svg%3E");
}

.devices-nav a.active {
  background: rgba(0, 188, 180, 0.24);
  color: #19d8ca;
}

.collapse-button {
  width: 100%;
  margin-top: 16px;
  border: 1px solid rgba(154, 208, 207, 0.12);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.devices-main {
  min-width: 0;
}

.devices-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-height: 54px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.1);
  background: rgba(5, 16, 23, 0.98);
}

.devices-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 10px;
  padding: 14px;
}

.page-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.page-heading h2 {
  color: #fff;
  font-size: 1.25rem;
}

.page-heading p {
  margin: 5px 0 0;
  color: #8fa5a6;
  font-size: 0.7rem;
}

.device-summary-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.device-summary-card {
  position: relative;
  min-height: 96px;
  padding: 15px 64px 15px 17px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 7px;
  background: rgba(10, 29, 39, 0.95);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.device-summary-icon {
  position: absolute;
  top: 15px;
  right: 17px;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(16, 207, 193, 0.3);
  border-radius: 6px;
  background: rgba(16, 207, 193, 0.1);
  color: #2ee2d4;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.device-summary-card.risk .device-summary-icon {
  border-color: rgba(240, 80, 94, 0.34);
  background: rgba(240, 80, 94, 0.1);
  color: #ff6f7c;
}

.device-summary-card.restart .device-summary-icon {
  border-color: rgba(39, 152, 232, 0.34);
  background: rgba(39, 152, 232, 0.1);
  color: #54b5f4;
}

.device-summary-card.warn .device-summary-icon {
  border-color: rgba(231, 173, 54, 0.34);
  background: rgba(231, 173, 54, 0.1);
  color: #f2bd4b;
}

body[data-theme="light"] .device-summary-icon {
  border-color: #c9ddff;
  background: #eef5ff;
  color: #2563eb;
}

body[data-theme="light"] .device-summary-card.good .device-summary-icon {
  border-color: #bfe9df;
  background: #ebfaf6;
  color: #078b75;
}

body[data-theme="light"] .device-summary-card.risk .device-summary-icon {
  border-color: #ffd0d5;
  background: #fff0f2;
  color: #d92e44;
}

body[data-theme="light"] .device-summary-card.warn .device-summary-icon {
  border-color: #f4d89a;
  background: #fff8e6;
  color: #a96b00;
}

#dashboardPage .device-summary-card:hover,
#dashboardPage .device-summary-card:focus-within {
  border-color: rgba(36, 226, 211, 0.72);
  background: rgba(12, 43, 51, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(36, 226, 211, 0.12),
    0 12px 28px rgba(0, 216, 202, 0.09);
  transform: translateY(-1px);
}

.device-summary-card span,
.device-summary-card small {
  display: block;
  color: #9fb5b6;
  font-size: 0.72rem;
  font-weight: 700;
}

.device-summary-card strong {
  display: block;
  margin: 8px 0 6px;
  color: #fff;
  font-size: 1.65rem;
}

.device-summary-card::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 8px;
  border-radius: 99px;
  background: #10cfc1;
}

.device-summary-card.warn::after {
  background: #e7ad36;
}

.device-summary-card.risk::after {
  background: #f0505e;
}

.device-summary-card.restart::after {
  background: #2798e8;
}

.devices-table-panel {
  padding: 0;
  overflow: hidden;
}

.device-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.1);
}

.device-search {
  position: relative;
  width: 190px;
}

.device-search span {
  position: absolute;
  left: 10px;
  top: 50%;
  color: #789091;
  transform: translateY(-50%);
}

.device-search input,
.device-toolbar select,
.device-toolbar button {
  height: 32px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 5px;
  background: rgba(5, 16, 23, 0.72);
  color: #d7eeee;
  font: inherit;
  font-size: 0.72rem;
}

.device-search input {
  width: 100%;
  padding: 0 10px 0 30px;
}

.device-toolbar button,
.device-toolbar select {
  padding: 0 10px;
}

#devicesPendingOnlyButton {
  color: #19d8ca;
  font-weight: 800;
}

.toolbar-spacer {
  margin-left: auto;
}

.primary-action {
  background: linear-gradient(135deg, #0a978d, #08766f) !important;
  border-color: transparent !important;
}

.devices-table {
  min-width: 960px;
  font-size: 0.66rem;
}

.devices-table th,
.devices-table td {
  padding: 8px 9px;
}

.devices-table tr.selected {
  background: rgba(0, 188, 180, 0.1);
  box-shadow: inset 3px 0 0 #3b82f6;
}

.device-detail {
  min-height: calc(100vh - 82px);
  padding: 18px;
}

.detail-close {
  float: right;
  border: 0;
  background: transparent;
  color: #8fa5a6;
  cursor: pointer;
  font-size: 1.1rem;
}

.device-detail h3 {
  margin-bottom: 18px;
}

.device-hero {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.11);
}

.device-thumb {
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.device-thumb .windows-mark {
  width: 34px;
  height: 34px;
}

.device-hero strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
}

.device-hero p {
  margin: 7px 0 0;
  color: #9fb5b6;
  font-size: 0.74rem;
  line-height: 1.5;
}

.device-specs {
  display: grid;
  gap: 13px;
  margin: 16px 0;
}

.device-specs div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.device-specs dt {
  color: #9fb5b6;
  font-size: 0.72rem;
}

.device-specs dd {
  margin: 0;
  color: #fff;
  font-size: 0.72rem;
  text-align: right;
}

.compliance-score,
.remote-actions-card {
  padding: 14px;
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.58);
}

.compliance-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.compliance-score h4,
.remote-actions-card h4 {
  margin: 0 0 8px;
  font-size: 0.86rem;
}

.compliance-score p {
  margin: 7px 0 0;
  color: #9fb5b6;
  font-size: 0.7rem;
}

.score-ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 7px solid rgba(255, 255, 255, 0.1);
  border-top-color: #39d16c;
  border-right-color: #39d16c;
  border-bottom-color: #39d16c;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
}

.remote-actions-card {
  margin-top: 12px;
}

.remote-actions-card div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.remote-actions-card button {
  min-height: 34px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #dff7f5;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

.remote-actions-card .more-actions {
  width: 100%;
  margin-top: 10px;
}

.mesh-portal-launch {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(18, 211, 201, 0.14), rgba(16, 124, 184, 0.08)),
    rgba(5, 16, 23, 0.74);
  display: flex;
  justify-content: center;
  min-height: 360px;
  text-align: center;
}

.mesh-portal-launch h3 {
  color: #fff;
  font-size: 22px;
  margin: 0 0 10px;
}

.mesh-portal-launch p {
  color: #9fb5b6;
  margin: 0 0 18px;
}

.mesh-portal-launch a {
  align-items: center;
  background: #12d3c9;
  border-radius: 4px;
  color: #001516;
  display: inline-flex;
  font-weight: 800;
  min-height: 40px;
  padding: 0 18px;
  text-decoration: none;
}

@media (max-width: 980px) {
  .devices-page,
  .device-details-page,
  .users-page,
  .groups-page,
  .applications-page,
  .policies-page,
  .remote-access-page,
  .agent-management-page,
  .patch-management-page,
  .compliance-page,
  .alerts-page,
  .reports-page,
  .roles-page,
  .audit-page,
  .settings-page {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .devices-brand strong,
  .devices-nav a,
  .devices-nav small,
  .collapse-button {
    font-size: 0;
  }

  .devices-workspace {
    grid-template-columns: 1fr;
  }
}

.policies-main {
  min-width: 0;
}

.remote-access-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.users-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.groups-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.applications-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.agent-management-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.patch-management-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.compliance-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.alerts-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.reports-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.roles-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.audit-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.settings-page {
  min-height: 100vh;
  padding: 0;
  background: #061017;
  color: #e8f7f6;
}

.settings-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid rgba(154, 208, 207, 0.1);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.42);
}

.settings-card strong {
  display: block;
  color: #fff;
  font-size: 0.9rem;
}

.settings-card span {
  display: block;
  margin-top: 5px;
  color: #9fb5b6;
  font-size: 0.72rem;
  line-height: 1.45;
}

.settings-side-panel,
.settings-detail-panel {
  padding: 16px;
}

.settings-detail-panel {
  grid-column: 1 / -1;
}

.settings-form {
  margin-top: 12px;
}

.settings-detail-panel .security-push-status {
  margin-top: 12px;
}

@media (min-width: 981px) {
  .dense-dashboard {
    transition: grid-template-columns 220ms cubic-bezier(0.2, 0, 0, 1);
  }

  #dashboardPage {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
  }

  #dashboardPage[hidden] {
    display: none;
  }

  #dashboardPage > .app-drawer {
    position: sticky;
    inset: auto;
    top: 0;
    grid-row: 1 / -1;
    width: auto;
    min-width: 0;
    height: 116.28vh;
    min-height: 116.28vh;
    box-shadow: none;
    transform: none;
  }

  #dashboardPage > .dense-topbar,
  #dashboardPage > .dense-content {
    grid-column: 2;
    min-width: 0;
  }

  #dashboardPage > .dense-topbar {
    margin-bottom: 0;
    padding: 0 10px;
  }

  #dashboardPage > .drawer-backdrop,
  #dashboardPage #menuButton {
    display: none;
  }

  .dense-dashboard.sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  #dashboardPage.sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .sidebar-collapsed > .devices-sidebar {
    padding-right: 10px;
    padding-left: 10px;
  }

  .sidebar-collapsed .devices-brand {
    justify-content: center;
  }

  .sidebar-collapsed .devices-brand > svg,
  .sidebar-collapsed .devices-brand > strong,
  .sidebar-collapsed .devices-nav small,
  .sidebar-collapsed .drawer-nav small,
  .sidebar-collapsed .sidebar-user-panel .admin-chip > div {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
  }

  .sidebar-collapsed .drawer-head .devices-brand {
    display: none;
  }

  .sidebar-collapsed .devices-brand > svg,
  .sidebar-collapsed .devices-brand > strong,
  .sidebar-collapsed .sidebar-user-panel .admin-chip > div {
    position: absolute;
    pointer-events: none;
  }

  .sidebar-collapsed .devices-nav small,
  .sidebar-collapsed .drawer-nav small {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
  }

  .sidebar-collapsed .devices-brand > .icon-button {
    margin: 0 auto;
  }

  .sidebar-collapsed .devices-nav a {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .sidebar-collapsed .devices-nav .nav-label,
  .sidebar-collapsed .drawer-nav .nav-label {
    width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
  }

  .sidebar-collapsed .devices-nav a:hover,
  .sidebar-collapsed .drawer-nav a:hover {
    transform: none;
  }

  .sidebar-collapsed .devices-nav a::before {
    width: 18px;
    height: 18px;
    margin-right: 0;
  }

  .sidebar-collapsed .drawer-head {
    justify-content: center;
  }

  .sidebar-collapsed .drawer-nav a {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .sidebar-collapsed .drawer-nav a::before {
    width: 18px;
    height: 18px;
    margin-right: 0;
  }

  .sidebar-collapsed .sidebar-user-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding-right: 0;
    padding-left: 0;
  }

  .sidebar-collapsed .sidebar-user-panel .admin-chip {
    padding: 0;
  }

  #closeMenuButton {
    flex: 0 0 32px;
    font-size: 0;
  }

  #closeMenuButton::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18M16 15l-3-3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18M16 15l-3-3 3-3'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  #dashboardPage.sidebar-collapsed #closeMenuButton::before {
    transform: rotate(180deg);
  }
}

body[data-theme="light"] .sidebar-collapsed .devices-nav a,
body[data-theme="light"] .sidebar-collapsed .drawer-nav a {
  color: #142733;
}

body[data-theme="light"] .sidebar-collapsed .devices-nav a.active,
body[data-theme="light"] .sidebar-collapsed .drawer-nav a.active {
  color: #111827;
}

.mail-settings-panel {
  grid-column: 1 / -1;
}

.mail-settings-form,
.agent-settings-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mail-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.mail-settings-actions button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: #dff7f5;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .mail-settings-form,
  .agent-settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mail-settings-form,
  .agent-settings-form {
    grid-template-columns: 1fr;
  }

  .mail-settings-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.users-table-panel {
  padding: 0;
  overflow: hidden;
}

.users-side-panel,
.user-invite-panel {
  padding: 16px;
}

.user-invite-panel {
  grid-column: 1 / -1;
}

.users-table-panel td strong {
  display: block;
  color: #eafffd;
  font-size: 0.72rem;
}

.users-table-panel td small {
  display: block;
  margin-top: 3px;
  color: #8fa5a6;
  font-size: 0.66rem;
}

#usersPage .users-workspace {
  padding: 18px;
}

#usersPage .details-heading {
  align-items: center;
  margin-bottom: 14px;
}

#usersPage .users-heading-actions,
#usersPage .device-toolbar {
  align-items: center;
  gap: 8px;
}

#usersPage :is(.users-heading-actions button, .device-toolbar button, .employee-inspector-actions button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#usersPage .button-icon,
#usersPage .button-icon svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

#usersPage :is(.button-icon, .summary-card-icon, .table-icon-text, .employee-directory-details dt, .employee-section-title, .employee-inspector-actions button) svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#usersPage .users-summary-grid {
  gap: 12px;
  margin-bottom: 12px;
}

#usersPage .users-summary-grid .device-summary-card {
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

#usersPage .users-summary-grid .device-summary-card > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#usersPage .users-summary-grid .device-summary-card strong {
  font-size: 1.65rem;
  line-height: 1;
}

#usersPage .summary-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  color: #2f6fed;
  background: #e8f0ff;
  border-radius: 7px;
}

#usersPage .summary-card-icon svg {
  width: 22px;
  height: 22px;
}

#usersPage .users-summary-grid article:nth-child(2) .summary-card-icon {
  color: #008f7f;
  background: #ddf8f3;
}

#usersPage .users-summary-grid article:nth-child(3) .summary-card-icon {
  color: #b77900;
  background: #fff2d5;
}

#usersPage .users-summary-grid article:nth-child(4) .summary-card-icon {
  color: #167a49;
  background: #dcf7e9;
}

#usersPage .users-layout {
  grid-template-columns: minmax(680px, 1fr) minmax(350px, 410px);
  gap: 12px;
  align-items: start;
}

#usersPage .users-table-panel {
  min-height: 560px;
}

#usersPage .device-toolbar {
  padding: 12px;
  border-bottom: 1px solid rgba(143, 181, 193, 0.22);
}

#usersPage .device-search {
  min-width: 260px;
  flex: 1 1 320px;
}

#usersPage .device-search > span,
#usersPage .device-search > span svg {
  width: 16px;
  height: 16px;
}

#usersPage .users-filter-button {
  flex: 0 0 auto;
}

#usersPage .dense-inventory {
  overflow: auto;
}

#usersPage .devices-table {
  min-width: 1040px;
}

#usersPage .devices-table th {
  white-space: nowrap;
}

#usersPage .devices-table td {
  vertical-align: middle;
}

#usersPage .employee-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

#usersPage .employee-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 50%;
  color: #174ea6;
  background: #dce9ff;
  font-size: 0.72rem;
  font-weight: 800;
}

#usersPage .employee-avatar.large {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  font-size: 0.9rem;
}

#usersPage .table-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#usersPage .table-icon-text svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #67808e;
}

#usersPage .employee-row-action {
  width: 30px;
  height: 30px;
  padding: 0;
}

#usersPage .employee-row-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#usersPage .users-side-panel {
  padding: 0;
  overflow: hidden;
  position: sticky;
  top: 12px;
}

#usersPage .employee-inspector-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(143, 181, 193, 0.22);
}

#usersPage .employee-inspector-close {
  display: none;
  width: 34px;
  height: 34px;
  margin-left: auto;
  padding: 0;
  flex: 0 0 34px;
}

#usersPage .employee-inspector-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#usersPage.employee-inspector-expanded::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 119;
  background: rgba(4, 16, 24, 0.44);
  backdrop-filter: blur(2px);
}

#usersPage.employee-inspector-expanded .users-side-panel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 120;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  box-shadow: 0 22px 60px rgba(4, 16, 24, 0.32);
  animation: employee-inspector-enter 180ms ease-out both;
}

#usersPage.employee-inspector-expanded .employee-inspector-close {
  display: inline-grid;
  place-items: center;
}

@keyframes employee-inspector-enter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #usersPage.employee-inspector-expanded .users-side-panel {
    animation: none;
  }
}

#usersPage .employee-inspector-head > div {
  min-width: 0;
}

#usersPage .employee-inspector-head small {
  display: block;
  margin-bottom: 2px;
  color: #718996;
  text-transform: uppercase;
  font-size: 0.6rem;
  font-weight: 800;
}

#usersPage .employee-inspector-head h3,
#usersPage .employee-inspector-head p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#usersPage .employee-inspector-head h3 {
  margin: 0;
  font-size: 1rem;
}

#usersPage .employee-inspector-head p {
  margin: 3px 0 0;
  font-size: 0.7rem;
}

#usersPage .employee-directory-details {
  margin: 0;
  padding: 5px 16px;
}

#usersPage .employee-directory-details > div {
  display: grid;
  grid-template-columns: minmax(125px, 0.8fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(143, 181, 193, 0.16);
}

#usersPage .employee-directory-details dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #718996;
  font-size: 0.68rem;
}

#usersPage .employee-directory-details dt svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

#usersPage .employee-directory-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 0.7rem;
  font-weight: 750;
}

#usersPage .employee-inspector-section {
  padding: 13px 16px;
  border-top: 1px solid rgba(143, 181, 193, 0.22);
}

#usersPage .employee-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#usersPage .employee-section-title svg {
  width: 16px;
  height: 16px;
  color: #2f6fed;
}

#usersPage .employee-section-title h4 {
  margin: 0;
  flex: 1;
  font-size: 0.74rem;
}

#usersPage .employee-section-title > span {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #174ea6;
  background: #e8f0ff;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
}

#usersPage .employee-device-list {
  display: grid;
  gap: 7px;
}

#usersPage .employee-device-list button {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  text-align: left;
}

#usersPage .employee-device-list button > span:nth-child(2) {
  min-width: 0;
}

#usersPage .employee-device-list button strong,
#usersPage .employee-device-list button small {
  display: block;
}

#usersPage .employee-device-list button small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #718996;
  white-space: nowrap;
  font-size: 0.62rem;
}

#usersPage .employee-device-icon,
#usersPage .employee-device-icon svg {
  width: 22px;
  height: 22px;
}

#usersPage .employee-device-icon svg {
  fill: none;
  stroke: #2f6fed;
  stroke-width: 1.8;
}

#usersPage .employee-group-value {
  margin: 0;
  font-weight: 750;
}

#usersPage .employee-policy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#usersPage .employee-policy-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(143, 181, 193, 0.24);
  border-radius: 5px;
  font-size: 0.64rem;
}

#usersPage .employee-policy-list svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: #2f6fed;
  stroke-width: 1.8;
}

#usersPage .employee-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(143, 181, 193, 0.22);
}

#usersPage .employee-inspector-actions button {
  min-height: 36px;
}

#usersPage .employee-inspector-actions button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

#usersPage .employee-no-device,
#usersPage .users-empty-state {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 100px;
  padding: 16px;
  color: #718996;
  text-align: center;
}

#usersPage .employee-no-device svg,
#usersPage .users-empty-state svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

#usersPage .users-empty-state strong {
  color: inherit;
}

#usersPage .user-invite-panel {
  border-radius: 7px;
}

.security-push-form input {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 5px;
  background: rgba(5, 16, 23, 0.72);
  color: #d7eeee;
  font: inherit;
  font-size: 0.74rem;
  padding: 0 10px;
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.group-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(154, 208, 207, 0.1);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.42);
}

.group-card.selected {
  border-color: rgba(16, 213, 199, 0.42);
  box-shadow: inset 3px 0 0 #3b82f6;
}

.group-empty-state {
  grid-column: 1 / -1;
}

.group-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.group-card h3 {
  color: #fff;
  font-size: 0.94rem;
}

.group-card p {
  margin: 6px 0 12px;
  color: #9fb5b6;
  font-size: 0.74rem;
  line-height: 1.45;
}

.group-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.group-card dl div {
  padding: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}

.group-card dt {
  color: #8fa5a6;
  font-size: 0.66rem;
}

.group-card dd {
  margin: 4px 0 0;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
}

.groups-side-panel,
.group-rules-panel,
.group-create-panel {
  padding: 16px;
}

.group-rules-panel,
.group-create-panel {
  grid-column: 1 / -1;
}

.group-access-control-panel {
  grid-column: 1 / -1;
  padding: 16px;
}

.access-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.access-control-grid article {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.58);
}

.access-control-grid h3 {
  margin: 0;
  color: #fff;
  font-size: 0.94rem;
}

.access-control-grid p,
.access-control-input span {
  margin: 0;
  color: #9fb5b6;
  font-size: 0.74rem;
  line-height: 1.45;
}

.access-control-grid button {
  min-height: 34px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #dff7f5;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0 12px;
}

.access-control-grid .primary-action {
  border-color: #3b82f6;
  background: #2563eb;
  color: #fff;
}

.access-control-input {
  display: grid;
  gap: 7px;
}

.access-control-input input,
.access-control-input select {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 5px;
  background: rgba(5, 16, 23, 0.72);
  color: #dff7f5;
  font-size: 0.76rem;
  padding: 0 10px;
}

.group-members-table {
  margin-top: 12px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(118, 242, 230, 0.12);
  border-radius: 8px;
}

.group-members-table table {
  min-width: 760px;
}

.group-members-table td strong {
  display: block;
  color: #eafffd;
}

.group-members-table td small {
  display: block;
  margin-top: 3px;
  color: #8fa5a6;
}

.applications-table-panel {
  padding: 0;
  overflow: hidden;
}

.applications-side-panel,
.application-activity,
.application-status-panel,
.application-command-history,
.application-deploy-panel {
  padding: 16px;
}

.application-activity,
.application-status-panel,
.application-command-history,
.application-deploy-panel {
  grid-column: 1 / -1;
}

.application-command-history {
  overflow-x: auto;
}

.application-status-panel {
  overflow-x: auto;
}

.application-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.application-status-grid article {
  min-height: 88px;
  padding: 12px;
  border: 1px solid rgba(154, 208, 207, 0.12);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.5);
}

.application-status-grid article.good {
  border-color: rgba(57, 209, 108, 0.32);
}

.application-status-grid article.warn {
  border-color: rgba(255, 193, 79, 0.34);
}

.application-status-grid article.risk {
  border-color: rgba(255, 95, 109, 0.38);
}

.application-status-grid span,
.application-status-grid small,
.application-status-grid em {
  display: block;
  color: #9fb5b6;
  font-size: 0.68rem;
  font-weight: 800;
}

.application-status-grid em {
  min-height: 16px;
  margin-top: 7px;
  color: #7fd8d3;
  font-style: normal;
}

.application-status-grid strong {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-size: 1rem;
}

.application-status-grid button {
  width: 100%;
  min-height: 30px;
  margin-top: 10px;
  border: 1px solid rgba(16, 213, 199, 0.32);
  border-radius: 5px;
  background: rgba(16, 213, 199, 0.1);
  color: #14f0df;
  font-size: 0.7rem;
  font-weight: 900;
}

.application-status-grid button:hover {
  background: rgba(16, 213, 199, 0.18);
}

.application-status-panel .devices-table td:first-child {
  min-width: 330px;
  white-space: normal;
}

.application-history-table {
  margin: 10px 0 14px;
}

.applications-table-panel td strong {
  display: block;
  color: #eafffd;
  font-size: 0.72rem;
}

.applications-table-panel td small {
  display: block;
  margin-top: 3px;
  color: #8fa5a6;
  font-size: 0.66rem;
}

.app-catalog-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.app-catalog-icon img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.app-catalog-icon.generic {
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  background: linear-gradient(145deg, #2563eb, #13202a);
}

.remote-main,
.users-main,
.groups-main,
.applications-main,
.agent-main,
.patch-main,
.compliance-main,
.alerts-main,
.reports-main,
.roles-main,
.audit-main,
.settings-main {
  min-width: 0;
}

.remote-workspace,
.users-workspace,
.groups-workspace,
.applications-workspace,
.agent-workspace,
.patch-workspace,
.compliance-workspace,
.alerts-workspace,
.reports-workspace,
.roles-workspace,
.audit-workspace,
.settings-workspace {
  padding: 16px;
}

.remote-summary-grid,
.users-summary-grid,
.groups-summary-grid,
.applications-summary-grid,
.agent-summary-grid,
.patch-summary-grid,
.compliance-summary-grid,
.alerts-summary-grid,
.reports-summary-grid,
.roles-summary-grid,
.audit-summary-grid,
.settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.remote-layout,
.users-layout,
.groups-layout,
.applications-layout,
.agent-layout,
.patch-layout,
.compliance-layout,
.alerts-layout,
.reports-layout,
.roles-layout,
.audit-layout,
.settings-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 390px;
  gap: 10px;
}

.remote-layout {
  align-items: start;
}

.patch-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.remote-device-list,
.remote-session-panel,
.session-history,
.remote-live-session,
.users-table-panel,
.users-side-panel,
.user-invite-panel,
.groups-grid,
.groups-side-panel,
.group-rules-panel,
.group-create-panel,
.applications-table-panel,
.applications-side-panel,
.application-activity,
.application-deploy-panel,
.agent-table-panel,
.agent-side-panel,
.agent-activity,
.patch-table-panel,
.patch-side-panel,
.patch-activity,
.security-push-panel,
.compliance-table-panel,
.compliance-side-panel,
.compliance-evidence,
.remediation-panel,
.alerts-table-panel,
.alerts-side-panel,
.alerts-timeline,
.alert-triage-panel,
.report-catalog,
.reports-side-panel,
.recent-reports,
.report-builder-panel,
.roles-table-panel,
.roles-side-panel,
.admin-list,
.role-editor-panel,
.audit-table-panel,
.audit-side-panel,
.audit-integrity,
.audit-export-panel,
.settings-list,
.settings-side-panel,
.settings-detail-panel {
  min-width: 0;
}

.remote-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.remote-list-head h3 {
  margin: 0;
  color: #fff;
  font-size: 0.96rem;
}

.remote-list-head p {
  margin: 5px 0 0;
  color: #9fb5b6;
  font-size: 0.74rem;
}

.remote-list-head button,
.remote-device-card button,
.remote-action-grid button,
.remote-action-grid .remote-action-link,
.live-session-stats button,
.session-tabs button {
  min-height: 32px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #dff7f5;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0 11px;
}

.remote-action-grid .remote-action-link {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  text-decoration: none;
}

.agent-row-action-status {
  display: block;
  margin-top: 6px;
  color: #9fb5b6;
  font-size: 0.68rem;
  line-height: 1.3;
  white-space: normal;
}

.remote-device-list {
  display: grid;
  gap: 8px;
  align-self: start;
}

.remote-device-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 12px;
  border: 1px solid rgba(154, 208, 207, 0.1);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.5);
}

.remote-device-card.selected {
  border-color: rgba(16, 213, 199, 0.34);
  box-shadow: inset 3px 0 0 #3b82f6;
}

.remote-device-card.muted {
  opacity: 0.72;
}

.remote-device-card strong,
.mesh-status h3 {
  display: block;
  color: #fff;
  font-size: 0.88rem;
}

.remote-device-card span:not(.status),
.mesh-status p {
  display: block;
  margin-top: 5px;
  color: #9fb5b6;
  font-size: 0.72rem;
}

.remote-session-panel {
  align-self: start;
}

.mesh-status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.1);
}

.mesh-status div {
  min-width: 0;
}

.mesh-status > span {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 8px solid rgba(255, 255, 255, 0.1);
  border-top-color: #39d16c;
  border-right-color: #39d16c;
  border-bottom-color: #39d16c;
  border-radius: 50%;
}

.remote-session-details {
  display: grid;
  gap: 11px;
  margin: 15px 0;
}

.remote-session-details div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.08);
}

.remote-session-details dt {
  flex: 0 0 95px;
  color: #9fb5b6;
  font-size: 0.72rem;
}

.remote-session-details dd {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.remote-session-details dd.remote-node-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.remote-action-grid .primary-action {
  grid-column: 1 / -1;
}

.remote-action-grid .remote-command-status {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: #9fded8;
  line-height: 1.35;
}

.remote-security {
  margin-top: 12px;
  padding: 13px;
  background: rgba(5, 16, 23, 0.58);
}

.remote-security-list {
  display: grid;
  gap: 9px;
}

.remote-security-list p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  min-width: 0;
  color: #d4e7e6;
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.session-history {
  grid-column: 1 / -1;
}

.agent-table-panel {
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.agent-side-panel {
  align-self: start;
}

.agent-activity {
  grid-column: 1 / -1;
}

.agent-command-history {
  grid-column: 1 / -1;
  padding: 0;
  overflow-x: auto;
}

.agent-evidence-panel {
  grid-column: 1 / -1;
  padding: 0;
  overflow-x: auto;
}

.agent-command-history .remote-list-head,
.agent-evidence-panel .remote-list-head {
  padding: 14px 14px 0;
}

.agent-command-history .devices-table td:last-child,
.agent-evidence-panel .devices-table td:last-child {
  max-width: 520px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

.agent-command-history .devices-table,
.agent-evidence-panel .devices-table,
.audit-mail-evidence .devices-table {
  table-layout: fixed;
  width: 100%;
}

.agent-result-text {
  display: block;
  max-width: 520px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.agent-result-more {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #58a6ff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
}

.agent-result-more:hover,
.agent-result-more:focus-visible {
  color: #8bc2ff;
  text-decoration: underline;
}

.audit-mail-evidence {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
}

.audit-mail-evidence .remote-list-head {
  padding: 14px 14px 0;
}

.audit-log-categories {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: grid;
  gap: 6px;
  padding: 8px;
  background: #f8fbfc;
}

.audit-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 8px;
}

.audit-category-head h3 {
  margin: 0;
  color: #102633;
  font-size: 0.84rem;
}

.audit-category-head span {
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 800;
}

.audit-log-categories button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #d8e6ea;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #244252;
  text-align: left;
  cursor: pointer;
}

.audit-log-categories button:hover,
.audit-log-categories button.active {
  border-color: #b9d8ff;
  border-left-color: #2563eb;
  background: #eef5ff;
}

.audit-log-categories strong {
  min-width: 0;
  color: #102633;
  font-size: 0.76rem;
  line-height: 1.15;
}

.audit-log-categories button > span {
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 800;
}

.audit-log-categories small {
  display: block;
  overflow: hidden;
  color: #667c87;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-log-categories i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #8eb8dc;
  border-radius: 4px;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

@media (min-width: 981px) {
  .audit-page .audit-layout {
    grid-template-columns: 250px minmax(0, 1fr) 340px;
  }

  .audit-page .audit-table-panel { grid-column: 2; }
  .audit-page .audit-side-panel { grid-column: 3; }
  .audit-page .audit-integrity,
  .audit-page .audit-mail-evidence,
  .audit-page .audit-export-panel { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .audit-log-categories { grid-column: 1; grid-row: auto; }
}

.evidence-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.device-control-link,
.device-control-user {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.device-control-link { display: inline-grid; gap: 3px; }
.device-control-link strong,
.device-control-user { color: #2563eb; }
.device-control-link:hover strong,
.device-control-user:hover { text-decoration: underline; }

.device-control-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  justify-content: flex-end;
}

.device-control-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 15, 22, 0.58);
  backdrop-filter: blur(2px);
}

.device-control-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(600px, 100%);
  height: 100%;
  overflow: hidden;
  border-left: 1px solid #cbdde2;
  background: #f7fafb;
  color: #102633;
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.24);
  animation: device-control-enter 180ms ease-out;
}

@keyframes device-control-enter {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.device-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid #d8e6ea;
  background: #fff;
}
.device-control-head h2 { margin: 3px 0; font-size: 1.25rem; }
.device-control-head p,
.device-control-head small { margin: 0; color: #607784; }
.device-control-head .icon-button { width: 36px; height: 36px; font-size: 1.25rem; }

.device-control-form { min-height: 0; overflow: auto; padding: 16px; }
.device-control-section,
.device-control-apply {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid #d8e6ea;
  border-radius: 6px;
  background: #fff;
}
.device-control-section-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.device-control-section h3 { margin: 0 0 3px; font-size: 0.95rem; }
.device-control-section p { margin: 0; color: #607784; font-size: 0.78rem; }
.device-url-list { display: grid; gap: 2px; max-height: 250px; overflow: auto; border: 1px solid #d8e6ea; }
.device-url-list label { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; border-bottom: 1px solid #e7eff2; }
.device-url-list label:last-child { border-bottom: 0; }
.device-url-list input,
.device-control-toggle input,
.device-control-apply input { width: 18px; height: 18px; accent-color: #2563eb; }
.device-control-empty { padding: 12px; }
.device-url-add { display: grid; gap: 6px; margin-top: 12px; color: #526a77; font-size: 0.75rem; font-weight: 700; }
.device-url-add > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.device-url-add input { min-width: 0; }
.device-control-toggle,
.device-control-apply label { display: flex; align-items: flex-start; gap: 10px; }
.device-control-toggle span,
.device-control-apply span { display: grid; gap: 3px; }
.device-control-toggle small,
.device-control-apply small { color: #607784; font-weight: 400; }
.device-control-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.device-control-toggle-grid .device-control-toggle {
  min-height: 64px;
  padding: 10px;
  border: 1px solid #d8e6ea;
  border-radius: 5px;
}
.device-update-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.device-update-settings label { display: grid; gap: 6px; color: #526a77; font-size: 0.75rem; font-weight: 700; }
.device-update-settings select { width: 100%; min-height: 38px; }
.device-control-form :disabled { cursor: not-allowed; opacity: 0.5; }
.device-control-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.device-control-modes label { min-width: 0; }
.device-control-modes input { position: absolute; opacity: 0; pointer-events: none; }
.device-control-modes span {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 6px;
  border: 1px solid #cbdde3;
  border-radius: 5px;
  color: #425d6b;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.device-control-modes input:checked + span { border-color: #2563eb; background: #e8f0ff; color: #174fca; }
.device-control-modes input:focus-visible + span { outline: 2px solid #2563eb; outline-offset: 2px; }
.device-temporary-expiry { display: grid; gap: 6px; margin-top: 12px; color: #526a77; font-size: 0.75rem; font-weight: 700; }
.device-temporary-expiry input { width: 100%; }
.device-control-compact-list { max-height: 160px; }
.device-control-app-search {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: #526a77;
  font-size: 0.75rem;
  font-weight: 700;
}
.device-control-compatibility {
  margin-bottom: 10px !important;
  padding: 9px 10px;
  border-left: 3px solid #e6a700;
  background: #fff7dd;
  color: #654d00 !important;
  line-height: 1.4;
}
.device-installed-application-list {
  display: grid;
  max-height: 360px;
  overflow: auto;
  border: 1px solid #d8e6ea;
}
.device-installed-application {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 90px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 9px 10px;
  border-bottom: 1px solid #e7eff2;
}
.device-installed-application:last-child { border-bottom: 0; }
.device-installed-application-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.device-installed-application-info strong,
.device-installed-application-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.device-installed-application-info small { color: #607784; font-weight: 400; }
.device-app-restriction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: #425d6b;
  font-size: 0.72rem;
  font-weight: 700;
}
.device-app-restriction input { width: 18px; height: 18px; accent-color: #dc3545; }
.device-app-restriction.is-disabled { opacity: 0.5; }
.device-app-uninstall { min-width: 90px; min-height: 34px; padding: 6px 8px; }
.device-application-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-height: 210px;
  overflow: auto;
  border: 1px solid #d8e6ea;
}
.device-application-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 54px;
  padding: 9px 10px;
  border-bottom: 1px solid #e7eff2;
}
.device-application-list label:nth-child(odd) { border-right: 1px solid #e7eff2; }
.device-application-list span { display: grid; gap: 2px; min-width: 0; }
.device-application-list strong,
.device-application-list small { overflow-wrap: anywhere; }
.device-application-list small { color: #607784; font-weight: 400; }
.device-control-note {
  margin-top: 10px !important;
  color: #526a77 !important;
  line-height: 1.45;
}
.device-control-field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: #526a77;
  font-size: 0.75rem;
  font-weight: 700;
}
.device-control-field input { width: 100%; }
.effective-policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #d8e6ea;
  background: #d8e6ea;
}
.effective-policy-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  min-height: 66px;
  padding: 10px;
  background: #fff;
}
.effective-policy-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #173442;
  text-align: right;
}
.effective-policy-grid small {
  grid-column: 1 / -1;
  color: #607784;
  line-height: 1.35;
}
.effective-policy-grid span {
  color: #526a77;
  font-size: 0.74rem;
  font-weight: 700;
}
.device-policy-status dl { margin: 0; border: 1px solid #d8e6ea; }
.device-policy-status dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 8px 10px; border-bottom: 1px solid #e7eff2; }
.device-policy-status dl > div:last-child { border-bottom: 0; }
.device-policy-status dt { color: #607784; }
.device-policy-status dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 700; text-align: right; }
#deviceControlStatus { min-height: 18px; margin: 12px 0 0 28px; color: #1d4ed8; font-weight: 700; }
.device-control-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.device-control-error { padding: 20px; }

body[data-theme="dark"] .device-control-dialog,
body[data-theme="dark"] .device-control-form { background: #071d26; color: #e7f5f8; }
body[data-theme="dark"] .device-control-head,
body[data-theme="dark"] .device-control-section,
body[data-theme="dark"] .device-control-apply { background: #08232d; border-color: #244653; }
body[data-theme="dark"] .device-url-list,
body[data-theme="dark"] .device-url-list label { border-color: #244653; }
body[data-theme="dark"] .device-application-list {
  border-color: #244653;
  background: #244653;
}
body[data-theme="dark"] .device-application-list label {
  border-color: #244653;
  background: #08232d;
}
body[data-theme="dark"] .device-application-list small,
body[data-theme="dark"] .device-control-note,
body[data-theme="dark"] .device-control-field { color: #9eb8c3 !important; }
body[data-theme="dark"] .device-control-app-search,
body[data-theme="dark"] .device-installed-application-info small,
body[data-theme="dark"] .device-app-restriction { color: #9eb8c3; }
body[data-theme="dark"] .device-installed-application-list,
body[data-theme="dark"] .device-installed-application { border-color: #244653; }
body[data-theme="dark"] .device-control-compatibility {
  background: #332b11;
  color: #ffe49a !important;
}
body[data-theme="dark"] .device-control-toggle-grid .device-control-toggle { border-color: #244653; }
body[data-theme="dark"] .device-control-modes span,
body[data-theme="dark"] .device-policy-status dl,
body[data-theme="dark"] .device-policy-status dl > div { border-color: #244653; }
body[data-theme="dark"] .device-control-modes input:checked + span { background: #12355f; color: #bcd4ff; }
body[data-theme="dark"] .effective-policy-grid {
  border-color: #244653;
  background: #244653;
}
body[data-theme="dark"] .effective-policy-grid article { background: #08232d; }
body[data-theme="dark"] .effective-policy-grid strong { color: #e7f5f8; }
body[data-theme="dark"] .effective-policy-grid span,
body[data-theme="dark"] .effective-policy-grid small { color: #9eb8c3; }

@media (max-width: 560px) {
  .device-control-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-control-toggle-grid,
  .device-update-settings,
  .device-application-list,
  .effective-policy-grid { grid-template-columns: 1fr; }
  .device-application-list label:nth-child(odd) { border-right: 0; }
  .device-policy-status dl > div { grid-template-columns: 1fr; gap: 3px; }
  .device-policy-status dd { text-align: left; }
  .device-installed-application { grid-template-columns: minmax(0, 1fr) auto; }
  .device-installed-application-info { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .device-control-dialog { animation: none; }
}

.evidence-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 15, 22, 0.68);
  backdrop-filter: blur(3px);
}

.evidence-viewer-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(900px, 100%);
  max-height: min(760px, 90vh);
  overflow: hidden;
  border: 1px solid #cbdde2;
  border-radius: 8px;
  background: #fff;
  color: #102633;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.evidence-viewer-head,
.evidence-viewer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #d8e6ea;
}

.evidence-viewer-head h2 {
  margin: 6px 0 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.evidence-viewer-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: #f7fafb;
}

.evidence-viewer-body pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 0.78rem/1.55 Consolas, "Courier New", monospace;
  color: #102633;
}

.evidence-readable {
  display: grid;
  gap: 16px;
}

.evidence-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
}

.evidence-field {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #d8e6ea;
  border-radius: 6px;
  background: #fff;
}

.evidence-field dt {
  margin-bottom: 5px;
  color: #607685;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.evidence-field dd {
  margin: 0;
  color: #102633;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.evidence-section {
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid #d8e6ea;
}

.evidence-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #102633;
  font-size: 0.9rem;
}

.evidence-section h3 span {
  color: #2563eb;
  font-size: 0.75rem;
}

.evidence-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #d8e6ea;
  border-radius: 6px;
}

.evidence-data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.78rem;
}

.evidence-data-table th,
.evidence-data-table td {
  min-width: 120px;
  padding: 9px 10px;
  border-bottom: 1px solid #e5edf0;
  color: #263d49;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.evidence-data-table th {
  background: #edf4f7;
  color: #526a78;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.evidence-value-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.evidence-value-list span {
  padding: 6px 9px;
  border: 1px solid #cbdde3;
  border-radius: 4px;
  background: #fff;
  color: #263d49;
}

.evidence-empty {
  margin: 0;
  color: #607685;
}

.evidence-raw-json {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #d8e6ea;
}

.evidence-raw-json summary {
  color: #2563eb;
  cursor: pointer;
  font-weight: 700;
}

.devices-nav a,
.drawer-nav a {
  position: relative;
  overflow: hidden;
  transition:
    background-color 140ms ease-out,
    color 140ms ease-out,
    transform 140ms ease-out;
}

.devices-nav a:hover,
.drawer-nav a:hover {
  transform: translateX(2px);
}

.devices-nav a:active,
.drawer-nav a:active {
  transform: scale(0.985);
}

.devices-nav a::after,
.drawer-nav a::after {
  content: "";
  position: absolute;
  inset: 7px auto 7px 2px;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleY(0.35);
  transition:
    opacity 160ms ease-out,
    transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.devices-nav a.active::after,
.drawer-nav a.active::after {
  opacity: 1;
  transform: scaleY(1);
}

.nav-label,
.devices-brand > strong,
.devices-brand > svg,
.sidebar-user-panel .admin-chip > div,
.devices-nav small,
.drawer-nav small {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 150ms ease-out,
    transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.nav-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-raw-json pre {
  margin-top: 10px;
}

body[data-theme="dark"] .evidence-field,
body[data-theme="dark"] .evidence-data-table,
body[data-theme="dark"] .evidence-value-list span {
  border-color: #24434e;
  background: #0a2028;
}

body[data-theme="dark"] .evidence-field dt,
body[data-theme="dark"] .evidence-empty {
  color: #8faab4;
}

body[data-theme="dark"] .evidence-field dd,
body[data-theme="dark"] .evidence-section h3,
body[data-theme="dark"] .evidence-data-table th,
body[data-theme="dark"] .evidence-data-table td,
body[data-theme="dark"] .evidence-value-list span {
  color: #e6f2f5;
}

body[data-theme="dark"] .evidence-section,
body[data-theme="dark"] .evidence-raw-json,
body[data-theme="dark"] .evidence-data-table th,
body[data-theme="dark"] .evidence-data-table td {
  border-color: #24434e;
}

body[data-theme="dark"] .evidence-data-table th {
  background: #102b34;
}

.evidence-viewer-body img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.evidence-viewer-actions {
  justify-content: flex-end;
  border-top: 1px solid #d8e6ea;
  border-bottom: 0;
}

@media (max-width: 640px) {
  .evidence-viewer-modal { padding: 10px; }
  .evidence-viewer-dialog { max-height: 94vh; }
  .evidence-viewer-head h2 { max-width: 250px; }
  .evidence-summary-grid { grid-template-columns: 1fr; }
}

.patch-update-item {
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 4px 0;
}

.patch-update-item + .patch-update-item {
  border-top: 1px solid rgba(128, 151, 161, 0.25);
}

.patch-update-item strong {
  color: #2563eb;
}

.patch-update-item small,
.patch-empty-state {
  color: #607685;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.patch-driver-list {
  display: grid;
  gap: 5px;
  min-width: 240px;
}

.patch-driver-list span {
  padding-left: 9px;
  border-left: 2px solid #2563eb;
  color: #263d49;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body[data-theme="dark"] .patch-update-item small,
body[data-theme="dark"] .patch-empty-state {
  color: #8faab4;
}

body[data-theme="dark"] .patch-driver-list span {
  color: #e6f2f5;
}

.evidence-actions {
  display: flex;
  gap: 10px;
  margin-top: 7px;
}

.evidence-actions a,
.evidence-actions .link-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #3b82f6;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0;
  text-decoration: none;
}

.evidence-actions a:hover,
.evidence-actions .link-button:hover {
  text-decoration: underline;
}

.panel-action-status,
.panel-action-link {
  color: #9fb5b6;
  font-size: 0.72rem;
  font-weight: 800;
}

.panel-action-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: #3b82f6;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.panel-action-link:hover {
  text-decoration: underline;
}

.dashboard-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.dashboard-download-grid .button-link {
  align-items: center;
  border: 1px solid rgba(154, 208, 207, 0.2);
  border-radius: 5px;
  color: #dff7f5;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
}

.agent-refresh-strip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid rgba(154, 208, 207, 0.18);
  border-radius: 6px;
  background: rgba(6, 20, 28, 0.5);
}

.agent-refresh-strip label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #dff7f5;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.agent-refresh-strip input {
  accent-color: #3b82f6;
}

.agent-refresh-strip select,
.agent-refresh-strip button {
  min-height: 28px;
  border: 1px solid rgba(154, 208, 207, 0.22);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: #e8fbfa;
  font-size: 0.72rem;
  font-weight: 800;
}

.agent-refresh-strip button {
  cursor: pointer;
  padding: 0 10px;
}

.agent-refresh-strip small {
  color: #9fded8;
  font-size: 0.72rem;
  font-weight: 800;
}

.patch-table-panel {
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.patch-side-panel {
  align-self: start;
}

.patch-activity {
  grid-column: 1 / -1;
}

.command-status-table {
  margin-top: 14px;
  overflow-x: auto;
}

.command-status-table h4 {
  margin: 0 0 8px;
  color: #eefdfb;
  font-size: 0.95rem;
}

.compact-table td:nth-child(3) {
  max-width: 760px;
  white-space: normal;
  word-break: break-word;
}

.patch-history-panel {
  grid-column: 1 / -1;
  padding: 0;
  overflow-x: auto;
}

.patch-history-panel .remote-list-head {
  padding: 14px 14px 0;
}

.patch-history-panel .devices-table td:nth-child(4),
.patch-history-panel .devices-table td:last-child {
  max-width: 420px;
  white-space: normal;
  word-break: break-word;
}

.compliance-table-panel {
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.compliance-side-panel {
  align-self: start;
}

.compliance-evidence,
.remediation-panel {
  grid-column: 1 / -1;
}

.remediation-panel {
  padding: 0;
  overflow: hidden;
}

.alerts-table-panel {
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.alerts-side-panel {
  align-self: start;
}

.alerts-timeline,
.alert-triage-panel {
  grid-column: 1 / -1;
}

.alert-triage-panel {
  padding: 0;
  overflow: hidden;
}

.alert-triage-panel[hidden] {
  display: none;
}

.recent-reports,
.report-builder-panel {
  grid-column: 1 / -1;
}

.report-builder-panel {
  padding: 0;
  overflow: hidden;
}

.report-builder-panel[hidden] {
  display: none;
}

.roles-table-panel {
  padding: 14px;
  overflow-x: auto;
  overflow-y: hidden;
}

.roles-side-panel {
  align-self: start;
}

.admin-list,
.role-editor-panel {
  grid-column: 1 / -1;
}

.role-editor-panel {
  padding: 0;
  overflow: hidden;
}

.role-editor-panel[hidden] {
  display: none;
}

.roles-matrix {
  min-width: 980px;
}

.roles-matrix th,
.roles-matrix td {
  text-align: center;
}

.roles-matrix th:first-child,
.roles-matrix td:first-child {
  text-align: left;
}

.patch-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .patch-history-actions {
    width: 100%;
  }

  .patch-history-actions button {
    flex: 1 1 0;
  }
}

.access-users-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 10px;
  align-items: start;
}

.access-users-panel,
.access-user-editor {
  min-width: 0;
  padding: 14px;
}

.access-user-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 150px;
  gap: 8px;
  margin-bottom: 10px;
}

.access-user-filters .search-box {
  width: auto;
}

.access-user-filters select,
.access-user-form input,
.access-user-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 11px;
  color: var(--ink);
  background: #fff;
}

.access-users-table-wrap {
  overflow-x: auto;
}

.access-users-table {
  min-width: 940px;
}

.access-users-table td strong,
.access-users-table td small {
  display: block;
}

.access-users-table td small {
  margin-top: 3px;
  color: var(--muted);
}

.access-user-edit {
  min-height: 34px;
  padding: 0 12px;
}

.access-user-editor {
  position: sticky;
  top: 10px;
}

.access-user-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.access-user-editor-head h3,
.access-user-editor-head p {
  margin: 6px 0 0;
}

.access-user-form {
  display: grid;
  gap: 12px;
}

.access-user-form > label > span:first-child {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}

.access-user-form input:focus,
.access-user-form select:focus,
.access-user-filters select:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(37, 99, 235, 0.18);
  outline-offset: 1px;
}

.access-mfa-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.access-mfa-toggle input {
  width: 18px;
  min-height: 18px;
  margin: 1px 0 0;
}

.access-mfa-toggle strong,
.access-mfa-toggle small {
  display: block;
}

.access-mfa-toggle small {
  margin-top: 3px;
  color: var(--muted);
}

.role-preset-note {
  margin-top: 12px;
  padding: 10px;
  border-left: 3px solid var(--accent);
  background: rgba(37, 99, 235, 0.08);
  color: var(--muted);
  line-height: 1.45;
}

.access-user-save {
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

@media (max-width: 1100px) {
  .access-users-layout {
    grid-template-columns: 1fr;
  }

  .access-user-editor {
    position: static;
    grid-row: 1;
  }
}

@media (max-width: 700px) {
  .access-user-filters {
    grid-template-columns: 1fr;
  }

  .roles-workspace {
    padding: 10px;
  }
}

body[data-theme="dark"] .access-user-filters select,
body[data-theme="dark"] .access-user-form input,
body[data-theme="dark"] .access-user-form select {
  border-color: #244353;
  color: #e8f4fb;
  background: #0b2029;
}

/* Audit Logs - Model B evidence explorer */
.audit-event-datetime {
  display: grid;
  gap: 2px;
  min-width: 118px;
  white-space: nowrap;
}

.audit-event-datetime strong {
  color: var(--audit-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.audit-event-datetime small {
  color: var(--audit-muted);
  font-size: 0.7rem;
}
#auditPage {
  --audit-surface: #ffffff;
  --audit-surface-soft: #f7fafc;
  --audit-border: #d5e2e8;
  --audit-text: #122633;
  --audit-muted: #607986;
  --audit-blue: #2563eb;
  --audit-blue-soft: #edf4ff;
  --audit-good: #0f9f76;
}

body[data-theme="dark"] #auditPage {
  --audit-surface: #071d26;
  --audit-surface-soft: #09232d;
  --audit-border: #244653;
  --audit-text: #e8f4f7;
  --audit-muted: #9eb7c1;
  --audit-blue-soft: #102f50;
}

#auditPage .audit-workspace {
  color: var(--audit-text);
}

#auditPage .audit-summary-grid .device-summary-card,
#auditPage .audit-layout > .panel {
  border-color: var(--audit-border);
  background: var(--audit-surface);
}

#auditPage [data-user-icon] svg,
#auditPage .audit-event-primary svg,
#auditPage .audit-evidence-ready svg,
#auditPage .policy-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#auditPage .audit-category-head {
  align-items: flex-start;
}

#auditPage .audit-category-head div {
  min-width: 0;
}

#auditPage .audit-category-head small {
  display: block;
  margin-top: 3px;
  color: var(--audit-muted);
  font-size: 0.64rem;
}

#auditPage .audit-category-head h3,
#auditPage .audit-log-categories strong,
#auditPage .audit-event-list-head h3,
#auditPage .audit-event-primary strong {
  color: var(--audit-text);
}

#auditPage .audit-log-categories {
  max-height: calc(100vh - 225px);
  overflow-y: auto;
  border-color: var(--audit-border);
  background: var(--audit-surface);
  scrollbar-width: thin;
}

#auditPage .audit-log-categories button {
  border-color: var(--audit-border);
  background: var(--audit-surface);
  color: var(--audit-muted);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

#auditPage .audit-log-categories button:hover {
  transform: translateX(2px);
}

#auditPage .audit-log-categories button:hover,
#auditPage .audit-log-categories button.active {
  border-color: #9fc2ff;
  border-left-color: var(--audit-blue);
  background: var(--audit-blue-soft);
  color: var(--audit-blue);
}

#auditPage .audit-log-categories i {
  border: 0;
  color: currentColor;
}

#auditPage .audit-log-categories i svg {
  width: 16px;
  height: 16px;
}

#auditPage .audit-event-list-head,
#auditPage .audit-event-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--audit-border);
}

#auditPage .audit-event-list-head h3,
#auditPage .audit-event-list-head p {
  margin: 0;
}

#auditPage .audit-event-list-head p,
#auditPage .audit-event-list-footer {
  margin-top: 3px;
  color: var(--audit-muted);
  font-size: 0.68rem;
}

#auditPage .audit-window-switch {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--audit-border);
  border-radius: 7px;
  background: var(--audit-surface-soft);
}

#auditPage .audit-window-switch button {
  min-height: 29px;
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--audit-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

#auditPage .audit-window-switch button.active {
  background: var(--audit-blue);
  color: #fff;
}

#auditPage .audit-table-panel .device-toolbar {
  border-bottom: 1px solid var(--audit-border);
}

#auditPage .audit-table-panel .devices-table {
  min-width: 840px;
  table-layout: fixed;
}

#auditPage .audit-table-panel .devices-table th:nth-child(1) { width: 29%; }
#auditPage .audit-table-panel .devices-table th:nth-child(2) { width: 11%; }
#auditPage .audit-table-panel .devices-table th:nth-child(3) { width: 19%; }
#auditPage .audit-table-panel .devices-table th:nth-child(4) { width: 18%; }
#auditPage .audit-table-panel .devices-table th:nth-child(5) { width: 11%; }
#auditPage .audit-table-panel .devices-table th:nth-child(6) { width: 12%; }

#auditPage .audit-event-row {
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

#auditPage .audit-event-row:hover {
  background: var(--audit-surface-soft);
}

#auditPage .audit-event-row.selected {
  background: var(--audit-blue-soft);
  box-shadow: inset 3px 0 0 var(--audit-blue);
}

#auditPage .audit-event-row:focus-visible {
  outline: 2px solid var(--audit-blue);
  outline-offset: -2px;
}

#auditPage .audit-event-primary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#auditPage .audit-event-primary > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--audit-blue-soft);
  color: var(--audit-blue);
}

#auditPage .audit-event-primary span {
  min-width: 0;
}

#auditPage .audit-event-primary strong,
#auditPage .audit-event-primary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#auditPage .audit-event-primary strong {
  font-size: 0.72rem;
}

#auditPage .audit-event-primary small {
  margin-top: 3px;
  color: var(--audit-muted);
  font-size: 0.62rem;
}

#auditPage .audit-evidence-ready,
#auditPage .audit-evidence-missing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--audit-good);
  font-size: 0.67rem;
  font-weight: 800;
}

#auditPage .audit-evidence-missing {
  color: var(--audit-muted);
  font-weight: 600;
}

#auditPage .audit-event-list-footer {
  border-top: 1px solid var(--audit-border);
  border-bottom: 0;
}

#auditPage .audit-side-panel {
  overflow: hidden;
  border-color: var(--audit-border);
  color: var(--audit-text);
  background: var(--audit-surface);
}

#auditPage .audit-side-panel .policy-icon {
  color: var(--audit-blue);
  background: var(--audit-blue-soft);
}

#auditPage .audit-side-panel .remote-session-details dd,
#auditPage .audit-side-panel .remote-security-list p {
  overflow-wrap: anywhere;
}

#auditPage .audit-side-panel .remote-security {
  border-color: var(--audit-border);
  background: var(--audit-surface-soft);
}

#auditPage .audit-empty-state {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 34px 12px;
  color: var(--audit-muted);
  text-align: center;
}

#auditPage .audit-empty-state svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--audit-blue);
  stroke-width: 1.8;
}

#auditPage .audit-empty-state strong {
  color: var(--audit-text);
}

@media (prefers-reduced-motion: reduce) {
  #auditPage .audit-log-categories button,
  #auditPage .audit-event-row {
    transition: none;
  }
}

@media (max-width: 980px) {
  #auditPage .audit-log-categories {
    max-height: 270px;
  }

  #auditPage .audit-event-list-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.audit-table-panel {
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.audit-side-panel {
  align-self: start;
}

.audit-integrity,
.audit-export-panel {
  grid-column: 1 / -1;
}

.audit-export-panel {
  padding: 0;
  overflow: hidden;
}

.audit-export-panel[hidden] {
  display: none;
}

.report-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.5);
  color: #e8f4fb;
}

.report-card.selected {
  border-color: rgba(16, 213, 199, 0.34);
  box-shadow: inset 3px 0 0 #3b82f6;
}

.report-card strong {
  color: #fff;
  font-size: 0.9rem;
}

.report-card span,
.report-card p {
  margin: 0;
  color: #9fb5b6;
  font-size: 0.74rem;
  line-height: 1.45;
}

.report-card p {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3b82f6;
  font-weight: 800;
}

.report-card b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
}

.report-card .evidence-actions {
  display: flex;
  align-items: center;
  min-height: 34px;
}

.report-card .link-button {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  border: 1px solid rgba(59, 130, 246, 0.44);
  border-radius: 5px;
  padding: 0 12px;
  background: rgba(37, 99, 235, 0.12);
  color: #60a5fa;
  font-weight: 800;
}

.report-card .link-button:hover,
.report-card .link-button:focus-visible {
  background: #2563eb;
  color: #fff;
}

body[data-theme="light"] .report-card {
  border-color: #d8e5e8;
  background: #ffffff;
  color: #172733;
  box-shadow: 0 8px 20px rgba(27, 57, 68, 0.06);
}

body[data-theme="light"] .report-card.selected {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: inset 3px 0 0 #2563eb, 0 8px 20px rgba(27, 57, 68, 0.08);
}

body[data-theme="light"] .report-card strong {
  color: #122632;
}

body[data-theme="light"] .report-card span,
body[data-theme="light"] .report-card p {
  color: #536977;
}

body[data-theme="light"] .report-card p {
  color: #2563eb;
}

body[data-theme="light"] .report-card .link-button {
  border-color: #b9d2f5;
  background: #eef5ff;
  color: #1d4ed8;
}

body[data-theme="light"] .report-card .link-button:hover,
body[data-theme="light"] .report-card .link-button:focus-visible {
  background: #2563eb;
  color: #fff;
}

.remediation-panel[hidden] {
  display: none;
}

.compliance-score-large {
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  margin: 16px auto;
  border: 12px solid rgba(255, 255, 255, 0.1);
  border-top-color: #39d16c;
  border-right-color: #39d16c;
  border-bottom-color: #39d16c;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
}

.security-push-panel {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
}

.security-push-panel[hidden] {
  display: none;
}

.security-push-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  padding: 16px;
}

.security-push-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.security-push-form label {
  display: grid;
  gap: 7px;
  color: #9fb5b6;
  font-size: 0.74rem;
  font-weight: 800;
}

.security-push-form select {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 5px;
  background: rgba(5, 16, 23, 0.72);
  color: #dff7f5;
  font: inherit;
  font-size: 0.76rem;
  padding: 0 10px;
}

.security-push-summary {
  padding: 13px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.58);
}

.security-push-summary h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 0.9rem;
}

.security-push-status {
  margin: 0 16px 16px;
  padding: 12px;
  border: 1px solid rgba(16, 213, 199, 0.22);
  border-radius: 7px;
  background: rgba(16, 213, 199, 0.08);
  color: #dff7f5;
  font-size: 0.78rem;
  font-weight: 800;
}

.security-push-status[hidden] {
  display: none;
}

.patch-progress {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.58);
}

.patch-progress h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 0.9rem;
}

.patch-progress p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: #c9dddd;
  font-size: 0.74rem;
  font-weight: 800;
}

.patch-progress p strong {
  color: #20e7d9;
}

.patch-progress div {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

.patch-progress div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3b82f6;
}

.patch-progress div.risk span {
  background: #f0505e;
}

#deployAppTargetPreview ul,
#deployAppBatchResults ul {
  max-height: 180px;
  overflow: auto;
  padding-left: 20px;
}

body[data-theme="light"] .patch-progress {
  border-color: #d8e5e8;
  background: #f1f5f7;
  color: #172733;
}

body[data-theme="light"] .patch-progress h3,
body[data-theme="light"] .patch-progress p {
  color: #172733;
}

body[data-theme="light"] .patch-progress p strong {
  color: #2563eb;
}

body[data-theme="light"] .patch-progress div {
  background: #dbe6ee;
}

.command-copy-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  height: auto !important;
  padding-top: 6px;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.command-copy-box code {
  min-width: 0;
  padding: 8px;
  overflow: hidden;
  color: #d8eeee;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(154, 208, 207, 0.13);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}

.command-copy-box button {
  min-height: 30px;
  padding: 0 10px;
  color: #062524;
  font-weight: 900;
  border: 0;
  border-radius: 6px;
  background: #3b82f6;
}

.remote-live-session {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
}

.remote-live-session[hidden] {
  display: none;
}

.live-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.1);
  background: linear-gradient(90deg, rgba(16, 213, 199, 0.12), rgba(5, 16, 23, 0.3));
}

.live-session-head h3 {
  margin: 8px 0 4px;
  color: #fff;
  font-size: 1.06rem;
}

.live-session-head p {
  margin: 0;
  color: #9fb5b6;
  font-size: 0.76rem;
}

.live-session-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.live-session-stats span {
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid rgba(16, 213, 199, 0.28);
  border-radius: 5px;
  background: rgba(16, 213, 199, 0.1);
  color: #20e7d9;
  font-size: 0.78rem;
  font-weight: 900;
}

.live-session-stats .danger-action {
  border-color: rgba(240, 80, 94, 0.34);
  color: #ff9ba3;
}

.session-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.1);
}

.session-checks p {
  margin: 0;
  padding: 9px;
  border-radius: 5px;
  background: rgba(5, 16, 23, 0.55);
  color: #d4e7e6;
  font-size: 0.74rem;
}

.session-tabs {
  display: flex;
  gap: 7px;
  padding: 12px 16px 0;
}

.session-tabs button.active {
  border-color: rgba(16, 213, 199, 0.4);
  background: rgba(16, 213, 199, 0.15);
  color: #20e7d9;
}

.session-tab-panel {
  display: none;
  padding: 16px;
}

.session-tab-panel.active {
  display: block;
}

.remote-desktop-frame {
  padding: 10px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 7px;
  background: #030a0f;
}

.remote-desktop-frame.real-preview {
  padding: 0;
  overflow: hidden;
  background: #02080d;
}

.remote-preview-image {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: #02080d;
}

.remote-desktop-frame.preview-error::after {
  content: "Preview image could not be loaded. Open the evidence link below.";
  display: block;
  padding: 18px;
  color: #ffb5bd;
  font-size: 0.82rem;
  font-weight: 900;
}

.remote-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.remote-preview-actions a,
.remote-preview-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(20, 214, 201, 0.28);
  border-radius: 5px;
  background: rgba(20, 214, 201, 0.08);
  color: #16e1d4;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.remote-preview-actions button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.mesh-portal-frame {
  min-height: 680px;
  overflow: hidden;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 7px;
  background: #02080d;
}

.mesh-portal-frame iframe {
  display: block;
  width: 100%;
  min-height: 680px;
  border: 0;
  background: #02080d;
}

.mesh-portal-note {
  margin: 10px 0 0;
  color: #9fb5b6;
  font-size: 0.76rem;
}

.remote-windows-screen {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 5px;
  background:
    radial-gradient(circle at 68% 42%, rgba(22, 119, 255, 0.72), transparent 19%),
    radial-gradient(circle at 60% 54%, rgba(45, 203, 255, 0.35), transparent 24%),
    linear-gradient(135deg, #061b2d, #0a0f24 54%, #061017);
}

.remote-desktop-topbar,
.remote-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 0 14px;
  background: rgba(2, 11, 18, 0.78);
  color: #dff7f5;
  font-size: 0.76rem;
  font-weight: 800;
}

.remote-desktop-topbar {
  top: 0;
}

.remote-taskbar {
  bottom: 0;
  justify-content: flex-start;
}

.remote-taskbar span:last-child {
  margin-left: auto;
}

.remote-start-menu {
  position: absolute;
  left: 28px;
  bottom: 54px;
  width: 285px;
  padding: 18px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.92);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

.remote-start-menu strong {
  color: #fff;
}

.remote-start-menu p {
  margin: 8px 0 0;
  color: #9fb5b6;
  font-size: 0.76rem;
  line-height: 1.45;
}

.terminal-window {
  min-height: 300px;
  padding: 16px;
  border-radius: 7px;
  background: #02070a;
  color: #7cf5e8;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.6;
}

.terminal-window p {
  margin: 0 0 6px;
}

.session-history .details-table {
  width: 100%;
}

.session-history td,
.session-history th {
  white-space: nowrap;
}

.policies-workspace {
  padding: 16px;
}

.policy-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.policies-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 10px;
}

.policies-list {
  display: grid;
  gap: 10px;
}

.policy-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px;
}

.policy-toolbar button,
.policy-actions button {
  min-height: 32px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #dff7f5;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0 12px;
}

.policy-toolbar button.active {
  border-color: rgba(16, 213, 199, 0.4);
  background: rgba(16, 213, 199, 0.15);
  color: #20e7d9;
}

.policy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 15px;
  border: 1px solid rgba(154, 208, 207, 0.15);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(10, 29, 39, 0.96), rgba(8, 25, 34, 0.96));
}

.policy-card.selected {
  box-shadow: inset 3px 0 0 #3b82f6;
}

.policy-card > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.policy-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(16, 213, 199, 0.13);
  color: #20e7d9;
  font-size: 1.2rem;
}

.policy-card h3,
.policy-detail h3 {
  margin: 0;
  color: #fff;
  font-size: 0.96rem;
}

.policy-card p,
.policy-detail p {
  margin: 5px 0 0;
  color: #a7bcbd;
  font-size: 0.76rem;
}

.policy-card small {
  grid-column: 1 / -1;
  color: #8ea6a7;
  font-size: 0.72rem;
}

.policy-detail {
  padding: 18px;
}

.policy-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.1);
}

.policy-score-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  padding: 14px;
  border-radius: 7px;
  background: rgba(5, 16, 23, 0.58);
}

.policy-score-row strong {
  display: block;
  color: #fff;
  margin-bottom: 5px;
}

.policy-detail-section {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.policy-detail-section h4 {
  margin: 0 0 2px;
  color: #fff;
  font-size: 0.9rem;
}

.policy-detail-section p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.08);
  color: #d4e7e6;
}

.policy-detail-section p span:last-child {
  color: #3b82f6;
  font-weight: 800;
}

.policy-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.policy-actions .danger-action {
  border-color: rgba(240, 80, 94, 0.34);
  color: #ff9ba3;
}

.policy-catalog-list { display: grid; gap: 8px; }
.policy-card { cursor: pointer; }
.policy-card:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.policy-target-count { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; border: 5px solid #3b82f6; border-radius: 50%; color: #fff; font-size: 1.15rem; font-weight: 900; }
.policy-detail-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(154, 208, 207, 0.12); color: #8ea6a7; font-size: 0.7rem; }
.policy-inline-message { margin-bottom: 12px; padding: 9px 10px; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 5px; background: rgba(59, 130, 246, 0.1); color: #bfdbfe; font-size: 0.76rem; font-weight: 700; }
.policy-empty-state { padding: 30px 18px; text-align: center; color: #8ea6a7; }
.policy-empty-state strong { color: #dff7f5; }
.policy-editor { margin-top: 10px; padding: 18px; }
.policy-editor-head, .policy-editor .section-heading, .policy-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.policy-editor-head { padding-bottom: 14px; border-bottom: 1px solid rgba(154, 208, 207, 0.12); }
.policy-editor h3, .policy-editor h4, .policy-editor p { margin: 0; }
.policy-editor h3, .policy-editor h4 { color: #fff; }
.policy-editor p { margin-top: 4px; color: #8ea6a7; font-size: 0.75rem; }
.policy-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.policy-form-grid label, .policy-setting-row { display: grid; gap: 6px; }
.policy-form-grid label > span { color: #c6d8db; font-size: 0.72rem; font-weight: 800; }
.policy-form-grid input, .policy-form-grid select, .policy-form-grid textarea, .policy-setting-row input { width: 100%; min-height: 38px; border: 1px solid rgba(154, 208, 207, 0.2); border-radius: 5px; background: rgba(5, 16, 23, 0.62); color: #e7f4f5; font: inherit; padding: 8px 10px; }
.policy-form-grid textarea { resize: vertical; }
.policy-description-field { grid-column: 1 / -1; }
.policy-target-picker, .policy-settings-editor { margin-top: 18px; }
.policy-target-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 260px; margin-top: 10px; overflow: auto; }
.policy-target-option { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border: 1px solid rgba(154, 208, 207, 0.14); border-radius: 5px; background: rgba(5, 16, 23, 0.38); cursor: pointer; }
.policy-target-option input { flex: 0 0 auto; }
.policy-target-option span { display: grid; min-width: 0; }
.policy-target-option strong, .policy-target-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.policy-target-option strong { color: #dff7f5; font-size: 0.76rem; }
.policy-target-option small { color: #8ea6a7; font-size: 0.68rem; }
.policy-setting-rows { display: grid; gap: 8px; margin-top: 10px; }
.policy-setting-row { grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr) 36px; align-items: center; }
.policy-editor-actions { justify-content: flex-end; margin-top: 16px; }
.policy-editor-actions button, .policy-editor .section-heading button { min-height: 34px; }
body[data-theme="light"] #policiesPage :where(.policy-editor h3, .policy-editor h4, .policy-empty-state strong, .policy-target-option strong) { color: #102331; }
body[data-theme="light"] #policiesPage :where(.policy-editor p, .policy-detail-meta, .policy-target-option small, .policy-empty-state) { color: #5f7383; }
body[data-theme="light"] #policiesPage :where(.policy-form-grid input, .policy-form-grid select, .policy-form-grid textarea, .policy-setting-row input, .policy-target-option) { border-color: #ccd9e2; background: #fff; color: #102331; }
body[data-theme="light"] #policiesPage .policy-target-count { color: #102331; }
body[data-theme="light"] #policiesPage .policy-inline-message { color: #1d4ed8; }

.policy-groups-loading {
  display: grid;
  gap: 10px;
  min-height: 420px;
}

.policy-groups-loading span {
  min-height: 92px;
  border: 1px solid #1c3b4a;
  border-radius: 6px;
  background: #0b2029;
  opacity: 0.7;
}

.policy-groups-loading span:last-child { min-height: 280px; }
.policy-groups-heading { margin-bottom: 10px; }
.policy-group-summary .device-summary-card { min-height: 96px; }

.policy-group-layout {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.policy-group-tree,
.policy-group-device-panel {
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
}

.policy-group-tree { padding: 8px; }

.policy-group-tree-title {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 8px;
  color: #f2f7fa;
}

.tree-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.policy-group-tree-title > span:last-child,
.policy-group-count {
  font-size: 0.72rem;
  color: #8ea6b4;
}

.policy-group-tree-list { display: grid; gap: 2px; }

.policy-group-tree-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 5px 8px 5px 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #dce9ef;
  text-align: left;
}

.policy-group-tree-item:hover,
.policy-group-tree-item.selected {
  border-color: #315b73;
  background: #112d3b;
}

.policy-group-tree-item.selected { box-shadow: inset 3px 0 0 var(--accent-bright); }
.policy-group-tree-item.drag-over { border-color: var(--accent-bright); background: #173952; }

.policy-group-node-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #45728c;
  border-radius: 4px;
  color: #70a8ff;
  font-size: 0.7rem;
  font-weight: 800;
}

.policy-group-node-copy { display: grid; gap: 2px; min-width: 0; }
.policy-group-node-copy strong,
.policy-group-node-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.policy-group-node-copy strong { font-size: 0.78rem; color: inherit; }
.policy-group-node-copy small { font-size: 0.66rem; color: #8ea6b4; }

.policy-group-device-panel { padding: 0; }
.policy-group-device-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #1d3c4a;
}
.policy-group-device-head h3 { margin: 0 0 4px; }
.policy-group-device-head p { margin: 0; color: #8ea6b4; font-size: 0.72rem; }
.policy-group-drop-note { padding: 8px 14px; color: #9bb2be; font-size: 0.68rem; border-bottom: 1px solid #1d3c4a; }
.policy-group-table-wrap { overflow-x: auto; }
.policy-group-table { min-width: 880px; }
.policy-group-table tr[draggable="true"] { cursor: grab; }
.policy-group-table tr.dragging { opacity: 0.45; }
.policy-group-table td:first-child strong,
.policy-group-table td:first-child small { display: block; }
.device-drag-handle { margin-right: 8px; color: #7f9eae; font-weight: 800; letter-spacing: 1px; }
.policy-group-move-control { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 6px; }
.policy-group-move-control select,
.policy-group-move-control button { min-height: 32px; }
.policy-group-empty { padding: 42px 16px !important; text-align: center; color: #8ea6b4; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body[data-theme="light"] .policy-groups-loading span { border-color: #d4e0e7; background: #eef3f6; }
body[data-theme="light"] .policy-group-tree-title,
body[data-theme="light"] .policy-group-tree-item { color: #173142; }
body[data-theme="light"] .policy-group-tree-item:hover,
body[data-theme="light"] .policy-group-tree-item.selected { border-color: #bfd0dc; background: #eaf2ff; }
body[data-theme="light"] .policy-group-tree-item.drag-over { border-color: var(--accent); background: #dbeafe; }
body[data-theme="light"] .policy-group-node-copy small,
body[data-theme="light"] .policy-group-tree-title > span:last-child,
body[data-theme="light"] .policy-group-count,
body[data-theme="light"] .policy-group-device-head p,
body[data-theme="light"] .policy-group-drop-note,
body[data-theme="light"] .policy-group-empty { color: #5f7383; }
body[data-theme="light"] .policy-group-device-head,
body[data-theme="light"] .policy-group-drop-note { border-color: #d8e2e8; }
body[data-theme="light"] .policy-group-move-control select { background: #fff; color: #173142; border-color: #c8d5de; }

@media (max-width: 900px) {
  .policy-group-layout { grid-template-columns: 1fr; }
  .policy-group-tree-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .policy-group-tree-list { grid-template-columns: 1fr; }
  .policy-groups-heading { align-items: flex-start; }
  .policy-groups-heading .details-actions { width: 100%; }
  .policy-groups-heading .details-actions > * { flex: 1; text-align: center; }
}

/* Groups Model D */
#groupsPage .groups-workspace {
  display: grid;
  gap: 12px;
}

#groupsPage .icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
}

#groupsPage .icon-text-button svg,
#groupsPage .summary-card-icon svg,
#groupsPage .section-head-icon svg,
#groupsPage .model-d-group-icon svg,
#groupsPage .model-d-inspector-icon svg,
#groupsPage .model-d-member-icon svg,
#groupsPage .model-d-device-icon svg,
#groupsPage .model-d-cell-icon svg,
#groupsPage .model-d-group-pill svg,
#groupsPage .model-d-edit-group svg,
#groupsPage .model-d-remove-member svg,
#groupsPage .device-drag-handle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

#groupsPage .model-d-heading {
  margin: 0;
}

#groupsPage .model-d-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#groupsPage .model-d-summary .device-summary-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 92px;
}

#groupsPage .model-d-summary .device-summary-card > div {
  display: grid;
  gap: 3px;
}

#groupsPage .summary-card-icon,
#groupsPage .section-head-icon,
#groupsPage .model-d-group-icon,
#groupsPage .model-d-inspector-icon,
#groupsPage .model-d-member-icon,
#groupsPage .model-d-device-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #31576b;
  border-radius: 6px;
  background: #102a37;
  color: #70a8ff;
}

#groupsPage .model-d-group-layout {
  display: grid;
  grid-template-columns: minmax(210px, 230px) minmax(0, 1fr) minmax(250px, 280px);
  gap: 10px;
  align-items: stretch;
}

#groupsPage .model-d-group-library,
#groupsPage .model-d-device-board,
#groupsPage .model-d-group-inspector,
#groupsPage .model-d-activity {
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
}

#groupsPage .model-d-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border-bottom: 1px solid #1d3c4a;
}

#groupsPage .model-d-section-head > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

#groupsPage .model-d-section-head h3,
#groupsPage .model-d-section-head p {
  margin: 0;
}

#groupsPage .model-d-section-head h3 {
  font-size: 0.86rem;
}

#groupsPage .model-d-section-head p {
  margin-top: 2px;
  color: #8ea6b4;
  font-size: 0.68rem;
}

#groupsPage .model-d-count {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 14px;
  background: #15384b;
  color: #8ab8ff;
  font-weight: 800;
  font-size: 0.72rem;
}

#groupsPage .model-d-group-list {
  display: grid;
  gap: 5px;
  padding: 8px;
  max-height: 590px;
  overflow-y: auto;
}

#groupsPage .model-d-group-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: stretch;
  min-height: 54px;
  border: 1px solid #244757;
  border-radius: 5px;
  background: #0a2029;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

#groupsPage .model-d-group-item:hover,
#groupsPage .model-d-group-item.selected {
  border-color: #4f82a0;
  background: #112d3b;
}

#groupsPage .model-d-group-item.selected {
  box-shadow: inset 3px 0 0 #2f6df6;
}

#groupsPage .model-d-group-item.drag-over {
  border-color: #35d0ba;
  background: #123d43;
  transform: translateX(3px);
}

#groupsPage .model-d-group-select {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 4px 6px 9px;
  border: 0;
  background: transparent;
  color: #e2edf2;
  text-align: left;
}

#groupsPage .model-d-group-icon {
  width: 30px;
  height: 30px;
}

#groupsPage .model-d-group-icon svg {
  width: 16px;
  height: 16px;
}

#groupsPage .model-d-edit-group,
#groupsPage .model-d-remove-member {
  display: grid;
  place-items: center;
  align-self: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #8ab8ff;
}

#groupsPage .model-d-edit-group:hover,
#groupsPage .model-d-remove-member:hover {
  background: #17394a;
}

#groupsPage .model-d-drop-label {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border-radius: inherit;
  background: rgba(9, 51, 58, 0.94);
  color: #6ee7d2;
  font-size: 0.72rem;
  font-weight: 800;
  pointer-events: none;
}

#groupsPage .model-d-group-item.drag-over .model-d-drop-label {
  display: grid;
}

#groupsPage .model-d-bulk-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

#groupsPage .model-d-user-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(270px, 30vw);
  min-width: 190px;
}

#groupsPage .model-d-user-search .model-d-search-icon {
  position: absolute;
  left: 10px;
  display: grid;
  place-items: center;
  color: #8ea6b4;
  pointer-events: none;
}

#groupsPage .model-d-user-search svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

#groupsPage .model-d-user-search input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px 7px 33px;
  border: 1px solid #31576b;
  border-radius: 5px;
  background: #0a2029;
  color: #e2edf2;
}

#groupsPage .model-d-user-search input:focus {
  border-color: #70a8ff;
  outline: 2px solid rgba(112, 168, 255, 0.24);
  outline-offset: 1px;
}

#groupsPage .model-d-user-search input::placeholder {
  color: #7893a2;
}

#groupsPage .model-d-bulk-actions select,
#groupsPage .model-d-bulk-actions button {
  min-height: 34px;
}

#groupsPage .model-d-bulk-actions select {
  width: min(210px, 35vw);
  max-width: 210px;
}

#groupsPage .model-d-move-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}

#groupsPage .model-d-move-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(2, 13, 18, 0.72);
  backdrop-filter: blur(3px);
}

#groupsPage .model-d-move-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  overflow: hidden;
  border: 1px solid #31576b;
  border-radius: 7px;
  background: #0b202a;
  color: #e2edf2;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

#groupsPage .model-d-move-card > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #244757;
}

#groupsPage .model-d-move-card h3,
#groupsPage .model-d-move-card p {
  margin: 0;
}

#groupsPage .model-d-move-card header small {
  color: #8ea6b4;
  font-size: 0.66rem;
  text-transform: uppercase;
}

#groupsPage .model-d-move-card h3 {
  margin-top: 2px;
  font-size: 0.98rem;
}

#groupsPage .model-d-move-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #31576b;
  background: transparent;
  color: #8ab8ff;
}

#groupsPage .model-d-move-close svg,
#groupsPage .model-d-move-selection svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#groupsPage .model-d-move-body {
  display: grid;
  gap: 9px;
  padding: 15px;
}

#groupsPage .model-d-move-body label {
  color: #a9bdc8;
  font-size: 0.72rem;
  font-weight: 700;
}

#groupsPage .model-d-move-body select {
  width: 100%;
  min-height: 40px;
}

#groupsPage .model-d-move-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 110px;
  overflow: auto;
  padding-top: 4px;
}

#groupsPage .model-d-move-selection span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid #244757;
  border-radius: 4px;
  background: #102a37;
  color: #c8d8e0;
  font-size: 0.7rem;
}

#groupsPage .model-d-move-card > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 15px;
  border-top: 1px solid #244757;
}

body[data-theme="light"] #groupsPage .model-d-move-card {
  border-color: #c9d8e1;
  background: #ffffff;
  color: #172a36;
  box-shadow: 0 24px 60px rgba(32, 55, 68, 0.2);
}

body[data-theme="light"] #groupsPage .model-d-move-card > header,
body[data-theme="light"] #groupsPage .model-d-move-card > footer {
  border-color: #dce6ec;
}

body[data-theme="light"] #groupsPage .model-d-move-selection span {
  border-color: #d1dfe7;
  background: #f5f9fb;
  color: #324d5c;
}

/* Settings Center Model C */
#settingsPage .settings-model-c {
  display: grid;
  gap: 12px;
  padding-bottom: 18px;
}

#settingsPage .settings-c-heading {
  margin: 0;
}

#settingsPage .icon-text-button,
#settingsPage .button-link.icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
}

#settingsPage [data-user-icon] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

#settingsPage [data-user-icon] svg,
#settingsPage .settings-category-icon svg,
#settingsPage .settings-health-icon svg,
#settingsPage .settings-health-check svg,
#settingsPage .settings-chevron svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#settingsPage .settings-health-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
}

#settingsPage .settings-health-strip article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 76px;
  padding: 11px 13px;
  border-right: 1px solid #244757;
}

#settingsPage .settings-health-strip article:last-child {
  border-right: 0;
}

#settingsPage .settings-health-strip article > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#settingsPage .settings-health-strip strong {
  overflow: hidden;
  color: #e2edf2;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsPage .settings-health-strip small {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsPage .good-text,
#settingsPage .settings-health-check {
  color: #32c981;
}

#settingsPage .settings-health-icon,
#settingsPage .settings-category-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #31576b;
  border-radius: 6px;
  background: #102a37;
  color: #70a8ff;
}

#settingsPage .settings-center-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) minmax(480px, 0.9fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

#settingsPage .settings-catalog,
#settingsPage .settings-detail-drawer {
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
}

#settingsPage .settings-category-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 110px 24px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 78px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid #244757;
  border-radius: 0;
  background: transparent;
  color: #dce8ee;
  text-align: left;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

#settingsPage .settings-category-row:last-child {
  border-bottom: 0;
}

#settingsPage .settings-category-row:hover,
#settingsPage .settings-category-row.selected {
  background: #102a37;
}

#settingsPage .settings-category-row.selected {
  box-shadow: inset 3px 0 0 #2f6df6;
}

#settingsPage .settings-category-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#settingsPage .settings-category-row strong {
  overflow: hidden;
  font-size: 0.83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsPage .settings-category-row small,
#settingsPage .settings-category-row time {
  overflow: hidden;
  color: #8ea6b4;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsPage .settings-category-row time {
  text-align: right;
}

#settingsPage .settings-chevron {
  color: #8ab8ff;
}

#settingsPage .settings-detail-drawer {
  position: sticky;
  top: 52px;
}

#settingsPage .settings-category-panel {
  min-width: 0;
}

#settingsPage .settings-category-panel[hidden] {
  display: none;
}

#settingsPage .settings-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border-bottom: 1px solid #244757;
}

#settingsPage .settings-detail-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#settingsPage .settings-detail-header h3,
#settingsPage .settings-detail-header p,
#settingsPage .settings-config-audit h4,
#settingsPage .settings-config-audit p {
  margin: 0;
}

#settingsPage .settings-detail-header h3 {
  color: #e2edf2;
  font-size: 0.94rem;
}

#settingsPage .settings-detail-header p {
  margin-top: 3px;
  color: #8ea6b4;
  font-size: 0.68rem;
  line-height: 1.35;
}

#settingsPage .settings-detail-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 14px;
}

#settingsPage .settings-detail-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

#settingsPage .settings-detail-form label > span {
  color: #a9bdc8;
  font-size: 0.68rem;
  font-weight: 700;
}

#settingsPage .settings-detail-form :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  border: 1px solid #31576b;
  border-radius: 5px;
  background: #091c25;
  color: #dce8ee;
}

#settingsPage .settings-readonly-field {
  grid-column: 1 / -1;
}

#settingsPage .settings-readonly-field input {
  color: #8ea6b4;
}

#settingsPage .settings-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #244757;
}

#settingsPage .settings-category-panel > .security-push-status {
  margin: 0 14px 14px;
}

#settingsPage .settings-information-panel dl {
  display: grid;
  margin: 0;
  padding: 4px 14px 14px;
}

#settingsPage .settings-information-panel dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #1d3c4a;
}

#settingsPage .settings-information-panel dt {
  color: #8ea6b4;
}

#settingsPage .settings-information-panel dd {
  margin: 0;
  color: #e2edf2;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

#settingsPage .settings-config-audit {
  border-top: 1px solid #244757;
}

#settingsPage .settings-config-audit > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

#settingsPage .settings-config-audit h4 {
  color: #e2edf2;
  font-size: 0.8rem;
}

#settingsPage .settings-config-audit p,
#settingsPage .settings-config-audit a {
  color: #8ea6b4;
  font-size: 0.65rem;
}

#settingsPage .settings-audit-table-wrap {
  overflow: auto;
  padding: 0 14px 14px;
}

#settingsPage .settings-config-audit table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.67rem;
}

#settingsPage .settings-config-audit th,
#settingsPage .settings-config-audit td {
  padding: 9px 8px;
  border: 1px solid #244757;
  color: #c9d9e1;
  text-align: left;
}

#settingsPage .settings-config-audit th {
  background: #102a37;
  color: #8ea6b4;
  text-transform: uppercase;
}

body[data-theme="light"] #settingsPage .settings-health-strip article,
body[data-theme="light"] #settingsPage .settings-category-row,
body[data-theme="light"] #settingsPage .settings-detail-header,
body[data-theme="light"] #settingsPage .settings-detail-actions,
body[data-theme="light"] #settingsPage .settings-config-audit,
body[data-theme="light"] #settingsPage .settings-information-panel dl > div {
  border-color: #d7e3ea;
}

body[data-theme="light"] #settingsPage .settings-health-strip strong,
body[data-theme="light"] #settingsPage .settings-category-row,
body[data-theme="light"] #settingsPage .settings-detail-header h3,
body[data-theme="light"] #settingsPage .settings-information-panel dd,
body[data-theme="light"] #settingsPage .settings-config-audit h4 {
  color: #172a36;
}

body[data-theme="light"] #settingsPage .settings-category-row:hover,
body[data-theme="light"] #settingsPage .settings-category-row.selected {
  background: #edf4ff;
}

body[data-theme="light"] #settingsPage .settings-health-icon,
body[data-theme="light"] #settingsPage .settings-category-icon {
  border-color: #c8d8e1;
  background: #f3f7ff;
  color: #2f6df6;
}

body[data-theme="light"] #settingsPage .settings-detail-form :is(input, select) {
  border-color: #c8d8e1;
  background: #fff;
  color: #172a36;
}

body[data-theme="light"] #settingsPage .settings-config-audit th {
  background: #f2f7fa;
  color: #526b7a;
}

body[data-theme="light"] #settingsPage .settings-config-audit th,
body[data-theme="light"] #settingsPage .settings-config-audit td {
  border-color: #d7e3ea;
  color: #324d5c;
}

@media (max-width: 1180px) {
  #settingsPage .settings-center-layout {
    grid-template-columns: minmax(360px, 0.85fr) minmax(430px, 1.15fr);
  }

  #settingsPage .settings-category-row {
    grid-template-columns: 42px minmax(0, 1fr) auto 24px;
  }

  #settingsPage .settings-category-row time {
    display: none;
  }
}

@media (max-width: 900px) {
  #settingsPage .settings-health-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settingsPage .settings-health-strip article {
    border-bottom: 1px solid #244757;
  }

  #settingsPage .settings-center-layout {
    grid-template-columns: 1fr;
  }

  #settingsPage .settings-detail-drawer {
    position: static;
  }
}

@media (max-width: 620px) {
  #settingsPage .settings-health-strip {
    grid-template-columns: 1fr;
  }

  #settingsPage .settings-health-strip article {
    border-right: 0;
  }

  #settingsPage .settings-category-row {
    grid-template-columns: 38px minmax(0, 1fr) auto 20px;
    min-height: 72px;
    padding: 9px;
  }

  #settingsPage .settings-category-row .status {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #settingsPage .settings-detail-form {
    grid-template-columns: 1fr;
  }

  #settingsPage .settings-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #settingsPage .settings-detail-actions > * {
    width: 100%;
  }
}

#groupsPage .model-d-table-wrap {
  width: 100%;
  overflow: auto;
}

#groupsPage .model-d-device-table {
  min-width: 900px;
}

#groupsPage .model-d-device-table th:first-child,
#groupsPage .model-d-device-table td:first-child {
  width: 42px;
  text-align: center;
}

#groupsPage .model-d-device-table th:nth-child(2),
#groupsPage .model-d-device-table td:nth-child(2) {
  width: 38px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

#groupsPage .model-d-device-table tr {
  transition: background-color 150ms ease, opacity 150ms ease;
}

#groupsPage .model-d-device-table tr.is-selected {
  background: #102f42;
  box-shadow: inset 3px 0 0 #2f6df6;
}

#groupsPage .model-d-device-table tr.dragging {
  opacity: 0.45;
}

#groupsPage .device-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7897a8;
  cursor: grab;
}

#groupsPage .device-control-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

#groupsPage .device-control-link strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#groupsPage .model-d-connection-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

#groupsPage .model-d-connection-dot.online { background: #22c55e; }
#groupsPage .model-d-connection-dot.offline { background: #ef4444; }

#groupsPage .device-control-link > span:last-child,
#groupsPage .model-d-agent-version {
  display: grid;
  gap: 2px;
}

#groupsPage .model-d-device-icon {
  width: 30px;
  height: 30px;
}

#groupsPage .model-d-cell-icon {
  display: inline-flex;
  margin-right: 5px;
  color: #6f92a6;
  vertical-align: middle;
}

#groupsPage .model-d-cell-icon svg,
#groupsPage .model-d-group-pill svg {
  width: 14px;
  height: 14px;
}

#groupsPage .model-d-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 180px;
  padding: 4px 7px;
  border: 1px solid #2b5366;
  border-radius: 4px;
  color: #c8dbe5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#groupsPage .model-d-agent-version {
  margin-top: 3px;
  color: #7f9aa9;
  font-size: 0.62rem;
}

#groupsPage .model-d-group-inspector {
  padding-bottom: 10px;
}

#groupsPage .model-d-inspector-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border-bottom: 1px solid #1d3c4a;
}

#groupsPage .model-d-inspector-head h3,
#groupsPage .model-d-inspector-head p,
#groupsPage .model-d-inspector-head small {
  margin: 0;
}

#groupsPage .model-d-inspector-head small,
#groupsPage .model-d-inspector-head p {
  color: #8ea6b4;
  font-size: 0.66rem;
}

#groupsPage .model-d-inspector-head h3 {
  margin: 2px 0;
  font-size: 0.9rem;
}

#groupsPage .model-d-inspector-description {
  margin: 0;
  padding: 11px 13px;
  color: #9bb0bb;
  font-size: 0.7rem;
  line-height: 1.45;
}

#groupsPage .model-d-inspector-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 10px 10px;
}

#groupsPage .model-d-inspector-stats article {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 2px 6px;
  align-items: center;
  padding: 9px;
  border: 1px solid #244757;
  border-radius: 5px;
}

#groupsPage .model-d-inspector-stats article > span {
  grid-row: 1 / span 2;
  color: #6fa8ff;
}

#groupsPage .model-d-inspector-stats svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#groupsPage .model-d-inspector-stats strong {
  font-size: 1rem;
}

#groupsPage .model-d-inspector-stats small {
  color: #829ba8;
  font-size: 0.62rem;
}

#groupsPage .model-d-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px 10px;
}

#groupsPage .model-d-inspector-actions .primary-action {
  grid-column: 1 / -1;
}

#groupsPage .model-d-members {
  margin: 0 10px;
  border: 1px solid #244757;
  border-radius: 5px;
  overflow: hidden;
}

#groupsPage .model-d-members > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid #244757;
}

#groupsPage .model-d-members h4 {
  margin: 0;
  font-size: 0.75rem;
}

#groupsPage .model-d-members > header span {
  color: #8ab8ff;
  font-size: 0.72rem;
  font-weight: 800;
}

#groupsPage .model-d-members > div {
  max-height: 250px;
  overflow-y: auto;
}

#groupsPage .model-d-members article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 7px;
  align-items: center;
  min-height: 48px;
  padding: 5px 7px;
  border-bottom: 1px solid #193947;
}

#groupsPage .model-d-members article:last-child {
  border-bottom: 0;
}

#groupsPage .model-d-member-icon {
  width: 28px;
  height: 28px;
}

#groupsPage .model-d-members article > button:nth-child(2) {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dce8ee;
  text-align: left;
}

#groupsPage .model-d-members article small {
  color: #819aa7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#groupsPage .model-d-empty-members {
  margin: 0;
  padding: 24px 10px;
  color: #849daa;
  text-align: center;
  font-size: 0.68rem;
}

#groupsPage .model-d-activity {
  min-height: 180px;
}

#groupsPage .model-d-activity table {
  min-width: 1080px;
}

body[data-theme="light"] #groupsPage :where(.summary-card-icon, .section-head-icon, .model-d-group-icon, .model-d-inspector-icon, .model-d-member-icon, .model-d-device-icon) {
  border-color: #cbd9e3;
  background: #edf4ff;
  color: #2563eb;
}

body[data-theme="light"] #groupsPage .model-d-section-head,
body[data-theme="light"] #groupsPage .model-d-inspector-head,
body[data-theme="light"] #groupsPage .model-d-members > header,
body[data-theme="light"] #groupsPage .model-d-members,
body[data-theme="light"] #groupsPage .model-d-members article {
  border-color: #d5e0e7;
}

body[data-theme="light"] #groupsPage .model-d-group-item {
  border-color: #d1dde5;
  background: #fff;
}

body[data-theme="light"] #groupsPage .model-d-group-item:hover,
body[data-theme="light"] #groupsPage .model-d-group-item.selected {
  border-color: #9db9d0;
  background: #eef5ff;
}

body[data-theme="light"] #groupsPage .model-d-group-select,
body[data-theme="light"] #groupsPage .model-d-members article > button:nth-child(2) {
  color: #142c3b;
}

body[data-theme="light"] #groupsPage .model-d-group-item.drag-over {
  border-color: #0f9d8c;
  background: #e4f8f5;
}

body[data-theme="light"] #groupsPage .model-d-count {
  background: #e5efff;
  color: #1d4ed8;
}

body[data-theme="light"] #groupsPage .model-d-user-search input {
  border-color: #c8d5de;
  background: #fff;
  color: #142c3b;
}

body[data-theme="light"] #groupsPage .model-d-user-search .model-d-search-icon,
body[data-theme="light"] #groupsPage .model-d-user-search input::placeholder {
  color: #607787;
}

body[data-theme="light"] #groupsPage .model-d-device-table tr.is-selected {
  background: #eaf2ff;
}

body[data-theme="light"] #groupsPage .model-d-group-pill,
body[data-theme="light"] #groupsPage .model-d-inspector-stats article {
  border-color: #d0dde5;
  color: #284252;
}

body[data-theme="light"] #groupsPage :where(.model-d-section-head p, .model-d-inspector-head small, .model-d-inspector-head p, .model-d-inspector-description, .model-d-agent-version, .model-d-inspector-stats small, .model-d-members article small, .model-d-empty-members) {
  color: #607787;
}

@media (max-width: 1100px) {
  #groupsPage .model-d-group-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  #groupsPage .model-d-group-inspector {
    grid-column: 1 / -1;
  }

  #groupsPage .model-d-members > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }
}

@media (max-width: 900px) {
  #groupsPage .model-d-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #groupsPage .model-d-group-layout {
    grid-template-columns: 1fr;
  }

  #groupsPage .model-d-group-inspector,
  #groupsPage .model-d-device-board {
    grid-column: auto;
  }

  #groupsPage .model-d-group-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 320px;
  }
}

@media (max-width: 650px) {
  #groupsPage .model-d-summary {
    grid-template-columns: 1fr;
  }

  #groupsPage .model-d-group-list,
  #groupsPage .model-d-members > div {
    grid-template-columns: 1fr;
  }

  #groupsPage .model-d-device-toolbar {
    align-items: flex-start;
  }

  #groupsPage .model-d-bulk-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  #groupsPage .model-d-bulk-actions label,
  #groupsPage .model-d-bulk-actions select,
  #groupsPage .model-d-bulk-actions button {
    width: 100%;
    max-width: none;
  }

  #groupsPage .model-d-user-search {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #groupsPage .model-d-group-item,
  #groupsPage .model-d-device-table tr {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .policy-target-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .policy-form-grid, .policy-target-options { grid-template-columns: 1fr; }
  .policy-setting-row { grid-template-columns: 1fr 40px; }
  .policy-setting-row [data-policy-setting-key] { grid-column: 1 / -1; }
  .policy-editor-head, .policy-editor .section-heading { align-items: flex-start; }
}

@media (max-width: 1100px) {
  .remote-summary-grid,
  .users-summary-grid,
  .groups-summary-grid,
  .applications-summary-grid,
  .agent-summary-grid,
  .patch-summary-grid,
  .compliance-summary-grid,
  .alerts-summary-grid,
  .reports-summary-grid,
  .roles-summary-grid,
  .audit-summary-grid,
  .settings-summary-grid,
  .remote-layout,
  .users-layout,
  .groups-layout,
  .applications-layout,
  .agent-layout,
  .patch-layout,
  .compliance-layout,
  .alerts-layout,
  .reports-layout,
  .roles-layout,
  .audit-layout,
  .settings-layout,
  .policy-summary-grid,
  .policies-layout {
    grid-template-columns: 1fr;
  }

  .session-history,
  .user-invite-panel,
  .group-rules-panel,
  .group-create-panel,
  .application-activity,
  .application-status-panel,
  .application-deploy-panel,
  .agent-activity,
  .patch-activity,
  .security-push-panel,
  .compliance-evidence,
  .remediation-panel,
  .alerts-timeline,
  .alert-triage-panel,
  .recent-reports,
  .report-builder-panel,
  .admin-list,
  .role-editor-panel,
  .audit-integrity,
  .audit-export-panel,
  .settings-detail-panel {
    grid-column: auto;
  }

  .application-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .groups-grid {
    grid-template-columns: 1fr;
  }

  .report-card-grid {
    grid-template-columns: 1fr;
  }

  .security-push-grid,
  .security-push-form {
    grid-template-columns: 1fr;
  }

  .session-checks {
    grid-template-columns: 1fr;
  }

  .application-status-grid {
    grid-template-columns: 1fr;
  }

  .live-session-head {
    flex-direction: column;
  }
}

.device-full-main {
  min-width: 0;
}

.device-details-workspace {
  padding: 16px;
}

#deviceDetailsPage .device-details-loading {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #dff7f5;
}

#deviceDetailsPage .device-details-loading[hidden] {
  display: none;
}

#deviceDetailsPage .device-details-loading p {
  margin: 4px 0 0;
  color: #9fb5b6;
  font-size: 0.8rem;
}

#deviceDetailsPage .device-details-loading-icon {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(77, 208, 194, 0.2);
  border-top-color: #22c7b8;
  border-radius: 50%;
  animation: device-details-spin 0.8s linear infinite;
}

#deviceDetailsPage.is-loading-details .details-actions,
#deviceDetailsPage.is-loading-details .device-details-tabs,
#deviceDetailsPage.is-loading-details .device-overview-model-b,
#deviceDetailsPage.is-loading-details .details-summary-grid,
#deviceDetailsPage.is-loading-details .device-details-grid {
  display: none;
}

@keyframes device-details-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #deviceDetailsPage .device-details-loading-icon {
    animation-duration: 1.6s;
  }
}

.details-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.details-heading a {
  display: inline-block;
  margin-bottom: 8px;
  color: #3b82f6;
  font-size: 0.78rem;
  font-weight: 800;
}

.details-heading h2 {
  color: #fff;
  font-size: 1.7rem;
}

.details-heading p {
  margin: 6px 0 0;
  color: #9fb5b6;
  font-size: 0.82rem;
}

.details-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.details-actions button,
.details-actions .button-link {
  min-height: 34px;
  border: 1px solid rgba(154, 208, 207, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #dff7f5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  padding: 0 12px;
  text-decoration: none;
}

.details-actions .danger-action {
  border-color: rgba(240, 80, 94, 0.34);
  color: #ff9ba3;
}

.details-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.device-details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.details-card {
  min-width: 0;
}

.installed-apps-card,
.required-kbs-card,
.installed-kbs-card {
  max-height: 560px;
  overflow: auto;
}

.installed-apps-card .details-table,
.required-kbs-card .details-table,
.installed-kbs-card .details-table {
  min-width: 860px;
}

.installed-apps-card thead th,
.required-kbs-card thead th,
.installed-kbs-card thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #08212a;
}

.wipe-readiness-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.wipe-readiness-summary article {
  padding: 10px;
  border: 1px solid rgba(154, 208, 207, 0.14);
  border-radius: 6px;
  background: rgba(6, 23, 31, 0.54);
}

.wipe-readiness-summary span {
  display: block;
  color: #9dc4c2;
  font-size: 0.72rem;
}

.wipe-readiness-summary strong {
  display: block;
  margin-top: 5px;
  color: #efffff;
  font-size: 1.05rem;
}

.wipe-readiness-summary .risk-text {
  color: #ff8585;
}

.wipe-evidence-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.wipe-evidence-snapshot article {
  min-height: 108px;
  padding: 12px;
  border: 1px solid rgba(154, 208, 207, 0.14);
  border-radius: 6px;
  background: rgba(3, 14, 20, 0.58);
}

.wipe-evidence-snapshot span {
  display: block;
  color: #9dc4c2;
  font-size: 0.72rem;
  font-weight: 800;
}

.wipe-evidence-snapshot strong {
  display: block;
  margin-top: 7px;
  color: #efffff;
  font-size: 1rem;
}

.wipe-evidence-snapshot small {
  display: block;
  min-height: 30px;
  margin-top: 6px;
  color: #9fb5b6;
  font-size: 0.72rem;
  line-height: 1.45;
}

.bitlocker-runbook {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(217, 171, 67, 0.22);
  border-radius: 6px;
  background: rgba(217, 171, 67, 0.06);
}

.bitlocker-runbook header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bitlocker-runbook h4 {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
}

.bitlocker-runbook p {
  margin: 4px 0 0;
  color: #d4e7e6;
  font-size: 0.74rem;
  line-height: 1.45;
}

.bitlocker-runbook div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bitlocker-runbook div p {
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(154, 208, 207, 0.12);
  border-radius: 5px;
  background: rgba(3, 14, 20, 0.42);
}

.bitlocker-runbook div span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border-radius: 50%;
  background: rgba(217, 171, 67, 0.18);
  color: #ffd477;
  font-size: 0.72rem;
  font-weight: 900;
}

.wide-card {
  grid-column: span 2;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.detail-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.08);
}

.detail-list dt {
  color: #9fb5b6;
  font-size: 0.74rem;
}

.detail-list dd {
  margin: 0;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: right;
}

.check-list,
.policy-list,
.timeline-list {
  display: grid;
  gap: 9px;
}

.check-list p,
.policy-list p,
.timeline-list p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #d4e7e6;
  font-size: 0.76rem;
}

.policy-list p,
.timeline-list p {
  justify-content: space-between;
  min-height: 28px;
  border-bottom: 1px solid rgba(154, 208, 207, 0.08);
}

.policy-list p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  column-gap: 10px;
  min-height: 34px;
}

.policy-list .policy-name {
  min-width: 0;
  color: inherit;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
}

.policy-list .status {
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}

.policy-list span,
.timeline-list span {
  color: #3b82f6;
  font-weight: 800;
}

.policy-list .policy-name {
  color: inherit;
}

.timeline-list .inline-action {
  margin-left: 8px;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(154, 208, 207, 0.25);
  border-radius: 6px;
  background: rgba(8, 31, 39, 0.88);
  color: #d7f7f4;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.timeline-list .inline-action:hover {
  border-color: rgba(19, 213, 199, 0.6);
  color: #3b82f6;
}

.timeline-list small {
  display: block;
  margin: -4px 0 4px 17px;
  color: #9fc0bf;
  font-size: 0.72rem;
  line-height: 1.35;
}

.timeline-list a {
  color: #3b82f6;
  font-weight: 800;
  text-decoration: none;
}

.timeline-list a:hover {
  text-decoration: underline;
}

.timeline-list b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
}

.details-table {
  min-width: 0;
  font-size: 0.74rem;
}

.details-table th,
.details-table td {
  padding: 8px;
}

.microsoft-catalog-link {
  color: #69a9ff;
  font-weight: 700;
  text-decoration: none;
}

.microsoft-catalog-link:hover {
  text-decoration: underline;
}

/* Device details Model B */
#deviceDetailsPage .device-details-workspace {
  --detail-surface: #0b2530;
  --detail-surface-raised: #0e2b36;
  --detail-border: rgba(145, 190, 202, 0.2);
  --detail-text: #f2fbfd;
  --detail-muted: #9bb7bf;
  --detail-accent: #45a3ff;
  --detail-accent-soft: rgba(69, 163, 255, 0.14);
  --detail-good: #2fc978;
  --detail-warn: #f0ad35;
  --detail-risk: #ef5b6b;
  padding: 18px 20px 28px;
  color: var(--detail-text);
}

#deviceDetailsPage .details-heading {
  align-items: center;
  margin-bottom: 16px;
}

#deviceDetailsPage .details-device-title > a {
  position: relative;
  margin: 0 0 10px 34px;
  color: var(--detail-accent);
}

#deviceDetailsPage .details-device-title > a::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#deviceDetailsPage .details-device-heading,
#deviceDetailsPage .details-title-line,
#deviceDetailsPage .details-device-meta {
  display: flex;
  align-items: center;
}

#deviceDetailsPage .details-device-heading {
  gap: 14px;
}

#deviceDetailsPage .details-device-icon,
#deviceDetailsPage .model-b-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--detail-accent);
  background: var(--detail-accent-soft);
}

#deviceDetailsPage .details-device-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

#deviceDetailsPage :where(.details-device-icon, .model-b-heading-icon, .details-actions button) svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#deviceDetailsPage .details-title-line {
  gap: 10px;
}

#deviceDetailsPage .details-heading h2 {
  margin: 0;
  color: var(--detail-text);
  font-size: 1.55rem;
  line-height: 1.15;
}

#deviceDetailsPage .details-heading p {
  color: var(--detail-muted);
}

#deviceDetailsPage .details-device-meta {
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 8px;
  color: var(--detail-muted);
  font-size: 0.74rem;
}

#deviceDetailsPage .details-device-meta strong {
  color: var(--detail-text);
  font-weight: 700;
}

#deviceDetailsPage .details-actions button {
  min-height: 44px;
  gap: 8px;
  border-color: var(--detail-border);
  background: var(--detail-surface-raised);
  color: var(--detail-text);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

#deviceDetailsPage .details-actions button:hover {
  border-color: var(--detail-accent);
  background: var(--detail-accent-soft);
}

#deviceDetailsPage .details-actions button:active {
  transform: translateY(1px);
}

#deviceDetailsPage .details-actions .danger-action {
  color: #ff9ca7;
}

#deviceDetailsPage .device-details-tabs {
  display: flex;
  gap: 4px;
  margin: 0 -20px 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--detail-border);
  overflow-x: auto;
  scrollbar-width: none;
}

#deviceDetailsPage .device-details-tabs::-webkit-scrollbar {
  display: none;
}

#deviceDetailsPage .device-details-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: var(--detail-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

#deviceDetailsPage .device-details-tabs button::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--detail-accent);
  transform: scaleX(0);
  transition: transform 180ms ease;
}

#deviceDetailsPage .device-details-tabs button:hover,
#deviceDetailsPage .device-details-tabs button.active {
  color: var(--detail-text);
}

#deviceDetailsPage .device-details-tabs button.active::after {
  transform: scaleX(1);
}

#deviceDetailsPage .details-summary-grid {
  display: none;
}

#deviceDetailsPage .device-overview-model-b {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.25fr) minmax(260px, 0.95fr);
  gap: 12px;
  align-items: start;
}

#deviceDetailsPage .device-overview-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#deviceDetailsPage .model-b-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  background: var(--detail-surface);
  box-shadow: 0 8px 24px rgba(0, 7, 14, 0.12);
}

#deviceDetailsPage .model-b-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#deviceDetailsPage .model-b-heading-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
}

#deviceDetailsPage .model-b-heading-icon svg {
  width: 18px;
  height: 18px;
}

#deviceDetailsPage .model-b-card-heading h3 {
  margin: 0;
  color: var(--detail-text);
  font-size: 0.88rem;
}

#deviceDetailsPage .model-b-card-heading p,
#deviceDetailsPage .model-b-empty {
  margin: 3px 0 0;
  color: var(--detail-muted);
  font-size: 0.72rem;
}

#deviceDetailsPage .endpoint-health-content {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

#deviceDetailsPage .device-health-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: conic-gradient(var(--detail-warn) var(--health-score, 0deg), rgba(141, 173, 182, 0.2) 0);
}

#deviceDetailsPage .device-health-ring.good {
  background: conic-gradient(var(--detail-good) var(--health-score, 0deg), rgba(141, 173, 182, 0.2) 0);
}

#deviceDetailsPage .device-health-ring.risk {
  background: conic-gradient(var(--detail-risk) var(--health-score, 0deg), rgba(141, 173, 182, 0.2) 0);
}

#deviceDetailsPage .device-health-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--detail-surface);
}

#deviceDetailsPage .device-health-ring strong,
#deviceDetailsPage .device-health-ring span {
  position: relative;
  z-index: 1;
}

#deviceDetailsPage .device-health-ring strong {
  align-self: end;
  color: var(--detail-text);
  font-size: 2rem;
  line-height: 1;
}

#deviceDetailsPage .device-health-ring span {
  align-self: start;
  margin-top: 7px;
  color: var(--detail-muted);
  font-size: 0.7rem;
}

#deviceDetailsPage .endpoint-health-content > div:last-child > strong {
  color: var(--detail-good);
  font-size: 1.22rem;
}

#deviceDetailsPage .endpoint-health-content > div:last-child > p {
  color: var(--detail-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

#deviceDetailsPage .detail-list {
  gap: 0;
}

#deviceDetailsPage .detail-list div {
  min-height: 38px;
  align-items: center;
  padding: 8px 0;
  border-color: var(--detail-border);
}

#deviceDetailsPage .detail-list dt,
#deviceDetailsPage .detail-list dd {
  color: var(--detail-muted);
  line-height: 1.35;
}

#deviceDetailsPage .detail-list dd {
  color: var(--detail-text);
  overflow-wrap: anywhere;
}

#deviceDetailsPage .resource-metrics,
#deviceDetailsPage .storage-bars {
  display: grid;
  gap: 13px;
}

#deviceDetailsPage .resource-metric,
#deviceDetailsPage .storage-bar-row {
  display: grid;
  gap: 7px;
}

#deviceDetailsPage :where(.resource-metric, .storage-bar-row) > div:first-child,
#deviceDetailsPage .security-posture-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#deviceDetailsPage :where(.resource-metric, .storage-bar-row) span,
#deviceDetailsPage .security-posture-grid span {
  color: var(--detail-muted);
  font-size: 0.74rem;
}

#deviceDetailsPage :where(.resource-metric, .storage-bar-row) strong,
#deviceDetailsPage .security-posture-grid strong {
  color: var(--detail-text);
  font-size: 0.76rem;
  text-align: right;
}

#deviceDetailsPage .resource-metric small {
  color: var(--detail-muted);
  font-size: 0.68rem;
}

#deviceDetailsPage .metric-track {
  height: 6px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(134, 171, 181, 0.18);
}

#deviceDetailsPage .metric-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--detail-accent);
}

#deviceDetailsPage .metric-track.warn i {
  background: var(--detail-warn);
}

#deviceDetailsPage .metric-track.risk i {
  background: var(--detail-risk);
}

#deviceDetailsPage .security-posture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#deviceDetailsPage .security-posture-grid > div {
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--detail-border);
  border-radius: 6px;
  background: rgba(3, 18, 25, 0.24);
}

#deviceDetailsPage .good-text {
  color: var(--detail-good) !important;
}

#deviceDetailsPage .risk-text {
  color: var(--detail-risk) !important;
}

#deviceDetailsPage .attention-card {
  border-color: rgba(240, 173, 53, 0.38);
}

#deviceDetailsPage .attention-list {
  display: grid;
  gap: 8px;
}

#deviceDetailsPage .attention-list > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px;
  border-radius: 6px;
  background: rgba(240, 173, 53, 0.08);
}

#deviceDetailsPage .attention-indicator {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--detail-warn);
}

#deviceDetailsPage .attention-list p {
  display: grid;
  gap: 3px;
  margin: 0;
}

#deviceDetailsPage .attention-list strong {
  color: var(--detail-text);
  font-size: 0.76rem;
}

#deviceDetailsPage .attention-list small {
  color: var(--detail-muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

#deviceDetailsPage .model-b-card :where(.timeline-list, .policy-list) {
  gap: 0;
}

#deviceDetailsPage .model-b-card :where(.timeline-list, .policy-list) p {
  min-height: 40px;
  color: var(--detail-text);
  border-color: var(--detail-border);
}

#deviceDetailsPage .device-details-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#deviceDetailsPage .device-details-grid > [data-device-detail-panel] {
  grid-column: 1 / -1;
}

#deviceDetailsPage .device-details-grid > [data-device-detail-panel="security"],
#deviceDetailsPage .device-details-grid > [data-device-detail-panel="evidence"] {
  grid-column: auto;
}

#deviceDetailsPage .device-details-grid > [hidden] {
  display: none !important;
}

#deviceDetailsPage[data-active-detail-tab="security"] .device-details-grid,
#deviceDetailsPage[data-active-detail-tab="evidence"] .device-details-grid {
  align-items: start;
}

#deviceDetailsPage .details-card {
  border-color: var(--detail-border);
  border-radius: 8px;
  background: var(--detail-surface);
}

#deviceDetailsPage .details-card h3 {
  color: var(--detail-text);
}

body[data-theme="light"] #deviceDetailsPage .device-details-workspace {
  --detail-surface: #ffffff;
  --detail-surface-raised: #f7fafc;
  --detail-border: #d7e2ea;
  --detail-text: #122534;
  --detail-muted: #607687;
  --detail-accent: #246bdf;
  --detail-accent-soft: #eaf2ff;
  --detail-good: #159a55;
  --detail-warn: #c77a05;
  --detail-risk: #dc4051;
}

body[data-theme="light"] #deviceDetailsPage .model-b-card {
  box-shadow: 0 8px 22px rgba(29, 57, 74, 0.07);
}

body[data-theme="light"] #deviceDetailsPage .security-posture-grid > div {
  background: #f8fafc;
}

body[data-theme="light"] #deviceDetailsPage .installed-apps-card thead th,
body[data-theme="light"] #deviceDetailsPage .required-kbs-card thead th,
body[data-theme="light"] #deviceDetailsPage .installed-kbs-card thead th {
  background: #f2f6f9;
  color: var(--detail-text);
}

@media (max-width: 1180px) {
  #deviceDetailsPage .device-overview-model-b {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #deviceDetailsPage .device-overview-column:last-child {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #deviceDetailsPage .details-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #deviceDetailsPage .details-actions {
    justify-content: flex-start;
  }

  #deviceDetailsPage .details-actions button {
    flex: 1 1 140px;
    justify-content: center;
  }

  #deviceDetailsPage .device-overview-model-b,
  #deviceDetailsPage .device-overview-column:last-child,
  #deviceDetailsPage .device-details-grid {
    grid-template-columns: 1fr;
  }

  #deviceDetailsPage .device-overview-column:last-child,
  #deviceDetailsPage .device-details-grid > [data-device-detail-panel] {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  #deviceDetailsPage .device-details-workspace {
    padding: 14px 12px 24px;
  }

  #deviceDetailsPage .device-details-tabs {
    margin-right: -12px;
    margin-left: -12px;
    padding: 0 12px;
  }

  #deviceDetailsPage .details-device-heading {
    align-items: flex-start;
  }

  #deviceDetailsPage .details-device-icon {
    width: 42px;
    height: 42px;
  }

  #deviceDetailsPage .details-heading h2 {
    font-size: 1.3rem;
  }

  #deviceDetailsPage .details-device-meta {
    display: grid;
    gap: 5px;
  }

  #deviceDetailsPage .details-more-button {
    display: none;
  }

  #deviceDetailsPage .endpoint-health-content {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  #deviceDetailsPage .device-health-ring {
    width: 96px;
    height: 96px;
  }

  #deviceDetailsPage .security-posture-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  #dashboardPage {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
  }

  #dashboardPage[hidden] {
    display: none;
  }

  #dashboardPage > .app-drawer {
    position: sticky;
    inset: auto;
    top: 0;
    grid-row: 1 / -1;
    width: 76px;
    min-width: 76px;
    height: 100vh;
    min-height: 100vh;
    padding: 14px 10px;
    overflow-x: hidden;
    box-shadow: none;
    transform: none;
  }

  #dashboardPage > .dense-topbar,
  #dashboardPage > .dense-content {
    grid-column: 2;
    min-width: 0;
  }

  #dashboardPage > .drawer-backdrop,
  #dashboardPage #menuButton {
    display: none;
  }

  #dashboardPage .drawer-head {
    display: block;
    margin: 0;
  }

  #dashboardPage .devices-brand {
    justify-content: center;
  }

  #dashboardPage .devices-brand > svg,
  #dashboardPage .devices-brand > strong,
  #dashboardPage .drawer-nav small,
  #dashboardPage .drawer-nav .nav-label,
  #dashboardPage .sidebar-user-panel .admin-chip > div {
    display: none;
  }

  #dashboardPage .devices-brand > .icon-button {
    margin: 0 auto;
  }

  #dashboardPage .drawer-nav {
    gap: 4px;
  }

  #dashboardPage .drawer-nav a {
    justify-content: center;
    min-height: 34px;
    padding: 0;
    font-size: 0;
  }

  #dashboardPage .drawer-nav a::before {
    width: 18px;
    height: 18px;
    margin-right: 0;
  }

  #dashboardPage .sidebar-user-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #deviceDetailsPage .details-actions button,
  #deviceDetailsPage .device-details-tabs button::after {
    transition: none;
  }
}

@media (max-width: 1120px) {
  .details-summary-grid,
  .device-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .details-summary-grid,
  .device-details-grid {
    grid-template-columns: 1fr;
  }

  .wide-card {
    grid-column: auto;
  }

  .details-heading {
    flex-direction: column;
  }
}

.theme-mode-toggle {
  position: static;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(59, 130, 246, 0.38);
  border-radius: 6px;
  background: rgba(8, 27, 34, 0.94);
  color: #e9fffc;
  cursor: pointer;
  box-shadow: none;
}

.theme-mode-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-mode-toggle[data-mode="light"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z'/%3E%3C/svg%3E");
}

.devices-sidebar .devices-nav,
.app-drawer .drawer-nav {
  flex: 0 0 auto;
  align-content: start;
}

.sidebar-user-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 4px 2px;
  border-top: 1px solid rgba(154, 208, 207, 0.16);
}

.sidebar-user-panel .admin-chip {
  min-width: 0;
}

.sidebar-user-panel .admin-chip > div {
  min-width: 0;
}

.sidebar-user-panel .admin-chip strong,
.sidebar-user-panel .admin-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-panel .sidebar-signout {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(154, 208, 207, 0.18);
  border-radius: 6px;
  background: rgba(10, 26, 35, 0.84);
  color: #d9eeee;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
}

.sidebar-user-panel .sidebar-signout::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-theme="light"] .sidebar-user-panel {
  border-top-color: #d8e5e8;
}

body[data-theme="light"] .sidebar-user-panel .sidebar-signout {
  border-color: #cbdde2;
  background: #ffffff;
  color: #1d4ed8;
}

.theme-mode-toggle[hidden] {
  display: none;
}

.theme-mode-toggle:hover {
  border-color: rgba(59, 130, 246, 0.76);
  color: #3b82f6;
}

body[data-theme="dark"] {
  color-scheme: dark;
  background: #061116;
  color: #eef7ff;
}

body[data-theme="dark"] .dashboard-page,
body[data-theme="dark"] .dense-dashboard,
body[data-theme="dark"] .settings-page,
body[data-theme="dark"] .devices-page,
body[data-theme="dark"] .device-details-page,
body[data-theme="dark"] .users-page,
body[data-theme="dark"] .groups-page,
body[data-theme="dark"] .applications-page,
body[data-theme="dark"] .policies-page,
body[data-theme="dark"] .remote-access-page,
body[data-theme="dark"] .agent-management-page,
body[data-theme="dark"] .patch-management-page,
body[data-theme="dark"] .compliance-page,
body[data-theme="dark"] .alerts-page,
body[data-theme="dark"] .reports-page,
body[data-theme="dark"] .roles-page,
body[data-theme="dark"] .audit-page {
  background:
    radial-gradient(circle at 76% 8%, rgba(59, 130, 246, 0.16), transparent 28%),
    radial-gradient(circle at 12% 90%, rgba(217, 171, 67, 0.08), transparent 30%),
    #061116;
  color: #eef7ff;
}

body[data-theme="dark"] :where(.devices-sidebar, .app-sidebar, .app-drawer, .dense-topbar, .devices-topbar) {
  background: rgba(5, 18, 24, 0.96);
  border-color: rgba(99, 170, 255, 0.16);
  color: #eef7ff;
}

body[data-theme="dark"] :where(.kpi-card, .panel, .device-summary-card, .summary-card, .dash-card, .settings-card, .devices-table-panel, .users-table-panel, .applications-table-panel, .remote-device-card, .mesh-status, .mesh-status div, .remote-security, .security-push-status, .live-session-head, .remote-live-panel, .policy-card, .policy-detail, .policy-detail-section, .overview-panel, .dense-inventory, .inventory-card) {
  background: rgba(8, 28, 36, 0.86);
  border-color: rgba(99, 170, 255, 0.16);
  color: #eef7ff;
}

body[data-theme="dark"] :where(h1, h2, h3, h4, th, td, strong, .devices-brand, .devices-brand strong, .app-logo, .mini-logo, .details-heading h2, .dashboard-header h2) {
  color: #f5fbff;
}

body[data-theme="dark"] :where(p, label, li, dt, dd, small, .muted, .subtle, .help-text, .meta, .caption, .kpi-card small, .summary-card small, .device-summary-card small, .panel p, .card p, .details-card p, .remote-device-card small, .table-subtitle) {
  color: rgba(220, 238, 248, 0.74);
}

body[data-theme="dark"] :where(table, .devices-table, .details-table, .dense-inventory table) {
  color: #eef7ff;
}

body[data-theme="dark"] :where(th, td, .devices-table th, .devices-table td, .details-table th, .details-table td, .dense-inventory th, .dense-inventory td) {
  border-color: rgba(99, 170, 255, 0.14);
}

body[data-theme="dark"] :where(input, select, textarea, .search-box, .device-search) {
  background: rgba(3, 15, 20, 0.88);
  border-color: rgba(99, 170, 255, 0.22);
  color: #f5fbff;
}

body[data-theme="dark"] :where(button, .button-link, .remote-action-grid button, .inventory-head button, .inventory-footer button) {
  background: rgba(8, 28, 36, 0.9);
  border-color: rgba(99, 170, 255, 0.24);
  color: #9ecbff;
}

body[data-theme="dark"] :where(.primary-action, button.primary-action, .sign-in, .button-link.primary-action, .remote-action-grid .primary-action) {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

body[data-theme="light"] {
  color-scheme: light;
  background: #eef4f6;
  color: #152631;
}

body[data-theme="light"] .boot-loading-page {
  background: #eef4f6;
}

body[data-theme="light"] .boot-skeleton-shell {
  color: #102633;
}

body[data-theme="light"] .boot-skeleton-sidebar,
body[data-theme="light"] .boot-skeleton-topbar,
body[data-theme="light"] .boot-skeleton-table {
  background: rgba(255, 255, 255, 0.96);
  border-color: #d8e6ea;
}

body[data-theme="light"] .boot-skeleton-sidebar span,
body[data-theme="light"] .boot-skeleton-sidebar i,
body[data-theme="light"] .boot-skeleton-topbar span,
body[data-theme="light"] .boot-skeleton-kpis i,
body[data-theme="light"] .boot-skeleton-grid i,
body[data-theme="light"] .boot-skeleton-table span {
  background: #e8f0f8;
}

body[data-theme="light"] .boot-skeleton-sidebar span::after,
body[data-theme="light"] .boot-skeleton-sidebar i::after,
body[data-theme="light"] .boot-skeleton-topbar span::after,
body[data-theme="light"] .boot-skeleton-kpis i::after,
body[data-theme="light"] .boot-skeleton-grid i::after,
body[data-theme="light"] .boot-skeleton-table span::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
}

body[data-theme="light"] .boot-skeleton-topbar strong {
  color: #102633;
}

body[data-theme="light"] .boot-skeleton-topbar small {
  color: #536977;
}

body[data-theme="light"] .theme-mode-toggle {
  background: #ffffff;
  color: #1d4ed8;
  border-color: #c9dcdf;
  box-shadow: 0 12px 26px rgba(27, 57, 68, 0.16);
}

body[data-theme="light"] .dashboard-page,
body[data-theme="light"] .dense-dashboard,
body[data-theme="light"] .settings-page,
body[data-theme="light"] .devices-page,
body[data-theme="light"] .device-details-page,
body[data-theme="light"] .users-page,
body[data-theme="light"] .groups-page,
body[data-theme="light"] .applications-page,
body[data-theme="light"] .policies-page,
body[data-theme="light"] .remote-access-page,
body[data-theme="light"] .agent-management-page,
body[data-theme="light"] .patch-management-page,
body[data-theme="light"] .compliance-page,
body[data-theme="light"] .alerts-page,
body[data-theme="light"] .reports-page,
body[data-theme="light"] .roles-page,
body[data-theme="light"] .audit-page {
  background:
    radial-gradient(circle at 78% 8%, rgba(59, 130, 246, 0.12), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(217, 171, 67, 0.12), transparent 30%),
    #eef4f6;
  color: #172733;
}

body[data-theme="light"] .devices-sidebar,
body[data-theme="light"] .app-sidebar,
body[data-theme="light"] .app-drawer {
  border-color: #d8e5e8;
  background: rgba(255, 255, 255, 0.96);
  color: #172733;
  box-shadow: 12px 0 28px rgba(27, 57, 68, 0.06);
}

body[data-theme="light"] .devices-brand,
body[data-theme="light"] .devices-brand strong,
body[data-theme="light"] .app-logo,
body[data-theme="light"] .mini-logo,
body[data-theme="light"] .details-heading h2,
body[data-theme="light"] .dashboard-header h2,
body[data-theme="light"] .policy-detail-head h3,
body[data-theme="light"] .remote-list-head h3,
body[data-theme="light"] .panel h3,
body[data-theme="light"] .card-topline h3 {
  color: #122632;
}

body[data-theme="light"] .devices-brand span,
body[data-theme="light"] .app-logo b,
body[data-theme="light"] .details-heading p,
body[data-theme="light"] .remote-list-head p,
body[data-theme="light"] .policy-detail-head p,
body[data-theme="light"] .dashboard-header p {
  color: #2563eb;
}

body[data-theme="light"] .devices-nav a,
body[data-theme="light"] .drawer-nav a,
body[data-theme="light"] .app-nav a,
body[data-theme="light"] .devices-nav small,
body[data-theme="light"] .drawer-nav small {
  color: #536977;
}

body[data-theme="light"] .devices-nav a.active,
body[data-theme="light"] .devices-nav a:hover,
body[data-theme="light"] .drawer-nav a.active,
body[data-theme="light"] .drawer-nav a:hover,
body[data-theme="light"] .app-nav a.active,
body[data-theme="light"] .app-nav a:hover {
  background: #eaf2ff;
  color: #1d4ed8;
}

body[data-theme="light"] .dense-topbar,
body[data-theme="light"] .devices-topbar {
  border-color: #d8e5e8;
  background: rgba(255, 255, 255, 0.9);
  color: #172733;
  box-shadow: 0 12px 30px rgba(27, 57, 68, 0.08);
}

body[data-theme="light"] .kpi-card,
body[data-theme="light"] .panel,
body[data-theme="light"] .device-summary-card,
body[data-theme="light"] .summary-card,
body[data-theme="light"] .dash-card,
body[data-theme="light"] .settings-card,
body[data-theme="light"] .application-status-grid article,
body[data-theme="light"] .remote-device-card,
body[data-theme="light"] .mesh-status,
body[data-theme="light"] .mesh-status div,
body[data-theme="light"] .remote-security,
body[data-theme="light"] .security-push-status,
body[data-theme="light"] .live-session-head,
body[data-theme="light"] .remote-live-panel {
  border-color: #d8e5e8;
  background: rgba(255, 255, 255, 0.94);
  color: #172733;
  box-shadow: 0 12px 28px rgba(27, 57, 68, 0.08);
}

body[data-theme="light"] .security-push-summary {
  border-color: #d8e5e8;
  background: #ffffff;
  color: #172733;
  box-shadow: 0 10px 24px rgba(27, 57, 68, 0.07);
}

body[data-theme="light"] .security-push-summary h3 {
  color: #122632;
}

body[data-theme="light"] .security-push-summary .policy-detail-section p {
  border-color: #e1eaed;
  color: #536977;
}

body[data-theme="light"] .security-push-summary .policy-detail-section p span:last-child {
  color: #2563eb;
}

body[data-theme="light"] #dashboardPage .kpi-card:hover,
body[data-theme="light"] #dashboardPage .panel:hover,
body[data-theme="light"] #dashboardPage .device-summary-card:hover {
  border-color: rgba(37, 99, 235, 0.38);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(27, 57, 68, 0.12);
}

body[data-theme="light"] #dashboardPage .kpi-card:hover::before,
body[data-theme="light"] #dashboardPage .panel:hover::before,
body[data-theme="light"] #dashboardPage .device-summary-card:hover::before,
body[data-theme="light"] #dashboardPage .kpi-card:focus-within::before,
body[data-theme="light"] #dashboardPage .panel:focus-within::before,
body[data-theme="light"] #dashboardPage .device-summary-card:focus-within::before {
  opacity: 0;
}

body[data-theme="light"] .kpi-card span,
body[data-theme="light"] .kpi-card small,
body[data-theme="light"] .device-summary-card span,
body[data-theme="light"] .device-summary-card small,
body[data-theme="light"] .remote-session-details dt,
body[data-theme="light"] .application-status-grid span,
body[data-theme="light"] .application-status-grid small,
body[data-theme="light"] .check-list p,
body[data-theme="light"] .policy-list p,
body[data-theme="light"] .timeline-list p,
body[data-theme="light"] .health-panel li,
body[data-theme="light"] .pending-panel p,
body[data-theme="light"] .reports-panel p,
body[data-theme="light"] .overview-body span,
body[data-theme="light"] .overview-body li,
body[data-theme="light"] .version-body li {
  color: #536977;
}

body[data-theme="light"] .kpi-card strong,
body[data-theme="light"] .device-summary-card strong,
body[data-theme="light"] .summary-card strong,
body[data-theme="light"] .remote-session-details dd,
body[data-theme="light"] .application-status-grid strong,
body[data-theme="light"] .overview-body strong,
body[data-theme="light"] .health-panel li span,
body[data-theme="light"] .pending-panel p span,
body[data-theme="light"] .version-body li span {
  color: #102633;
}

body[data-theme="light"] table,
body[data-theme="light"] .devices-table,
body[data-theme="light"] .details-table {
  color: #263b47;
}

body[data-theme="light"] th,
body[data-theme="light"] td,
body[data-theme="light"] .devices-table th,
body[data-theme="light"] .devices-table td,
body[data-theme="light"] .details-table th,
body[data-theme="light"] .details-table td,
body[data-theme="light"] .policy-list p,
body[data-theme="light"] .timeline-list p {
  border-color: #e1eaed;
}

body[data-theme="light"] th,
body[data-theme="light"] .devices-table th,
body[data-theme="light"] .details-table th {
  color: #66808d;
}

body[data-theme="light"] .devices-table tr.selected,
body[data-theme="light"] #dashboardPage .devices-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.08);
}

body[data-theme="light"] .search-box,
body[data-theme="light"] .device-search,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  border-color: #cbdde2;
  background: #ffffff;
  color: #172733;
}

body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color: #7a929d;
}

body[data-theme="light"] button,
body[data-theme="light"] .details-actions button,
body[data-theme="light"] .details-actions .button-link,
body[data-theme="light"] .remote-action-grid button,
body[data-theme="light"] .device-toolbar button,
body[data-theme="light"] .header-actions button,
body[data-theme="light"] .quick-actions button,
body[data-theme="light"] .sidebar-actions button {
  border-color: #cbdde2;
  background: #ffffff;
  color: #1d4ed8;
}

body[data-theme="light"] .primary-action,
body[data-theme="light"] button.primary-action,
body[data-theme="light"] .details-actions .button-link[href*="latest-agent-msi"],
body[data-theme="light"] .sign-in,
body[data-theme="light"] .details-actions .primary-action,
body[data-theme="light"] .remote-action-grid .primary-action {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #ffffff;
}

body[data-theme="light"] .admin-chip {
  border-color: #d8e5e8;
  background: #ffffff;
  color: #172733;
}

body[data-theme="light"] .admin-chip strong {
  color: #172733;
}

body[data-theme="light"] .admin-chip small {
  color: #66808d;
}

body[data-theme="light"] .icon-button,
body[data-theme="light"] .alert-dot {
  background: #ffffff;
  color: #1d4ed8;
}

body[data-theme="light"] .trend-area {
  fill: rgba(59, 130, 246, 0.18);
}

body[data-theme="light"] .grid-lines path {
  stroke: rgba(74, 103, 116, 0.18);
}

body[data-theme="light"] .axis-labels text {
  fill: #5d7580;
}

body[data-theme="light"] .big-donut,
body[data-theme="light"] .version-donut,
body[data-theme="light"] .donut-chart {
  box-shadow: inset 0 0 0 14px #eef4f6;
}

body[data-theme="light"] .mini-bar {
  background:
    linear-gradient(90deg, #3b82f6 var(--value), #dce8eb var(--value));
}

body[data-theme="light"] .live-alert-popup,
body[data-theme="light"] .live-alert-menu {
  background: #ffffff;
  color: #172733;
  border-color: rgba(184, 50, 50, 0.26);
  box-shadow: 0 16px 36px rgba(27, 57, 68, 0.16);
}

body[data-theme="light"] .live-alert-copy span {
  color: #536977;
}

body[data-theme="light"] :where(
  h1,
  h2,
  h3,
  h4,
  p,
  label,
  li,
  dt,
  dd,
  th,
  td,
  strong,
  small,
  span,
  .panel,
  .card,
  .row,
  .metric,
  .table-title,
  .section-title,
  .details-card,
  .device-card,
  .remote-device-card,
  .settings-card,
  .summary-card,
  .kpi-card
) {
  color: #172733;
}

body[data-theme="light"] :where(
  .muted,
  .subtle,
  .help-text,
  .meta,
  .caption,
  .kpi-card small,
  .summary-card small,
  .device-summary-card small,
  .panel p,
  .card p,
  .details-card p,
  .remote-device-card small,
  .table-subtitle
) {
  color: #536977;
}

body[data-theme="light"] :where(
  .primary-action,
  button.primary-action,
  .sign-in,
  .button-link.primary-action,
  .remote-action-grid .primary-action,
  .details-actions .primary-action
),
body[data-theme="light"] :where(
  .status.good,
  .status.ok,
  .status-pill.good,
  .status-pill.ok,
  .badge.good,
  .pill.good
) {
  color: #ffffff;
}

body[data-theme="light"] :where(
  .status,
  .badge,
  .pill,
  .tag,
  .chip,
  .app-pill
) {
  color: #0f3b45;
}

body[data-theme="light"] :where(
  a,
  .panel-action-link,
  .details-table a,
  .devices-table a
) {
  color: #1d4ed8;
}

body[data-theme="light"] :where(
  .compliance-score,
  .remote-actions-card,
  .remote-security,
  .policy-detail-section,
  .wipe-readiness-summary article
) {
  border: 1px solid #d8e5e8;
  background: #ffffff;
  color: #172733;
}

body[data-theme="light"] :where(
  .compliance-score h4,
  .remote-actions-card h4,
  .policy-detail-section h4,
  .detail-list dd,
  .remote-session-details dd
) {
  color: #172733;
}

body[data-theme="light"] :where(
  .compliance-score p,
  .detail-list dt,
  .remote-security-list p,
  .remote-action-grid .remote-command-status
) {
  color: #536977;
}

body[data-theme="light"] .score-ring {
  border-color: #dce8eb;
  border-top-color: #2563eb;
  border-right-color: #2563eb;
  border-bottom-color: #2563eb;
  color: #172733;
}

body[data-theme="light"] :where(.policy-list p, .timeline-list p) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  color: #172733;
}

body[data-theme="light"] .policy-list p,
body[data-theme="light"] .timeline-list p {
  color: #172733;
}

body[data-theme="light"] :where(.policy-list p > span, .timeline-list p > span) {
  justify-self: end;
  max-width: 100%;
  color: #1d4ed8;
  text-align: right;
}

body[data-theme="light"] .policy-list .policy-name {
  justify-self: start;
  color: #172733;
  text-align: left;
}

body[data-theme="light"] :where(.remote-actions-card button, .remote-action-grid button) {
  background: #ffffff;
  border-color: #cbdde2;
  color: #1d4ed8;
}

@media (max-width: 520px) {
  body[data-theme="light"] :where(.policy-list p, .timeline-list p) {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  body[data-theme="light"] :where(.policy-list p > span, .timeline-list p > span) {
    justify-self: start;
    text-align: left;
  }
}

/* Production light-mode polish: keep contrast high without changing dark mode. */
body[data-theme="light"] {
  background: #f4f8fa;
  color: #102633;
}

body[data-theme="light"] :where(.dense-topbar, .devices-topbar) {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #d6e4e8;
  box-shadow: 0 8px 22px rgba(21, 47, 59, 0.08);
}

body[data-theme="light"] :where(.kpi-card, .panel, .device-summary-card, .summary-card, .dash-card, .settings-card, .devices-table-panel, .users-table-panel, .applications-table-panel, .remote-device-card, .security-push-status) {
  background: #ffffff;
  border-color: #d8e6ea;
  color: #102633;
  box-shadow: 0 8px 22px rgba(21, 47, 59, 0.07);
}

body[data-theme="light"] :where(.kpi-card strong, .panel strong, .summary-card strong, .device-summary-card strong, .dashboard-security-banner strong, .inventory-head h3, .dense-inventory th, .dense-inventory td, .devices-table th, .devices-table td) {
  color: #102633;
}

body[data-theme="light"] :where(.kpi-card span, .kpi-card small, .panel p, .summary-card small, .device-summary-card small, .inventory-footer, .dense-inventory small, .devices-table small, .dashboard-security-banner p) {
  color: #425a67;
}

body[data-theme="light"] #usersPage .users-table-panel .devices-table td,
body[data-theme="light"] #usersPage .users-table-panel .devices-table td strong {
  color: #102633 !important;
}

body[data-theme="light"] #usersPage .users-table-panel .devices-table td small {
  color: #536977 !important;
}

body[data-theme="light"] #usersPage .users-table-panel .devices-table tr.selected {
  background: #eaf2ff !important;
}

body[data-theme="light"] #usersPage .users-table-panel .devices-table tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #3b82f6;
}

body[data-theme="light"] #policiesPage .policy-toolbar.panel {
  background: #ffffff !important;
  border-color: #d8e6ea !important;
  box-shadow: 0 8px 20px rgba(21, 47, 59, 0.06);
}

body[data-theme="light"] #policiesPage .policy-card {
  background: #ffffff !important;
  border-color: #d8e6ea !important;
  color: #102633 !important;
  box-shadow: 0 8px 20px rgba(21, 47, 59, 0.06);
}

body[data-theme="light"] #policiesPage .policy-card.selected {
  background: #eaf2ff !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  box-shadow:
    inset 3px 0 0 #3b82f6,
    0 10px 24px rgba(21, 47, 59, 0.08);
}

body[data-theme="light"] #policiesPage .policy-card:hover {
  background: #f8fbff !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #102633 !important;
}

body[data-theme="light"] #policiesPage :where(.policy-card h3, .policy-card strong, .policy-detail h3, .policy-detail strong) {
  color: #102633 !important;
}

body[data-theme="light"] #policiesPage :where(.policy-card p, .policy-card small, .policy-detail p) {
  color: #425a67 !important;
}

body[data-theme="light"] #policiesPage .policy-detail {
  background: #ffffff !important;
  border-color: #d8e6ea !important;
  color: #102633 !important;
}

body[data-theme="light"] #policiesPage .policy-score-row,
body[data-theme="light"] #policiesPage .policy-detail-section {
  background: #f8fbfc !important;
  border-color: #d8e6ea !important;
  color: #102633 !important;
}

body[data-theme="light"] #policiesPage .policy-detail-section p {
  color: #102633 !important;
}

body[data-theme="light"] #policiesPage .policy-detail-section p span:last-child {
  color: #1d4ed8 !important;
}

body[data-theme="light"] .dashboard-security-banner {
  background: linear-gradient(90deg, #fff4f4, #ffffff 68%);
  border-color: #ea7780;
  color: #102633;
  box-shadow: 0 10px 28px rgba(159, 50, 62, 0.12);
}

body[data-theme="light"] .dashboard-security-banner button {
  background: #ffffff;
  border-color: #d7e5e9;
  color: #1d4ed8;
}

body[data-theme="light"] .dashboard-security-banner button:first-child,
body[data-theme="light"] .dashboard-security-banner .primary-action {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

body[data-theme="light"] :where(.status.good, .status.ok, .status-pill.good, .status-pill.ok, .badge.good, .pill.good) {
  background: #dbeafe;
  color: #1d4ed8;
}

body[data-theme="light"] :where(.status.warn, .status.warning, .badge.warn, .pill.warn) {
  background: #fff0c8;
  color: #8a5a00;
}

body[data-theme="light"] :where(.status.risk, .status.critical, .badge.risk, .pill.risk) {
  background: #ffe0e4;
  color: #a3192d;
}

body[data-theme="light"] .mini-bar {
  background: linear-gradient(90deg, #3b82f6 var(--value), #dce8eb var(--value));
}

body[data-theme="light"] :where(.trend-area, .spark-area) {
  fill: rgba(59, 130, 246, 0.18);
}

body[data-theme="light"] :where(.trend-line, .spark-line) {
  stroke: #2563eb;
}

body[data-theme="light"] :where(.axis-labels text, .trend-panel text) {
  fill: #4a6471;
}

body[data-theme="light"] :where(button, .button-link, .remote-action-grid button, .inventory-head button, .inventory-footer button) {
  background: #ffffff;
  border-color: #c9dce2;
  color: #1d4ed8;
}

body[data-theme="light"] :where(button:hover, .button-link:hover, .remote-action-grid button:hover, .inventory-head button:hover, .inventory-footer button:hover) {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e3a8a;
}

body[data-theme="light"] .agent-refresh-strip {
  border-color: #d8e6ea;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(27, 57, 68, 0.06);
}

body[data-theme="light"] .agent-refresh-strip label,
body[data-theme="light"] .agent-refresh-strip select,
body[data-theme="light"] .agent-refresh-strip button {
  color: #0c2c38;
}

body[data-theme="light"] .agent-refresh-strip select,
body[data-theme="light"] .agent-refresh-strip button {
  border-color: #c9dce2;
  background: #f8fcfc;
}

body[data-theme="light"] .agent-refresh-strip small {
  color: #536977;
}

body[data-theme="light"] :where(.primary-action, button.primary-action, .sign-in, .remote-action-grid .primary-action) {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

body[data-theme="light"] :where(#dashboardPage .kpi-card:hover, #dashboardPage .panel:hover, #dashboardPage .device-summary-card:hover) {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(21, 47, 59, 0.12);
}

body[data-theme="light"] :where(.devices-table tbody tr:hover, .dense-inventory tbody tr:hover, .users-table tbody tr:hover, .applications-table tbody tr:hover) {
  background: transparent;
}

/* Applications Model C */
#applicationsPage .applications-workspace {
  padding: 16px;
}

#applicationsPage .applications-c-heading {
  align-items: center;
  margin-bottom: 12px;
}

#applicationsPage .applications-c-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 8px;
}

#applicationsPage .applications-c-actions button {
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}

#applicationsPage .icon-text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#applicationsPage .icon-text-button svg,
#applicationsPage [data-user-icon] svg,
#applicationsPage .application-command-history h3 svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#applicationsPage .applications-c-summary {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

#applicationsPage .applications-c-summary .device-summary-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 104px;
  padding: 14px;
}

#applicationsPage .applications-c-summary .summary-card-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(66, 133, 244, 0.22);
  border-radius: 7px;
  color: #2f6fed;
  background: rgba(47, 111, 237, 0.08);
}

#applicationsPage .applications-c-summary .good .summary-card-icon {
  color: #008f82;
  background: rgba(0, 174, 156, 0.09);
  border-color: rgba(0, 174, 156, 0.24);
}

#applicationsPage .applications-c-summary .warn .summary-card-icon {
  color: #b77700;
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.25);
}

#applicationsPage .applications-c-summary .risk .summary-card-icon {
  color: #d64255;
  background: rgba(224, 71, 91, 0.09);
  border-color: rgba(224, 71, 91, 0.24);
}

#applicationsPage .applications-c-summary .summary-card-icon svg {
  width: 21px;
  height: 21px;
}

#applicationsPage .applications-c-summary .device-summary-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#applicationsPage .applications-c-summary .device-summary-card strong {
  margin: 0;
  font-size: 1.55rem;
}

#applicationsPage .applications-layout {
  grid-template-columns: minmax(0, 3fr) minmax(290px, 0.78fr);
  gap: 10px;
}

#applicationsPage .applications-table-panel {
  min-width: 0;
}

#applicationsPage .applications-c-tabs {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  gap: 4px;
  border-bottom: 1px solid rgba(124, 158, 174, 0.2);
}

#applicationsPage .applications-c-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  color: #607784;
  background: transparent;
}

#applicationsPage .applications-c-tabs button::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  content: "";
  transition: background-color 160ms ease;
}

#applicationsPage .applications-c-tabs button.active {
  color: #195ecb;
}

#applicationsPage .applications-c-tabs button.active::after {
  background: #2f6fed;
}

#applicationsPage .applications-c-tabs button strong {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 10px;
  color: #195ecb;
  background: rgba(47, 111, 237, 0.1);
  font-size: 0.68rem;
}

#applicationsPage .device-toolbar {
  border-bottom: 1px solid rgba(124, 158, 174, 0.2);
}

#applicationsPage .device-search [data-user-icon] {
  display: grid;
  place-items: center;
}

#applicationsPage .dense-inventory {
  overflow: auto;
}

#applicationsPage .applications-table-panel .devices-table {
  min-width: 860px;
}

#applicationsPage .applications-table-panel .devices-table th,
#applicationsPage .applications-table-panel .devices-table td {
  vertical-align: middle;
}

#applicationsPage .applications-table-panel .devices-table tbody tr {
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

#applicationsPage .applications-table-panel .devices-table tbody tr.selected {
  box-shadow: inset 3px 0 #2f6fed;
}

#applicationsPage .application-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
}

#applicationsPage .application-name-cell > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#applicationsPage .application-name-cell strong,
#applicationsPage .application-name-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#applicationsPage .app-catalog-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(124, 158, 174, 0.22);
  border-radius: 7px;
  background: rgba(47, 111, 237, 0.06);
  color: #2f6fed;
  font-size: 0.55rem;
  font-weight: 900;
}

#applicationsPage .app-catalog-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

#applicationsPage .applications-table-panel .icon-button {
  min-width: 32px;
  width: 32px;
  height: 32px;
}

#applicationsPage .applications-side-panel {
  align-self: start;
  position: static;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

#applicationsPage .application-inspector-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(124, 158, 174, 0.2);
}

#applicationsPage .application-inspector-head > div {
  min-width: 0;
}

#applicationsPage .application-inspector-head h3,
#applicationsPage .application-inspector-head p,
#applicationsPage .application-inspector-head small {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#applicationsPage .application-inspector-head small,
#applicationsPage .application-inspector-head p {
  color: #607784;
  font-size: 0.7rem;
}

#applicationsPage .application-coverage {
  display: flex;
  align-items: center;
  gap: 12px;
}

#applicationsPage .application-version-report {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid rgba(124, 158, 174, 0.18);
  padding-top: 12px;
}

#applicationsPage .application-version-report h4,
#applicationsPage .version-report-note {
  margin: 0;
}

#applicationsPage .version-report-note {
  color: #607784;
  font-size: 0.7rem;
}

#applicationsPage .version-report-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#applicationsPage .version-report-counts > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(124, 158, 174, 0.2);
  border-radius: 4px;
  padding: 7px;
}

#applicationsPage .version-report-counts strong {
  font-size: 1.05rem;
}

#applicationsPage .version-report-counts span,
#applicationsPage .version-report-group {
  font-size: 0.7rem;
}

#applicationsPage .version-report-group summary,
#applicationsPage .version-report-devices > div {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(124, 158, 174, 0.18);
  padding: 6px 0;
}

#applicationsPage .version-report-group summary {
  cursor: pointer;
}

#applicationsPage .version-report-devices {
  max-height: 210px;
  overflow: auto;
}

#applicationsPage .version-report-devices > div {
  flex-wrap: wrap;
}

#applicationsPage .version-report-devices span,
#applicationsPage .version-report-devices small {
  color: #607784;
}

#applicationsPage .application-coverage > div:last-child {
  display: grid;
  gap: 3px;
}

#applicationsPage .application-coverage > div:last-child span {
  color: #607784;
  font-size: 0.7rem;
}

#applicationsPage .application-coverage-donut {
  display: grid;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  place-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff 0 58%, transparent 60%), conic-gradient(#2f6fed calc(var(--coverage) * 1%), #e4edf1 0);
  text-align: center;
}

#applicationsPage .application-coverage-donut strong,
#applicationsPage .application-coverage-donut span {
  display: block;
}

#applicationsPage .application-coverage-donut span {
  color: #607784;
  font-size: 0.62rem;
}

#applicationsPage .application-inspector-section {
  display: grid;
  gap: 8px;
}

#applicationsPage .application-inspector-section h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.76rem;
}

#applicationsPage .application-inspector-section h4 svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#applicationsPage .application-assignment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#applicationsPage .application-assignment-tags span {
  padding: 5px 8px;
  border-radius: 6px;
  color: #195ecb;
  background: rgba(47, 111, 237, 0.09);
  font-size: 0.66rem;
  font-weight: 800;
}

#applicationsPage .application-inspector-details {
  margin: 0;
  border-top: 1px solid rgba(124, 158, 174, 0.18);
}

#applicationsPage .application-inspector-details > div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(124, 158, 174, 0.18);
}

#applicationsPage .application-inspector-details dt {
  color: #607784;
}

#applicationsPage .application-inspector-details dd {
  overflow-wrap: anywhere;
  margin: 0;
  text-align: right;
  font-weight: 700;
}

#applicationsPage .application-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

#applicationsPage .application-inspector-actions button {
  justify-content: center;
  min-height: 36px;
}

#applicationsPage .application-inspector-actions .destructive-action {
  grid-column: 1 / -1;
  border-color: #f3b4bc;
  color: #b42336;
  background: #fff7f8;
}

#applicationsPage .application-inspector-actions .destructive-action:hover {
  border-color: #dc4358;
  background: #ffecee;
}

[data-theme="dark"] #applicationsPage .application-inspector-actions .destructive-action {
  border-color: #81303d;
  color: #ff929f;
  background: #241419;
}

#applicationsPage .application-inspector-result {
  margin: 0;
  padding: 9px 10px;
  border-left: 3px solid #2f6fed;
  color: #526a77;
  background: rgba(47, 111, 237, 0.06);
  font-size: 0.7rem;
  line-height: 1.45;
}

#applicationsPage .application-command-history {
  padding: 0;
  overflow: hidden;
}

#applicationsPage .application-command-history .remote-list-head {
  padding: 13px 14px;
}

#applicationsPage .application-command-history h3 {
  display: flex;
  align-items: center;
  gap: 7px;
}

#applicationsPage .application-command-history > .devices-table {
  min-width: 1080px;
}

#applicationsPage .applications-empty-state {
  display: grid;
  min-height: 160px;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #607784;
  text-align: center;
}

#applicationsPage .applications-empty-state svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #2f6fed;
  stroke-width: 1.8;
}

#applicationsPage .applications-empty-state strong {
  color: inherit;
}

body[data-theme="light"] #applicationsPage .applications-table-panel td strong,
body[data-theme="light"] #applicationsPage .application-name-cell strong {
  color: #142735;
}

body[data-theme="light"] #applicationsPage .applications-table-panel td small,
body[data-theme="light"] #applicationsPage .application-name-cell small {
  color: #607784;
}

body[data-theme="dark"] #applicationsPage .applications-table-panel td strong,
body[data-theme="dark"] #applicationsPage .application-name-cell strong {
  color: #eef7ff;
}

body[data-theme="dark"] #applicationsPage .applications-table-panel td small,
body[data-theme="dark"] #applicationsPage .application-name-cell small {
  color: #9eb8c3;
}

body[data-theme="dark"] #applicationsPage .application-coverage-donut {
  background: radial-gradient(circle at center, #08202a 0 58%, transparent 60%), conic-gradient(#4d8dff calc(var(--coverage) * 1%), #183643 0);
}

body[data-theme="dark"] #applicationsPage .applications-c-tabs button,
body[data-theme="dark"] #applicationsPage .application-inspector-head small,
body[data-theme="dark"] #applicationsPage .application-inspector-head p,
body[data-theme="dark"] #applicationsPage .application-coverage > div:last-child span,
body[data-theme="dark"] #applicationsPage .application-coverage-donut span,
body[data-theme="dark"] #applicationsPage .application-inspector-details dt,
body[data-theme="dark"] #applicationsPage .application-inspector-result,
body[data-theme="dark"] #applicationsPage .applications-empty-state {
  color: #9eb8c3;
}

body[data-theme="dark"] #applicationsPage .applications-c-tabs button.active {
  color: #75a4ff;
}

body[data-theme="dark"] #applicationsPage .application-assignment-tags span {
  color: #8ab0ff;
  background: rgba(77, 141, 255, 0.14);
}

body[data-theme="dark"] #applicationsPage .application-inspector-result {
  background: rgba(77, 141, 255, 0.08);
}

@media (max-width: 1280px) {
  #applicationsPage .applications-c-summary {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  #applicationsPage .applications-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  #applicationsPage .applications-c-actions {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }
}

@media (max-width: 980px) {
  #applicationsPage .applications-layout {
    grid-template-columns: 1fr;
  }

  #applicationsPage .applications-side-panel {
    position: static;
  }
}

@media (max-width: 700px) {
  #applicationsPage .applications-workspace {
    padding: 10px;
  }

  #applicationsPage .applications-c-heading {
    align-items: stretch;
  }

  #applicationsPage .applications-c-actions,
  #applicationsPage .applications-c-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #applicationsPage .applications-c-actions button {
    min-width: 0;
    white-space: normal;
  }

  #applicationsPage .applications-c-tabs {
    overflow-x: auto;
  }

  #applicationsPage .applications-c-tabs button {
    flex: 0 0 auto;
  }
}

@media (max-width: 440px) {
  #applicationsPage .applications-c-summary {
    grid-template-columns: 1fr;
  }
}

body[data-theme="light"] #dashboardPage :where(.devices-table tbody tr:hover, .dense-inventory tbody tr:hover) {
  background: #eff6ff;
}

body[data-theme="light"] #dashboardPage :where(.overview-panel, .dense-inventory, .inventory-card) {
  background: #ffffff !important;
  border-color: #d8e6ea !important;
  color: #102633 !important;
}

body[data-theme="light"] #dashboardPage :where(.overview-panel *, .dense-inventory *, .inventory-card *) {
  color: inherit;
}

body[data-theme="light"] #dashboardPage :where(.overview-panel h3, .overview-panel strong, .dense-inventory h3, .dense-inventory th, .dense-inventory td, .inventory-card h3, .inventory-card th, .inventory-card td) {
  color: #102633 !important;
}

body[data-theme="light"] #dashboardPage :where(.overview-panel span, .overview-panel small, .overview-panel li, .dense-inventory small, .inventory-card small, .inventory-footer) {
  color: #425a67 !important;
}

body[data-theme="light"] #dashboardPage :where(.dense-inventory table, .dense-inventory thead, .dense-inventory tbody, .dense-inventory tr, .devices-table table, .devices-table thead, .devices-table tbody, .devices-table tr) {
  background: transparent !important;
}

body[data-theme="light"] #dashboardPage :where(.dense-inventory th, .dense-inventory td, .devices-table th, .devices-table td) {
  border-color: #dce8ec !important;
}

body[data-theme="light"] #dashboardPage .dense-inventory tbody tr:nth-child(even) {
  background: #f8fbfc !important;
}

body[data-theme="light"] #dashboardPage .dense-inventory tbody tr:hover {
  background: #eff6ff !important;
}

body[data-theme="light"] #dashboardPage :where(.big-donut, .version-donut, .donut-chart) {
  box-shadow: 0 0 0 1px #d8e6ea, 0 6px 14px rgba(21, 47, 59, 0.1);
}

body[data-theme="light"] #dashboardPage .big-donut {
  background:
    radial-gradient(circle at center, #ffffff 0 46%, transparent 47%),
    conic-gradient(#13c7ba 0 78.7%, #2a9ce8 78.7% 93.1%, #e5535f 93.1% 100%);
}

body[data-theme="light"] #dashboardPage .version-donut {
  background:
    radial-gradient(circle at center, #ffffff 0 47%, transparent 48%),
    conic-gradient(#1da4ff 0 57.9%, #12c5b8 57.9% 83.5%, #f2b94f 83.5% 93.6%, #7367e8 93.6% 98.4%, #64747a 98.4% 100%);
}

body[data-theme="light"] #dashboardPage .trend-points circle {
  stroke: #ffffff;
}

body[data-theme="light"] #dashboardPage .line-chart .axis-labels text {
  fill: #536977 !important;
}

.network-push-panel {
  grid-column: 1 / -1;
}

.network-push-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  margin-top: 16px;
}

.network-discovery-bar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  margin-top: 16px;
}

.network-discovery-bar label {
  display: grid;
  gap: 6px;
}

.network-push-panel textarea {
  min-height: 132px;
  resize: vertical;
}

.network-push-options {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.network-push-options label {
  align-items: center;
  display: flex;
  gap: 10px;
}

.network-push-results {
  margin-top: 16px;
}

.network-discovery-results {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .network-discovery-bar,
  .network-push-grid {
    grid-template-columns: 1fr;
  }
}

/* Production light theme: readable, neutral, and consistent across every workspace. */
body[data-theme="light"] {
  background: #f3f6f8;
  color: #172b36;
}

body[data-theme="light"] :where(
  .dashboard-page,
  .dense-dashboard,
  .settings-page,
  .devices-page,
  .device-details-page,
  .users-page,
  .groups-page,
  .applications-page,
  .policies-page,
  .remote-access-page,
  .agent-management-page,
  .patch-management-page,
  .compliance-page,
  .alerts-page,
  .reports-page,
  .roles-page,
  .audit-page
) {
  background: #f3f6f8;
  color: #172b36;
}

body[data-theme="light"] :where(.devices-workspace, .device-details-workspace, .policies-workspace) {
  color: #172b36;
}

body[data-theme="light"] :where(
  .kpi-card,
  .panel,
  .device-summary-card,
  .summary-card,
  .dash-card,
  .settings-card,
  .devices-table-panel,
  .users-table-panel,
  .applications-table-panel,
  .agent-table-panel,
  .agent-side-panel,
  .agent-activity,
  .agent-command-history,
  .agent-evidence-panel,
  .patch-table-panel,
  .patch-side-panel,
  .patch-activity,
  .remote-device-card,
  .security-push-status
) {
  background: #ffffff;
  border-color: #cfdde3;
  color: #172b36;
  box-shadow: 0 3px 10px rgba(23, 43, 54, 0.06);
}

body[data-theme="light"] :where(
  .page-heading h2,
  .details-heading h2,
  .dashboard-header h2,
  .panel h3,
  .remote-list-head h3,
  .card-topline h3,
  .inventory-head h3
) {
  color: #102a38;
  font-weight: 750;
}

body[data-theme="light"] :where(
  .page-heading p,
  .details-heading p,
  .dashboard-header p,
  .remote-list-head p,
  .panel > p,
  .card-topline p
) {
  color: #4c6370;
  font-size: 0.82rem;
  line-height: 1.45;
}

body[data-theme="light"] .devices-nav a,
body[data-theme="light"] .drawer-nav a,
body[data-theme="light"] .app-nav a {
  min-height: 38px;
  color: #3f5866;
  font-size: 0.84rem;
  font-weight: 650;
}

body[data-theme="light"] :where(.devices-nav small, .drawer-nav small) {
  color: #526b78;
  font-size: 0.7rem;
  font-weight: 800;
}

body[data-theme="light"] :where(.devices-nav a::before, .drawer-nav a::before, .app-nav a::before) {
  color: #395666;
}

body[data-theme="light"] :where(
  .devices-nav a.active,
  .devices-nav a:hover,
  .drawer-nav a.active,
  .drawer-nav a:hover,
  .app-nav a.active,
  .app-nav a:hover
) {
  background: #e8f0ff;
  color: #1746a2;
}

body[data-theme="light"] :where(
  table,
  .devices-table,
  .details-table,
  .dense-inventory table
) {
  color: #253e4b;
  font-size: 0.8rem;
  line-height: 1.4;
}

body[data-theme="light"] :where(
  th,
  .devices-table th,
  .details-table th,
  .dense-inventory th
) {
  padding-top: 11px;
  padding-bottom: 11px;
  background: #f7fafb;
  color: #536d7a;
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-theme="light"] :where(
  td,
  .devices-table td,
  .details-table td,
  .dense-inventory td
) {
  padding-top: 11px;
  padding-bottom: 11px;
  border-color: #dbe5e9;
  color: #253e4b;
}

body[data-theme="light"] :where(.devices-table td small, .details-table td small, .dense-inventory td small) {
  color: #536d7a;
  font-size: 0.72rem;
  line-height: 1.4;
}

body[data-theme="light"] :where(.devices-table tbody tr:nth-child(even), .details-table tbody tr:nth-child(even)) {
  background: #fbfcfd;
}

body[data-theme="light"] :where(.devices-table tbody tr:hover, .details-table tbody tr:hover) {
  background: #f1f6ff;
}

body[data-theme="light"] :where(.devices-table tr.selected, .details-table tr.selected) {
  background: #eaf1ff;
}

body[data-theme="light"] :where(
  button,
  .button-link,
  .details-actions button,
  .details-actions .button-link,
  .remote-action-grid button,
  .remote-action-grid .remote-action-link,
  .device-toolbar button,
  .header-actions button,
  .quick-actions button,
  .sidebar-actions button
) {
  min-height: 36px;
  border-color: #bfcfd7;
  background: #ffffff;
  color: #1746a2;
  font-size: 0.78rem;
  font-weight: 750;
}

body[data-theme="light"] .remote-session-panel {
  border-color: #cbdde3;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(21, 47, 59, 0.08);
}

body[data-theme="light"] .remote-session-panel .mesh-status {
  border-bottom-color: #d8e5e8;
  background: transparent;
  box-shadow: none;
}

body[data-theme="light"] .remote-action-grid .remote-action-link {
  min-height: 36px;
  border: 1px solid #9eb9c5 !important;
  background: #ffffff !important;
  color: #1746a2 !important;
  box-shadow: 0 1px 2px rgba(21, 47, 59, 0.06);
  opacity: 1 !important;
}

body[data-theme="light"] .remote-action-grid .remote-action-link:hover {
  background: #eaf2ff !important;
  border-color: #2563eb !important;
  color: #123b91 !important;
}

body[data-theme="light"] .remote-session-panel .remote-security {
  margin-top: 14px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid #d8e5e8;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-theme="light"] .remote-session-panel .remote-security-list p {
  color: #425b68;
}

.remote-action-grid .remote-action-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.remote-action-grid .remote-session-end-action {
  grid-column: 1 / -1;
}

body[data-theme="light"] .remote-action-grid .remote-session-end-action {
  border-color: #e2a5aa;
  color: #9f2530;
}

body[data-theme="light"] :where(input, select, textarea) {
  min-height: 36px;
  border-color: #bfcfd7;
  background: #ffffff;
  color: #172b36;
  font-size: 0.8rem;
}

body[data-theme="light"] :where(.status, .badge, .pill, .tag, .chip, .app-pill) {
  min-height: 24px;
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-theme="light"] :where(.status.good, .status.ok, .status-pill.good, .status-pill.ok, .badge.good, .pill.good) {
  background: #dce9ff;
  color: #1746a2;
}

body[data-theme="light"] :where(.status.warn, .status.warning, .badge.warn, .pill.warn) {
  background: #fff0c2;
  color: #714800;
}

body[data-theme="light"] :where(.status.risk, .status.critical, .badge.risk, .pill.risk) {
  background: #ffe0e4;
  color: #982036;
}

body[data-theme="light"] :where(
  .device-summary-card span,
  .device-summary-card small,
  .kpi-card span,
  .kpi-card small,
  .remote-session-details dt,
  .detail-list dt,
  .agent-side-panel dt,
  .inventory-footer
) {
  color: #4c6572;
  font-size: 0.76rem;
  line-height: 1.4;
}

body[data-theme="light"] :where(
  .device-summary-card strong,
  .kpi-card strong,
  .remote-session-details dd,
  .detail-list dd,
  .agent-side-panel dd
) {
  color: #102a38;
}

body[data-theme="light"] .agent-refresh-strip {
  background: #ffffff;
  border-color: #cfdde3;
  box-shadow: none;
}

body[data-theme="light"] .agent-refresh-strip :where(label, select, button, small) {
  color: #294451;
  font-size: 0.76rem;
}

body[data-theme="light"] :where(.agent-row-action-status, .agent-result-text, .panel-action-status) {
  color: #405b68;
  font-size: 0.74rem;
  line-height: 1.45;
}

body[data-theme="light"] :where(a, .panel-action-link, .details-table a, .devices-table a) {
  color: #174eb6;
  font-weight: 650;
}

body[data-theme="light"] :where(a:hover, .panel-action-link:hover, .details-table a:hover, .devices-table a:hover) {
  color: #0f347c;
}

body[data-theme="light"] :focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.32);
  outline-offset: 2px;
}

/* Direct selectors intentionally outrank the original dark badge declarations. */
body[data-theme="light"] .status.good,
body[data-theme="light"] .status.ok,
body[data-theme="light"] .status-pill.good,
body[data-theme="light"] .status-pill.ok,
body[data-theme="light"] .badge.good,
body[data-theme="light"] .pill.good {
  background: #dce9ff;
  color: #1746a2;
}

body[data-theme="light"] .status.warn,
body[data-theme="light"] .status.warning,
body[data-theme="light"] .badge.warn,
body[data-theme="light"] .pill.warn {
  background: #fff0c2;
  color: #714800;
}

body[data-theme="light"] .status.risk,
body[data-theme="light"] .status.critical,
body[data-theme="light"] .badge.risk,
body[data-theme="light"] .pill.risk {
  background: #ffe0e4;
  color: #982036;
}

body[data-theme="light"] #agentManagementPage .agent-table-panel .devices-table td:nth-child(6) .status.good {
  background: #d9eef3;
  color: #0f4c5c;
}

body[data-theme="light"] #agentManagementPage .agent-table-panel .devices-table td:nth-child(8) .status.good {
  background: #dcfce7;
  color: #166534;
}

body[data-theme="light"] #agentManagementPage .agent-table-panel .devices-table td:nth-child(8) .status.risk {
  background: #fee2e2;
  color: #991b1b;
}

body[data-theme="light"] #agentManagementPage .agent-table-panel .devices-table td:nth-child(8) small {
  color: #4c6572;
  font-weight: 650;
}

/* Agent toolbar: one rhythm for refresh controls and command actions. */
#agentManagementPage .details-heading {
  align-items: center;
}

#agentManagementPage .details-actions {
  align-items: stretch;
  gap: 8px;
}

#agentManagementPage .agent-refresh-strip,
#agentManagementPage .agent-toolbar-action {
  height: 52px;
  min-height: 52px;
  box-sizing: border-box;
}

#agentManagementPage .agent-refresh-strip {
  flex-wrap: nowrap;
  padding: 8px;
}

#agentManagementPage .agent-refresh-strip :where(select, button) {
  height: 34px;
  min-height: 34px;
}

#agentManagementPage .agent-refresh-strip small {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  white-space: nowrap;
}

#agentManagementPage .agent-toolbar-action {
  flex: 0 0 148px;
  justify-content: center;
  margin: 0;
  padding: 0 14px;
  text-align: center;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    transform 140ms ease-out,
    background-color 140ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out;
}

#agentManagementPage .agent-toolbar-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(2, 12, 20, 0.16);
}

#agentManagementPage .agent-toolbar-action:active {
  transform: scale(0.98);
  box-shadow: none;
}

#agentManagementPage .agent-toolbar-action:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.38);
  outline-offset: 2px;
}

@media (max-width: 1800px) {
  #agentManagementPage .details-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #agentManagementPage .details-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 900px) {
  #agentManagementPage .agent-refresh-strip {
    flex: 1 0 100%;
    justify-content: flex-start;
  }

  #agentManagementPage .agent-toolbar-action {
    flex: 1 1 148px;
  }
}

@media (max-width: 600px) {
  #agentManagementPage .details-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #agentManagementPage .agent-refresh-strip {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    min-height: 52px;
  }

  #agentManagementPage .agent-refresh-strip :where(label, select, button, small) {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
  }

  #agentManagementPage .agent-refresh-strip input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    min-height: 16px;
  }

  #agentManagementPage .agent-refresh-strip small {
    overflow: hidden;
  }

  #agentManagementPage .agent-refresh-strip small .status {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #agentManagementPage .agent-toolbar-action {
    width: 100%;
    white-space: normal;
    line-height: 1.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dense-dashboard,
  .devices-brand > .icon-button::before,
  .devices-nav a,
  .drawer-nav a,
  .devices-nav a::after,
  .drawer-nav a::after,
  .nav-label,
  .devices-brand > strong,
  .devices-brand > svg,
  .sidebar-user-panel .admin-chip > div,
  .devices-nav small,
  .drawer-nav small,
  #agentManagementPage .agent-toolbar-action {
    transition: none !important;
  }

  #agentManagementPage .agent-toolbar-action:hover,
  #agentManagementPage .agent-toolbar-action:active {
    transform: none;
  }
}

#dashboardPage .ops-dashboard-host {
  padding: 14px;
}

#dashboardPage .ops-topbar {
  margin-bottom: 0;
}

#dashboardPage .ops-dashboard {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  color: #102633;
}

#dashboardPage .ops-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

#dashboardPage .ops-dashboard-head h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
}

#dashboardPage .ops-dashboard-head p,
#dashboardPage .ops-dashboard-stamp span {
  margin: 6px 0 0;
  color: #5b7180;
  font-size: 0.92rem;
}

#dashboardPage .ops-dashboard-stamp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

#dashboardPage .ops-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.72fr);
  gap: 18px;
  align-items: start;
}

#dashboardPage .ops-operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.72fr);
  gap: 18px;
  align-items: start;
}

#dashboardPage .ops-main-stack,
#dashboardPage .ops-side-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

#dashboardPage .ops-hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
}

#dashboardPage .ops-windows-card {
  order: 1;
}

#dashboardPage .ops-score-card {
  order: 2;
}

#dashboardPage .ops-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

#dashboardPage .ops-card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dbe7ec;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  padding: 20px;
  animation: opsFadeUp 0.42s ease both;
  animation-delay: var(--ops-delay, 0s);
}

#dashboardPage .ops-dashboard-loading {
  min-height: calc(100vh - 92px);
  display: grid;
  place-items: center;
}

#dashboardPage .ops-loading-block {
  position: relative;
  min-height: 120px;
  overflow: hidden;
  background: #f5f9fc;
}

#dashboardPage .ops-loading-block.tall {
  min-height: 250px;
}

#dashboardPage .ops-loading-block.metric {
  min-height: 170px;
}

#dashboardPage .ops-loading-block.table {
  min-height: 310px;
}

#dashboardPage .ops-loading-block.side {
  min-height: 300px;
}

#dashboardPage .ops-loading-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: opsLoadingSweep 1.25s ease-in-out infinite;
}

body[data-theme="dark"] #dashboardPage .ops-loading-block {
  background: rgba(15, 42, 54, 0.78);
}

body[data-theme="dark"] #dashboardPage .ops-loading-block::after {
  background: linear-gradient(90deg, transparent, rgba(84, 132, 151, 0.18), transparent);
}

#dashboardPage .ops-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

#dashboardPage .ops-card-head.compact {
  margin-bottom: 10px;
}

#dashboardPage .ops-card-head h3,
#dashboardPage .ops-card-title-meta h3 {
  margin: 0;
  font-size: 1.08rem;
}

#dashboardPage .ops-software-card {
  min-height: 100%;
}

#dashboardPage .ops-software-card .ops-card-head p {
  margin: 4px 0 0;
  color: #617785;
  font-size: 0.82rem;
}

#dashboardPage .ops-software-summary {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 4px 0;
}

#dashboardPage .ops-software-donut {
  --restricted-share: 0;
  width: 106px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#2563eb 0 74%, #16b8aa 74% 94%, #e4edf2 94% 100%);
}

#dashboardPage .ops-software-donut.has-restrictions {
  background: conic-gradient(
    #dc2626 0 calc(var(--restricted-share) * 1%),
    #2563eb calc(var(--restricted-share) * 1%) 100%
  );
}

#dashboardPage .ops-software-donut > div {
  width: 72px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: #ffffff;
}

#dashboardPage .ops-software-donut strong {
  font-size: 1.8rem;
  line-height: 1;
}

#dashboardPage .ops-software-donut span {
  margin-top: 4px;
  color: #617785;
  font-size: 0.72rem;
}

#dashboardPage .ops-top-software-list {
  display: grid;
  min-width: 0;
  gap: 2px;
}

#dashboardPage .ops-top-software-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 44px;
  padding: 5px 0;
  border-bottom: 1px solid #e7eef2;
}

#dashboardPage .ops-top-software-item .ops-software-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 0.62rem;
}

#dashboardPage .ops-top-software-item > div:nth-child(2) {
  min-width: 0;
}

#dashboardPage .ops-top-software-item strong,
#dashboardPage .ops-top-software-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardPage .ops-top-software-item strong {
  color: #1f3440;
  font-size: 0.78rem;
}

#dashboardPage .ops-top-software-item small {
  margin-top: 3px;
  color: #617785;
  font-size: 0.69rem;
}

#dashboardPage .ops-top-software-restricted {
  padding: 4px 6px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.62rem;
  font-weight: 800;
}

#dashboardPage .ops-application-attention {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #dce8ee;
}

#dashboardPage .ops-attention-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#dashboardPage .ops-attention-head h4 {
  margin: 0;
  color: #1f3440;
  font-size: 0.88rem;
}

#dashboardPage .ops-attention-head p {
  margin: 3px 0 0;
  color: #617785;
  font-size: 0.69rem;
}

#dashboardPage .ops-attention-total {
  min-width: 26px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

#dashboardPage .ops-attention-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}

#dashboardPage .ops-attention-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 14px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid #e7eef2;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#dashboardPage .ops-attention-item:hover,
#dashboardPage .ops-attention-item:focus-visible {
  background: #f6faff;
  outline: none;
}

#dashboardPage .ops-attention-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e9f8f3;
  color: #0f9f78;
}

#dashboardPage .ops-attention-icon svg,
#dashboardPage .ops-attention-chevron svg {
  width: 15px;
  height: 15px;
}

#dashboardPage .ops-attention-item.warn .ops-attention-icon {
  background: #fff6dc;
  color: #b77900;
}

#dashboardPage .ops-attention-item.risk .ops-attention-icon {
  background: #feecef;
  color: #cf3651;
}

#dashboardPage .ops-attention-copy {
  min-width: 0;
}

#dashboardPage .ops-attention-copy strong,
#dashboardPage .ops-attention-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardPage .ops-attention-copy strong {
  color: #263b47;
  font-size: 0.72rem;
}

#dashboardPage .ops-attention-copy small {
  margin-top: 2px;
  color: #6b7f8b;
  font-size: 0.62rem;
}

#dashboardPage .ops-attention-item > b {
  color: #1f3440;
  font-size: 0.86rem;
}

#dashboardPage .ops-attention-chevron {
  display: grid;
  color: #8ba0ac;
}

#dashboardPage .ops-attention-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  color: #617785;
  font-size: 0.68rem;
}

#dashboardPage .ops-attention-foot strong {
  color: #344b57;
}

#dashboardPage .ops-software-list {
  display: grid;
  max-height: 472px;
  overflow-y: auto;
  margin-top: 8px;
}

#dashboardPage .ops-software-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #edf3f6;
}

#dashboardPage .ops-software-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
}

#dashboardPage .ops-software-copy {
  min-width: 0;
}

#dashboardPage .ops-software-copy > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#dashboardPage .ops-software-copy strong {
  overflow: hidden;
  color: #213542;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardPage .ops-software-copy span,
#dashboardPage .ops-software-copy small,
#dashboardPage .ops-usage-percent {
  color: #617785;
  font-size: 0.76rem;
  white-space: nowrap;
}

#dashboardPage .ops-software-copy small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardPage .ops-software-progress {
  height: 4px;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 999px;
  background: #e7eef2;
}

#dashboardPage .ops-software-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}

#dashboardPage .ops-restricted-badge {
  max-width: 94px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

#dashboardPage .ops-card-title-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#dashboardPage .ops-card-title-meta span {
  color: #5b7180;
  font-size: 0.88rem;
}

#dashboardPage .ops-inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: #2563eb;
  font-weight: 700;
  cursor: pointer;
}

#dashboardPage .ops-inline-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

#dashboardPage .ops-score-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(220px, 0.92fr);
  gap: 18px;
  align-items: center;
}

#dashboardPage .ops-score-donut {
  --score-color: #16a34a;
  display: grid;
  place-items: center;
}

#dashboardPage .ops-score-ring {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #ffffff 0 58%, transparent 59%),
    conic-gradient(var(--score-color) 0 calc(var(--score) * 1%), #e4edf1 calc(var(--score) * 1%) 100%);
  box-shadow: inset 0 0 0 1px #deeaee;
}

#dashboardPage .ops-score-value {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  line-height: 1;
  transform: translateY(2px);
}

#dashboardPage .ops-score-ring strong {
  display: block;
  font-size: 3rem;
  line-height: 1;
}

#dashboardPage .ops-score-ring span {
  display: block;
  margin-top: 0;
  text-align: center;
  color: #6a818f;
  font-size: 0.9rem;
}

#dashboardPage .ops-score-copy strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: #16a34a;
}

#dashboardPage .ops-score-copy p {
  margin: 10px 0 12px;
  color: #607785;
  line-height: 1.55;
}

#dashboardPage .ops-health-breakdown {
  display: grid;
  gap: 10px;
}

#dashboardPage .ops-health-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e3edf1;
  border-radius: 12px;
  background: #fbfdff;
}

#dashboardPage .ops-health-item span,
#dashboardPage .ops-health-item small {
  color: #647b88;
  font-size: 0.84rem;
}

#dashboardPage .ops-health-item strong {
  font-size: 0.95rem;
}

#dashboardPage .ops-health-item.good strong { color: #16a34a; }
#dashboardPage .ops-health-item.warn strong { color: #d97706; }
#dashboardPage .ops-health-item.risk strong { color: #dc2626; }
#dashboardPage .ops-health-item.muted strong { color: #64748b; }

#dashboardPage .ops-windows-card .ops-card-head p {
  margin: 4px 0 0;
  color: #647b88;
  font-size: 0.82rem;
}

#dashboardPage .ops-windows-layout {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

#dashboardPage .ops-windows-donut {
  width: 148px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    #2563eb 0 var(--windows-11),
    #14b8a6 var(--windows-11) var(--windows-10),
    #94a3b8 var(--windows-10) 100%
  );
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.14);
}

#dashboardPage .ops-windows-ring {
  width: 104px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

#dashboardPage .ops-windows-ring strong {
  font-size: 2.1rem;
  line-height: 1;
}

#dashboardPage .ops-windows-ring span {
  margin-top: 5px;
  color: #647b88;
  font-size: 0.78rem;
}

#dashboardPage .ops-windows-summary {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#dashboardPage .ops-windows-legend,
#dashboardPage .ops-version-list {
  display: grid;
  gap: 7px;
}

#dashboardPage .ops-windows-legend > div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 40px;
  gap: 8px;
  align-items: center;
  color: #405b6b;
  font-size: 0.82rem;
}

#dashboardPage .ops-windows-legend small {
  color: #728896;
  text-align: right;
}

#dashboardPage .ops-version-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

#dashboardPage .ops-version-dot.windows-11 { background: #2563eb; }
#dashboardPage .ops-version-dot.windows-10 { background: #14b8a6; }
#dashboardPage .ops-version-dot.other { background: #94a3b8; }

#dashboardPage .ops-version-list {
  padding-top: 10px;
  border-top: 1px solid #e3edf1;
}

#dashboardPage .ops-version-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  color: #5b7280;
  font-size: 0.75rem;
}

#dashboardPage .ops-version-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardPage .ops-version-list strong {
  color: #173142;
}

#dashboardPage .ops-version-list p {
  margin: 0;
  color: #647b88;
  font-size: 0.8rem;
}

#dashboardPage .ops-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#dashboardPage .ops-action-tile {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid #dce8ed;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f7fbfd);
  color: #173142;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#dashboardPage .ops-action-tile:hover {
  transform: translateY(-2px);
  border-color: #bad2dd;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
}

#dashboardPage .ops-action-tile strong {
  font-size: 1rem;
}

#dashboardPage .ops-action-tile span {
  color: #647b88;
  font-size: 0.84rem;
}

#dashboardPage .ops-metric-card {
  padding: 18px 16px;
}

#dashboardPage .ops-metric-heading {
  display: flex;
  gap: 10px;
  align-items: center;
}

#dashboardPage .ops-metric-icon {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 9px;
  background: #edf4ff;
  color: #2563eb;
}

#dashboardPage .ops-metric-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep the shared sidebar toggle identical across every routed page. */
.devices-brand > .icon-button[data-sidebar-toggle="true"],
#closeMenuButton[data-sidebar-toggle="true"] {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  overflow: hidden;
  line-height: 1;
}

.devices-brand > .icon-button[data-sidebar-toggle="true"]::before,
.devices-brand > .icon-button[data-sidebar-toggle="true"]::after,
#closeMenuButton[data-sidebar-toggle="true"]::before,
#closeMenuButton[data-sidebar-toggle="true"]::after {
  content: none !important;
  display: none !important;
}

.devices-brand > .icon-button[data-sidebar-toggle="true"] > .sidebar-menu-icon,
#closeMenuButton[data-sidebar-toggle="true"] > .sidebar-menu-icon {
  display: block;
  flex: none;
  width: 18px !important;
  height: 18px !important;
  margin: 0;
  overflow: hidden;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none !important;
}

#dashboardPage .ops-metric-card:nth-child(2) .ops-metric-icon {
  background: #e9f9f0;
  color: #16a34a;
}

#dashboardPage .ops-metric-card:nth-child(3) .ops-metric-icon {
  background: #fff6df;
  color: #d97706;
}

#dashboardPage .ops-metric-card:nth-child(4) .ops-metric-icon {
  background: #e8f8f5;
  color: #0f9488;
}

#dashboardPage .ops-metric-card:nth-child(5) .ops-metric-icon {
  background: #eef2ff;
  color: #4f46e5;
}

#dashboardPage .ops-metric-value {
  display: block;
  margin-bottom: 4px;
  font-size: 2rem;
  line-height: 1;
}

#dashboardPage .ops-metric-card p {
  margin: 0 0 10px;
  color: #617785;
  font-size: 0.88rem;
}

#dashboardPage .ops-sparkline {
  width: 100%;
  height: 56px;
  display: block;
}

#dashboardPage .ops-sparkline-baseline {
  stroke: #e6eef2;
  stroke-width: 1.25;
}

#dashboardPage .ops-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}

#dashboardPage .ops-trend.up { color: #16a34a; }
#dashboardPage .ops-trend.down { color: #dc2626; }

#dashboardPage .ops-table-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#dashboardPage .ops-mini-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  padding: 0 12px;
  border: 1px solid #d7e4ea;
  border-radius: 12px;
  background: #ffffff;
}

#dashboardPage .ops-mini-search span {
  color: #6f8693;
}

#dashboardPage .ops-mini-search input {
  width: 100%;
  height: 40px;
  border: 0;
  background: transparent;
  color: #173142;
}

#dashboardPage .ops-filter-button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #d7e4ea;
  border-radius: 12px;
  background: #ffffff;
  color: #35516a;
  font-weight: 700;
}

#dashboardPage .ops-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

#dashboardPage .ops-devices-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}

#dashboardPage .ops-devices-table thead th {
  padding: 12px 10px;
  border-bottom: 1px solid #e2ebef;
  color: #6a818f;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fbfdff;
}

#dashboardPage .ops-devices-table tbody td {
  padding: 13px 10px;
  border-bottom: 1px solid #edf3f6;
  color: #263b47;
  font-size: 0.9rem;
  vertical-align: middle;
}

#dashboardPage .ops-devices-table tbody tr:hover {
  background: #f6faff;
}

#dashboardPage .ops-devices-table td small {
  display: block;
  margin-top: 4px;
  color: #708794;
  font-size: 0.78rem;
}

#dashboardPage .ops-row-open {
  min-width: 64px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cfe0e7;
  border-radius: 10px;
  background: #ffffff;
  color: #2563eb;
  font-weight: 700;
}

#dashboardPage .ops-mini-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

#dashboardPage .ops-mini-badge.good { color: #15803d; background: #dcfce7; }
#dashboardPage .ops-mini-badge.warn { color: #b45309; background: #fef3c7; }
#dashboardPage .ops-mini-badge.risk { color: #c2410c; background: #fee2e2; }
#dashboardPage .ops-mini-badge.muted { color: #475569; background: #e2e8f0; }

#dashboardPage .ops-remote-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

#dashboardPage .ops-remote-dot.good { background: #16a34a; }
#dashboardPage .ops-remote-dot.muted { background: #94a3b8; }

#dashboardPage .ops-empty-state {
  text-align: center;
  color: #6c8390;
  padding: 28px 16px;
}

#dashboardPage .ops-side-list {
  display: grid;
  gap: 12px;
}

#dashboardPage .ops-side-item,
#dashboardPage .ops-action-item {
  display: grid;
  gap: 12px;
  align-items: center;
}

#dashboardPage .ops-side-item {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

#dashboardPage .ops-side-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f5f9fb;
  color: #526a79;
  font-size: 1rem;
}

#dashboardPage .ops-side-copy strong,
#dashboardPage .ops-action-copy strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.96rem;
}

#dashboardPage .ops-side-copy span,
#dashboardPage .ops-side-copy small,
#dashboardPage .ops-action-copy span,
#dashboardPage .ops-action-item small,
#dashboardPage .ops-side-meta span {
  color: #667d8a;
  font-size: 0.81rem;
}

#dashboardPage .ops-side-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
}

#dashboardPage .ops-side-meta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
}

#dashboardPage .ops-side-empty {
  padding: 14px 0;
}

#dashboardPage .ops-side-empty strong {
  display: block;
  margin-bottom: 5px;
}

#dashboardPage .ops-action-item {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

#dashboardPage .ops-action-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
}

#dashboardPage .ops-action-mark.good { background: #dcfce7; color: #15803d; }
#dashboardPage .ops-action-mark.info { background: #dbeafe; color: #1d4ed8; }
#dashboardPage .ops-action-mark.risk { background: #fee2e2; color: #dc2626; }

body[data-theme="dark"] #dashboardPage .ops-dashboard {
  color: #eef7ff;
}

body[data-theme="dark"] #dashboardPage .ops-dashboard-head p,
body[data-theme="dark"] #dashboardPage .ops-dashboard-stamp span,
body[data-theme="dark"] #dashboardPage .ops-card-title-meta span,
body[data-theme="dark"] #dashboardPage .ops-score-copy p,
body[data-theme="dark"] #dashboardPage .ops-health-item span,
body[data-theme="dark"] #dashboardPage .ops-health-item small,
body[data-theme="dark"] #dashboardPage .ops-action-tile span,
body[data-theme="dark"] #dashboardPage .ops-metric-card p,
body[data-theme="dark"] #dashboardPage .ops-side-copy span,
body[data-theme="dark"] #dashboardPage .ops-side-copy small,
body[data-theme="dark"] #dashboardPage .ops-action-copy span,
body[data-theme="dark"] #dashboardPage .ops-action-item small,
body[data-theme="dark"] #dashboardPage .ops-side-meta span,
body[data-theme="dark"] #dashboardPage .ops-software-card .ops-card-head p,
body[data-theme="dark"] #dashboardPage .ops-software-summary > div:last-child > span,
body[data-theme="dark"] #dashboardPage .ops-software-donut span,
body[data-theme="dark"] #dashboardPage .ops-software-copy span,
body[data-theme="dark"] #dashboardPage .ops-software-copy small,
body[data-theme="dark"] #dashboardPage .ops-usage-percent,
body[data-theme="dark"] #dashboardPage .ops-devices-table td small {
  color: rgba(218, 235, 243, 0.74);
}

body[data-theme="dark"] #dashboardPage .ops-card,
body[data-theme="dark"] #dashboardPage .ops-health-item,
body[data-theme="dark"] #dashboardPage .ops-action-tile,
body[data-theme="dark"] #dashboardPage .ops-mini-search,
body[data-theme="dark"] #dashboardPage .ops-filter-button,
body[data-theme="dark"] #dashboardPage .ops-row-open {
  background: rgba(8, 28, 36, 0.88);
  border-color: rgba(99, 170, 255, 0.16);
  color: #eef7ff;
}

body[data-theme="dark"] #dashboardPage .ops-devices-table thead th {
  background: rgba(13, 37, 49, 0.96);
  color: #95afc0;
  border-bottom-color: rgba(99, 170, 255, 0.14);
}

body[data-theme="dark"] #dashboardPage .ops-devices-table tbody td {
  color: #eef7ff;
  border-bottom-color: rgba(99, 170, 255, 0.1);
}

body[data-theme="dark"] #dashboardPage .ops-devices-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.1);
}

body[data-theme="dark"] #dashboardPage .ops-score-ring {
  background:
    radial-gradient(circle at center, rgba(8, 28, 36, 0.94) 0 58%, transparent 59%),
    conic-gradient(var(--score-color) 0 calc(var(--score) * 1%), rgba(148, 163, 184, 0.18) calc(var(--score) * 1%) 100%);
  box-shadow: inset 0 0 0 1px rgba(99, 170, 255, 0.14);
}

body[data-theme="dark"] #dashboardPage .ops-score-copy strong {
  color: #4ade80;
}

body[data-theme="dark"] #dashboardPage .ops-windows-ring {
  background: #0b222c;
  box-shadow: inset 0 0 0 1px rgba(99, 170, 255, 0.16);
}

body[data-theme="dark"] #dashboardPage .ops-windows-legend > div,
body[data-theme="dark"] #dashboardPage .ops-version-list > div,
body[data-theme="dark"] #dashboardPage .ops-version-list strong {
  color: #d9e9f2;
}

body[data-theme="dark"] #dashboardPage .ops-version-list {
  border-top-color: rgba(99, 170, 255, 0.14);
}

body[data-theme="dark"] #dashboardPage .ops-metric-icon {
  background: rgba(37, 99, 235, 0.18);
}

body[data-theme="dark"] #dashboardPage .ops-mini-search input {
  color: #eef7ff;
}

body[data-theme="dark"] #dashboardPage .ops-sparkline-baseline {
  stroke: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] #dashboardPage .ops-software-summary,
body[data-theme="dark"] #dashboardPage .ops-software-item,
body[data-theme="dark"] #dashboardPage .ops-top-software-item {
  border-color: rgba(99, 170, 255, 0.12);
}

body[data-theme="dark"] #dashboardPage .ops-software-donut > div {
  background: #0b222c;
}

body[data-theme="dark"] #dashboardPage .ops-software-copy strong {
  color: #eef7ff;
}

body[data-theme="dark"] #dashboardPage .ops-top-software-item strong {
  color: #eef7ff;
}

body[data-theme="dark"] #dashboardPage .ops-top-software-restricted {
  background: rgba(220, 38, 38, 0.18);
  color: #fda4af;
}

body[data-theme="dark"] #dashboardPage .ops-application-attention,
body[data-theme="dark"] #dashboardPage .ops-attention-item {
  border-color: rgba(99, 170, 255, 0.12);
}

body[data-theme="dark"] #dashboardPage .ops-attention-head h4,
body[data-theme="dark"] #dashboardPage .ops-attention-copy strong,
body[data-theme="dark"] #dashboardPage .ops-attention-item > b,
body[data-theme="dark"] #dashboardPage .ops-attention-foot strong {
  color: #eef7ff;
}

body[data-theme="dark"] #dashboardPage .ops-attention-item:hover,
body[data-theme="dark"] #dashboardPage .ops-attention-item:focus-visible {
  background: rgba(37, 99, 235, 0.08);
}

body[data-theme="dark"] #dashboardPage .ops-attention-total {
  background: rgba(37, 99, 235, 0.18);
  color: #8bb7ff;
}

body[data-theme="dark"] #dashboardPage .ops-software-icon {
  background: rgba(37, 99, 235, 0.18);
  color: #8bb7ff;
}

body[data-theme="dark"] #dashboardPage .ops-software-progress {
  background: rgba(148, 163, 184, 0.18);
}

body[data-theme="dark"] #dashboardPage .ops-restricted-badge {
  background: rgba(220, 38, 38, 0.18);
  color: #fda4af;
}

@media (max-width: 1380px) {
  #dashboardPage .ops-dashboard-grid,
  #dashboardPage .ops-operations-grid {
    grid-template-columns: 1fr;
  }

  #dashboardPage .ops-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  #dashboardPage .ops-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboardPage .ops-score-layout,
  #dashboardPage .ops-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  #dashboardPage .ops-attention-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #dashboardPage .ops-dashboard-host {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    padding: 10px;
    overflow-x: hidden;
  }

  #dashboardPage .ops-dashboard-head,
  #dashboardPage .ops-card-head {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  #dashboardPage .ops-side-stack,
  #dashboardPage .ops-metric-grid,
  #dashboardPage .ops-action-grid {
    grid-template-columns: 1fr;
  }

  #dashboardPage .ops-software-item {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  #dashboardPage .ops-software-item > :last-child {
    grid-column: 2;
    justify-self: start;
  }

  #dashboardPage .ops-windows-layout {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  #dashboardPage .ops-windows-donut {
    width: 112px;
  }

  #dashboardPage .ops-windows-ring {
    width: 78px;
  }

  #dashboardPage .ops-table-tools {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  #dashboardPage .ops-side-item,
  #dashboardPage .ops-action-item,
  #dashboardPage .ops-score-layout {
    grid-template-columns: 1fr;
  }

  #dashboardPage .ops-score-copy,
  #dashboardPage .ops-health-breakdown,
  #dashboardPage .ops-table-card {
    min-width: 0;
    max-width: 100%;
  }

  #dashboardPage .ops-dashboard-head h1 {
    font-size: 1.65rem;
    overflow-wrap: anywhere;
  }

  #dashboardPage .ops-card {
    padding: 16px;
  }
}

@keyframes opsFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes opsLoadingSweep {
  to {
    transform: translateX(100%);
  }
}

/* Security & Compliance: live control matrix */
#compliancePage .security-matrix-workspace {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  color: #142532;
  background: #edf3f6;
}

#compliancePage .security-matrix-heading,
#compliancePage .security-findings-head,
#compliancePage .security-matrix-actions,
#compliancePage .security-matrix-toolbar,
#compliancePage .security-matrix-footer,
#compliancePage .security-matrix-legend {
  display: flex;
  align-items: center;
}

#compliancePage .security-matrix-heading,
#compliancePage .security-findings-head,
#compliancePage .security-matrix-footer {
  justify-content: space-between;
  gap: 18px;
}

#compliancePage .security-matrix-heading h2 {
  margin: 2px 0 4px;
  font-size: 1.55rem;
  letter-spacing: 0;
}

#compliancePage .security-matrix-heading p,
#compliancePage .security-findings-head p,
#compliancePage .security-matrix-footer p {
  margin: 0;
  color: #607585;
}

#compliancePage .security-matrix-eyebrow {
  color: #2563eb !important;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

#compliancePage .security-matrix-actions {
  justify-content: flex-end;
  gap: 8px;
}

#compliancePage .security-matrix-actions > span {
  margin-right: 4px;
  color: #607585;
  font-size: 0.78rem;
  white-space: nowrap;
}

#compliancePage .security-matrix-actions button,
#compliancePage .security-matrix-toolbar button,
#compliancePage .security-matrix-toolbar select,
#compliancePage .security-findings-head button {
  min-height: 36px;
  border: 1px solid #c9d7e0;
  border-radius: 6px;
  background: #fff;
  color: #174fca;
  font: inherit;
  font-weight: 700;
}

#compliancePage .security-matrix-actions button,
#compliancePage .security-matrix-toolbar button,
#compliancePage .security-findings-head button {
  padding: 0 14px;
  cursor: pointer;
}

#compliancePage .security-matrix-actions .primary-action {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

#compliancePage .security-matrix-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#compliancePage .security-matrix-summary article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #d3dfe6;
  border-radius: 7px;
  background: #fff;
}

#compliancePage .security-matrix-summary span {
  color: #607585;
  font-size: 0.75rem;
  font-weight: 700;
}

#compliancePage .security-matrix-summary strong {
  color: #102331;
  font-size: 1.65rem;
}

#compliancePage .security-matrix-summary small {
  color: #708493;
}

#compliancePage .security-matrix-panel,
#compliancePage .security-findings-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d3dfe6;
  border-radius: 7px;
  background: #fff;
}

#compliancePage .security-matrix-toolbar {
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #d7e2e8;
}

#compliancePage .security-matrix-toolbar .device-search {
  width: min(330px, 32vw);
  min-width: 220px;
  background: #fff;
}

#compliancePage .security-matrix-toolbar select {
  padding: 0 30px 0 10px;
}

#compliancePage .security-failed-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #c9d7e0;
  border-radius: 6px;
  color: #314a5a;
  font-weight: 700;
  white-space: nowrap;
}

#compliancePage .security-failed-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}

#compliancePage #securityMatrixVisibleCount {
  color: #607585;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

#compliancePage .security-matrix-scroll {
  min-width: 0;
  overflow: auto;
}

#compliancePage .security-control-matrix,
#compliancePage .security-findings-table {
  width: 100%;
  border-collapse: collapse;
  color: #203746;
  font-size: 0.76rem;
  table-layout: fixed;
}

#compliancePage .security-control-matrix {
  min-width: 1380px;
}

#compliancePage .security-findings-table {
  min-width: 860px;
}

#compliancePage .security-threat-table {
  min-width: 1260px;
}

#compliancePage .security-control-matrix th,
#compliancePage .security-findings-table th {
  height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid #d6e1e7;
  background: #f5f8fa;
  color: #5d7484;
  font-size: 0.68rem;
  text-align: left;
  text-transform: uppercase;
}

#compliancePage .security-control-matrix th:nth-child(1) { width: 140px; }
#compliancePage .security-control-matrix th:nth-child(2) { width: 210px; }
#compliancePage .security-control-matrix th:nth-child(9) { width: 160px; }
#compliancePage .security-control-matrix th:nth-child(10) { width: 120px; }

#compliancePage .security-control-matrix td,
#compliancePage .security-findings-table td {
  height: 64px;
  padding: 9px 10px;
  border-bottom: 1px solid #e0e8ed;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

#compliancePage .security-control-matrix tr {
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

#compliancePage .security-control-matrix tbody tr:hover {
  background: #f7faff;
}

#compliancePage .security-control-matrix tbody tr.selected {
  background: #edf4ff;
  box-shadow: inset 3px 0 #2563eb;
}

#compliancePage .security-control-matrix td > small,
#compliancePage .matrix-control small {
  display: block;
  margin-top: 4px;
  color: #748794;
  font-size: 0.66rem;
  line-height: 1.25;
}

#compliancePage .matrix-device-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #174fca;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

#compliancePage .matrix-control {
  min-width: 0;
}

#compliancePage .matrix-control-state,
#compliancePage .matrix-finding-status,
#compliancePage .security-matrix-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

#compliancePage .matrix-control.pass .matrix-control-state { color: #087f4d; }
#compliancePage .matrix-control.attention .matrix-control-state { color: #a35d00; }
#compliancePage .matrix-control.fail .matrix-control-state { color: #c22f3f; }
#compliancePage .matrix-control.unknown .matrix-control-state { color: #6c7d89; }

#compliancePage .matrix-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #84949e;
}

#compliancePage .matrix-dot.pass { background: #17a768; }
#compliancePage .matrix-dot.attention { background: #e59a20; }
#compliancePage .matrix-dot.fail { background: #e04b5a; }
#compliancePage .matrix-dot.unknown { background: #8b9ba5; }

#compliancePage .security-findings-head {
  padding: 14px 16px;
  border-bottom: 1px solid #d7e2e8;
}

#compliancePage .security-findings-head h3 {
  margin: 2px 0 3px;
  color: #102331;
}

#compliancePage .security-threat-source {
  max-width: min(48vw, 720px);
  padding: 7px 10px;
  border: 1px solid #c9d7e0;
  border-radius: 6px;
  color: #425d6d;
  font-size: 0.72rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#compliancePage .security-threat-path {
  max-width: 320px;
  color: #405c6d;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.68rem;
}

#compliancePage .security-findings-table td {
  height: 54px;
}

#compliancePage .security-matrix-empty {
  padding: 28px !important;
  color: #6e808c;
  text-align: center !important;
}

#compliancePage .security-matrix-footer {
  padding: 0 4px;
}

#compliancePage .security-matrix-legend {
  gap: 16px;
  color: #526978;
  font-size: 0.72rem;
}

body[data-theme="dark"] #compliancePage .security-matrix-workspace {
  color: #e7f2f7;
  background: #071a22;
}

body[data-theme="dark"] #compliancePage :where(.security-matrix-summary article, .security-matrix-panel, .security-findings-panel) {
  border-color: #244450;
  background: #09232d;
}

body[data-theme="dark"] #compliancePage :where(.security-matrix-heading h2, .security-matrix-summary strong, .security-findings-head h3, .security-control-matrix, .security-findings-table) {
  color: #e7f2f7;
}

body[data-theme="dark"] #compliancePage :where(.security-matrix-heading p, .security-findings-head p, .security-matrix-footer p, .security-matrix-summary span, .security-matrix-summary small, #securityMatrixVisibleCount) {
  color: #9cb3bf;
}

body[data-theme="dark"] #compliancePage :where(.security-matrix-toolbar, .security-findings-head) {
  border-color: #244450;
}

body[data-theme="dark"] #compliancePage :where(.security-matrix-actions button, .security-matrix-toolbar button, .security-matrix-toolbar select, .security-failed-toggle, .security-findings-head button, .security-matrix-toolbar .device-search) {
  border-color: #31515e;
  background: #0b2a35;
  color: #dcecff;
}

body[data-theme="dark"] #compliancePage .security-threat-source {
  border-color: #31515e;
  color: #bed1da;
  background: #0b2a35;
}

body[data-theme="dark"] #compliancePage .security-threat-path {
  color: #aac0cb;
}

body[data-theme="dark"] #compliancePage .security-matrix-actions .primary-action {
  border-color: #3b82f6;
  background: #2563eb;
  color: #fff;
}

body[data-theme="dark"] #compliancePage :where(.security-control-matrix th, .security-findings-table th) {
  border-color: #284854;
  background: #0b2a35;
  color: #9db5c1;
}

body[data-theme="dark"] #compliancePage :where(.security-control-matrix td, .security-findings-table td) {
  border-color: #203e49;
}

body[data-theme="dark"] #compliancePage .security-control-matrix tbody tr:hover {
  background: #0b2d39;
}

body[data-theme="dark"] #compliancePage .security-control-matrix tbody tr.selected {
  background: #103044;
}

@media (max-width: 900px) {
  #compliancePage .security-matrix-workspace {
    padding: 12px;
  }

  #compliancePage .security-matrix-heading,
  #compliancePage .security-findings-head,
  #compliancePage .security-matrix-footer {
    align-items: stretch;
    flex-direction: column;
  }

  #compliancePage .security-matrix-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  #compliancePage .security-matrix-actions > span {
    grid-column: 1 / -1;
  }

  #compliancePage .security-matrix-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #compliancePage .security-matrix-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  #compliancePage .security-matrix-toolbar .device-search {
    width: 100%;
  }

  #compliancePage .security-matrix-footer {
    gap: 8px;
  }

  #compliancePage .security-matrix-legend {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  #compliancePage .security-matrix-summary {
    grid-template-columns: 1fr;
  }
}

/* Windows Devices location workspace */
#devicesPage .devices-location-workspace {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px;
  transition: grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#devicesPage .devices-location-workspace:has(.location-move-drawer:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) 336px;
}

#devicesPage .devices-content {
  min-width: 0;
}

#devicesPage .devices-add-location-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

#devicesPage .devices-add-location-button > span:first-child {
  font-size: 1.1rem;
  line-height: 1;
}

#devicesPage .location-tree-panel {
  position: sticky;
  top: 66px;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 78px);
  min-height: 420px;
  max-height: calc(100dvh - 78px);
  padding: 14px 10px;
  overflow: hidden;
}

#devicesPage .location-tree-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 6px 12px;
}

#devicesPage .location-add-button {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #31515e;
  border-radius: 5px;
  background: #0b222c;
  color: #8fb8ff;
  cursor: pointer;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

#devicesPage .location-add-button:hover {
  border-color: #4b83df;
  background: #102f4b;
}

#devicesPage .location-tree-header h3 {
  margin: 0;
  color: #e9f4f6;
  font-size: 0.92rem;
}

#devicesPage .location-tree-header p {
  margin: 4px 0 0;
  color: #829ba4;
  font-size: 0.66rem;
  line-height: 1.35;
}

#devicesPage .location-search {
  display: block;
  margin: 0 4px 12px;
}

#devicesPage .location-search input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #294955;
  border-radius: 5px;
  outline: none;
  background: #071a22;
  color: #dcecf1;
  font: inherit;
  font-size: 0.72rem;
}

#devicesPage .location-search input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16);
}

#devicesPage .device-location-tree {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  gap: 4px;
  padding-right: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#devicesPage .device-location-group {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

#devicesPage .device-location-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 0 8px;
  color: #8ba2ac;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

#devicesPage .device-location-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #c9dce2;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

#devicesPage .device-location-item > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#devicesPage .device-location-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

#devicesPage .location-entry-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 62px;
  width: 62px;
}

#devicesPage .location-edit-button,
#devicesPage .location-remove-button {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #8099a4;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
}

#devicesPage .location-edit-button {
  padding: 0;
  color: #8fb8ff;
  font-size: 0.9rem;
}

#devicesPage .location-edit-button:hover,
#devicesPage .location-edit-button:focus-visible {
  border-color: #315d8c;
  background: #102f4b;
  color: #d7e7ff;
}

#devicesPage .location-remove-button:hover,
#devicesPage .location-remove-button:focus-visible {
  border-color: #7d3340;
  background: #351821;
  color: #ff8490;
}

#devicesPage .device-location-item:hover,
#devicesPage .device-location-item:focus-visible {
  border-color: #31515e;
  background: #0b2a35;
  color: #fff;
}

#devicesPage .device-location-item.is-selected {
  border-color: #315d8c;
  background: #112f47;
  color: #75a8ff;
  box-shadow: inset 3px 0 #3b82f6;
}

#devicesPage .device-location-item.is-drop-target {
  border-color: #16c7b7;
  background: #103b3b;
  color: #65eee1;
  transform: translateX(2px);
}

#devicesPage .device-location-item .location-icon,
#devicesPage .device-location-map-grid .location-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #31515e;
  border-radius: 5px;
  color: #7facff;
  font-size: 0.68rem;
  font-weight: 900;
}

#devicesPage .device-location-item b,
#devicesPage .device-location-group-title b {
  color: #8ca4ae;
  font-size: 0.66rem;
}

#devicesPage .location-empty {
  margin: 12px 8px;
  color: #829ba4;
  font-size: 0.7rem;
}

#devicesPage .device-summary-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  view-transition-name: windows-devices-summary;
}

#devicesPage .device-toolbar {
  flex-wrap: wrap;
}

#devicesPage .device-view-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border: 1px solid #294955;
  border-radius: 5px;
  background: #071a22;
}

#devicesPage .device-view-toggle button {
  min-width: 48px;
  border: 0;
  background: transparent;
}

#devicesPage .device-view-toggle button.is-active {
  background: #173a52;
  color: #85b4ff;
}

#devicesPage .device-selection-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 10px;
  border-bottom: 1px solid #294955;
  background: #0d2b39;
}

#devicesPage .device-selection-bar[hidden] {
  display: none;
}

#devicesPage .device-selection-bar strong {
  margin-right: auto;
  color: #eaf4f6;
  font-size: 0.74rem;
}

#devicesPage .device-selection-bar strong span {
  margin-right: 4px;
}

#devicesPage .device-selection-bar button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #31515e;
  border-radius: 5px;
  background: #0b222c;
  color: #d9e9ee;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
}

#devicesPage .device-selection-bar select {
  min-width: 220px;
  min-height: 32px;
  border: 1px solid #31515e;
  border-radius: 5px;
  background: #0b222c;
  color: #d9e9ee;
  padding: 0 30px 0 10px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
}

#devicesPage .device-selection-bar .danger-action {
  border-color: #7c3943;
  color: #ff9ca8;
}

#devicesPage .devices-table {
  min-width: 1120px;
}

#devicesPage .devices-table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  view-transition-name: windows-devices-inventory;
}

#devicesPage .devices-table th,
#devicesPage .devices-table td {
  height: 52px;
  vertical-align: middle;
}

#devicesPage .devices-table td small {
  display: block;
  margin-top: 3px;
  color: #7f98a2;
  font-size: 0.62rem;
  line-height: 1.25;
}

#devicesPage .devices-table tr.is-dragging {
  opacity: 0.52;
}

#devicesPage .device-drag-handle,
#devicesPage .device-row-menu {
  border: 0;
  background: transparent;
  color: #8ca4ae;
  cursor: grab;
  font: inherit;
  font-weight: 900;
}

#devicesPage .device-row-menu {
  cursor: pointer;
  font-size: 1rem;
}

#devicesPage .device-drag-handle:active {
  cursor: grabbing;
}

#devicesPage .device-location-value {
  color: #e3f0f3;
  font-weight: 800;
}

#devicesPage .device-hostname-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#devicesPage .device-online-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #81949d;
  box-shadow: 0 0 0 3px rgba(129, 148, 157, 0.12);
}

#devicesPage .device-online-dot.online {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

#devicesPage .device-online-dot.offline {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

#devicesPage .device-last-communication strong {
  display: block;
  color: #e3f0f3;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

#devicesPage .health-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #81949d;
}

#devicesPage .health-dot.good {
  background: #18b86d;
}

#devicesPage .health-dot.warning {
  background: #eda826;
}

#devicesPage .health-dot.critical {
  background: #ed5262;
}

#devicesPage .device-empty-state {
  padding: 30px !important;
  color: #8199a3;
  text-align: center;
}

#devicesPage .device-location-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
}

#devicesPage .device-location-map-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid #294955;
  border-radius: 6px;
  background: #09232d;
  transition: transform 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}

#devicesPage .device-location-map-grid article:hover {
  border-color: #3b6170;
  box-shadow: 0 8px 22px rgba(2, 12, 18, 0.18);
  transform: translateY(-2px);
}

#devicesPage .device-location-map-grid article header {
  display: flex;
  align-items: center;
  gap: 10px;
}

#devicesPage .device-location-map-grid article header strong,
#devicesPage .device-location-map-grid article header small {
  display: block;
}

#devicesPage .device-location-map-grid article header small {
  margin-top: 3px;
  color: #829ba4;
}

#devicesPage .device-location-map-grid article p {
  display: flex;
  justify-content: space-between;
  color: #a2bac4;
  font-size: 0.7rem;
}

#devicesPage .device-location-map-grid article p b {
  color: #fff;
  font-size: 1rem;
}

#devicesPage .device-location-map-grid article > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 5px;
}

#devicesPage .device-location-map-grid article > div button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #24434f;
  border-radius: 4px;
  background: #071a22;
  color: #cfe1e6;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
}

#devicesPage .device-location-map-grid article > div button:hover {
  border-color: #3d6473;
  background: #0c2a35;
  transform: translateX(2px);
}

#devicesPage .location-move-drawer {
  position: sticky;
  top: 66px;
  min-width: 0;
  min-height: calc(100vh - 78px);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 160ms ease-out, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

#devicesPage .location-move-drawer.is-open {
  opacity: 1;
  transform: translateX(0);
}

#devicesPage .location-move-drawer.is-closing {
  pointer-events: none;
}

#devicesPage .location-move-drawer[hidden] {
  display: none;
}

#devicesPage .location-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #294955;
}

#devicesPage .location-drawer-head small {
  color: #73a2ff;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

#devicesPage .location-drawer-head h3 {
  margin: 4px 0 0;
  color: #edf7f8;
  font-size: 1.05rem;
}

#devicesPage .location-drawer-section {
  padding: 14px 16px;
  border-bottom: 1px solid #294955;
}

#devicesPage .location-drawer-section h4 {
  margin: 0 0 10px;
  color: #dcebf0;
  font-size: 0.76rem;
}

#devicesPage .location-selected-devices {
  display: grid;
  gap: 6px;
  max-height: 116px;
  overflow: auto;
}

#devicesPage .location-selected-devices > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid #264652;
  border-radius: 4px;
  background: #071a22;
  color: #e2f0f3;
  font-size: 0.7rem;
  font-weight: 800;
}

#devicesPage .location-selected-devices small {
  color: #839ba5;
  font-weight: 500;
}

#devicesPage .location-destination-list {
  display: grid;
  gap: 10px;
}

#devicesPage .location-destination-list > div {
  display: grid;
  gap: 4px;
}

#devicesPage .location-destination-list strong {
  color: #819aa4;
  font-size: 0.64rem;
  text-transform: uppercase;
}

#devicesPage .location-destination-list button {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #294955;
  border-radius: 4px;
  background: #071a22;
  color: #cfe1e6;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  text-align: left;
  transition: background-color 130ms ease-out, border-color 130ms ease-out, color 130ms ease-out, transform 130ms ease-out;
}

#devicesPage .location-destination-list button:hover {
  border-color: #3d6473;
  transform: translateX(2px);
}

#devicesPage .location-destination-list button.is-selected {
  border-color: #3b82f6;
  background: #102f4b;
  color: #86b4ff;
}

#devicesPage .location-reason-field,
#devicesPage .location-sync-option {
  display: flex;
  margin: 14px 16px;
}

#devicesPage .location-reason-field {
  flex-direction: column;
  gap: 7px;
}

#devicesPage .location-reason-field span {
  color: #a6bcc4;
  font-size: 0.68rem;
  font-weight: 800;
}

#devicesPage .location-reason-field textarea {
  resize: vertical;
  min-height: 66px;
  padding: 9px;
  border: 1px solid #294955;
  border-radius: 5px;
  outline: none;
  background: #071a22;
  color: #dcecf1;
  font: inherit;
  font-size: 0.7rem;
}

#devicesPage .location-sync-option {
  align-items: flex-start;
  gap: 9px;
}

#devicesPage .location-sync-option input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
}

#devicesPage .location-sync-option strong,
#devicesPage .location-sync-option small {
  display: block;
}

#devicesPage .location-sync-option strong {
  color: #d9e9ee;
  font-size: 0.7rem;
}

#devicesPage .location-sync-option small {
  margin-top: 3px;
  color: #8199a3;
  font-size: 0.64rem;
  line-height: 1.35;
}

#devicesPage .location-move-status {
  min-height: 32px;
  margin: 0;
  padding: 6px 16px;
  color: #86b4ff;
  font-size: 0.67rem;
}

#devicesPage .location-drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8px;
  padding: 12px 16px 16px;
}

#devicesPage .location-drawer-actions button {
  min-height: 38px;
  border: 1px solid #31515e;
  border-radius: 5px;
  background: #0b222c;
  color: #dcecf1;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
}

#devicesPage :where(#openDeviceMoveButton, .location-drawer-actions button):disabled {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
}

#devicesPage :where(.location-add-button, .device-view-toggle button, .device-selection-bar button, .location-drawer-actions button):not(:disabled):active {
  transform: scale(0.98);
}

#devicesPage .device-location-tree {
  view-transition-name: windows-devices-locations;
}

#devicesPage .device-selection-bar {
  view-transition-name: windows-devices-selection;
}

::view-transition-old(windows-devices-inventory),
::view-transition-old(windows-devices-locations),
::view-transition-old(windows-devices-summary),
::view-transition-old(windows-devices-selection) {
  animation: windows-devices-fade-out 110ms ease-in both;
}

::view-transition-new(windows-devices-inventory),
::view-transition-new(windows-devices-locations),
::view-transition-new(windows-devices-summary),
::view-transition-new(windows-devices-selection) {
  animation: windows-devices-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes windows-devices-fade-out {
  to {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes windows-devices-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#devicesPage .device-motion-enter {
  animation: windows-devices-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #devicesPage .devices-location-workspace,
  #devicesPage .device-location-item,
  #devicesPage .device-location-map-grid article,
  #devicesPage .device-location-map-grid article > div button,
  #devicesPage .location-move-drawer,
  #devicesPage .location-destination-list button {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }

  #devicesPage .device-motion-enter {
    animation: none !important;
  }

  #devicesPage :where(.device-location-map-grid article, .device-location-map-grid article > div button, .location-destination-list button):hover {
    transform: none;
  }

  ::view-transition-old(windows-devices-inventory),
  ::view-transition-new(windows-devices-inventory),
  ::view-transition-old(windows-devices-locations),
  ::view-transition-new(windows-devices-locations),
  ::view-transition-old(windows-devices-summary),
  ::view-transition-new(windows-devices-summary),
  ::view-transition-old(windows-devices-selection),
  ::view-transition-new(windows-devices-selection) {
    animation: none !important;
  }
}

body[data-theme="light"] #devicesPage .location-tree-panel,
body[data-theme="light"] #devicesPage .location-move-drawer,
body[data-theme="light"] #devicesPage .device-location-map-grid article {
  border-color: #cfdee6;
  background: #fff;
}

body[data-theme="light"] #devicesPage :where(.location-tree-header h3, .device-location-value, .device-last-communication strong, .location-drawer-head h3, .location-drawer-section h4, .location-sync-option strong, .location-selected-devices > span) {
  color: #142936;
}

body[data-theme="light"] #devicesPage :where(.location-tree-header p, .device-location-group-title, .location-drawer-section small, .location-sync-option small) {
  color: #667d8b;
}

body[data-theme="light"] #devicesPage :where(.location-search input, .device-view-toggle, .location-selected-devices > span, .location-destination-list button, .location-reason-field textarea, .device-location-map-grid article > div button) {
  border-color: #cbdbe4;
  background: #f8fafb;
  color: #1d3441;
}

body[data-theme="light"] #devicesPage .device-location-item {
  color: #38515f;
}

body[data-theme="light"] #devicesPage .device-location-item:hover {
  border-color: #c3d6e2;
  background: #f3f7fa;
  color: #142936;
}

body[data-theme="light"] #devicesPage .device-location-item.is-selected {
  border-color: #b7cff5;
  background: #edf4ff;
  color: #1f5dc2;
}

body[data-theme="light"] #devicesPage .device-selection-bar {
  border-color: #cbdbe4;
  background: #edf5ff;
}

body[data-theme="light"] #devicesPage .device-selection-bar strong {
  color: #173349;
}

body[data-theme="light"] #devicesPage .location-add-button {
  border-color: #c5d7e2;
  background: #fff;
  color: #1f5fd1;
}

body[data-theme="light"] #devicesPage .device-location-map-grid article header strong,
body[data-theme="light"] #devicesPage .device-location-map-grid article p b {
  color: #142936;
}

body[data-theme="light"] #devicesPage .device-location-map-grid article header small,
body[data-theme="light"] #devicesPage .device-location-map-grid article p {
  color: #657d8b;
}

body[data-theme="light"] #devicesPage .device-location-map-grid article > div > button {
  border-color: #d2e0e8;
  background: #f7fafc;
  color: #183442;
}

body[data-theme="light"] #devicesPage .location-destination-list button.is-selected {
  border-color: #8eb5f3;
  background: #eaf2ff;
  color: #1f5dc2;
}

#devicesPage .devices-table-panel.is-map-view .devices-table thead {
  display: none;
}

#devicesPage .devices-table-panel.is-map-view .devices-table,
#devicesPage .devices-table-panel.is-map-view .devices-table-scroll {
  min-width: 0;
}

.location-create-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}

.location-create-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.location-create-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(2, 12, 18, 0.68);
  cursor: default;
}

.location-create-dialog {
  position: relative;
  width: min(420px, 100%);
  padding: 0;
  overflow: hidden;
  transform: translateY(8px) scale(0.985);
  transition: transform 180ms ease-out;
}

.location-create-modal.is-open .location-create-dialog {
  transform: translateY(0) scale(1);
}

.location-create-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #294955;
}

.location-create-dialog header small {
  color: #79a7ff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.location-create-dialog header h2 {
  margin: 4px 0 0;
  font-size: 1.15rem;
}

.location-create-dialog form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.location-remove-content {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.location-remove-content > strong {
  font-size: 1rem;
}

.location-remove-content > p {
  margin: 0;
  color: #91a7b0;
  font-size: 0.78rem;
  line-height: 1.55;
}

.location-remove-content footer {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  margin-top: 4px;
}

.location-remove-content footer button {
  min-height: 40px;
  border: 1px solid #31515e;
  border-radius: 5px;
  background: #0b222c;
  color: #dcecf1;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.location-remove-content .danger-action {
  border-color: #a63b49;
  background: #a92839;
  color: #fff;
}

body[data-theme="light"] .location-remove-content > p {
  color: #5f7582;
}

body[data-theme="light"] .location-remove-content footer button:not(.danger-action) {
  border-color: #c5d7e2;
  background: #f8fafb;
  color: #24404f;
}

body[data-theme="light"] #devicesPage .location-remove-button:hover,
body[data-theme="light"] #devicesPage .location-remove-button:focus-visible {
  border-color: #f1b4ba;
  background: #fff0f1;
  color: #c52d3f;
}

.location-create-dialog form label {
  display: grid;
  gap: 7px;
}

.location-create-dialog form label > span {
  font-size: 0.75rem;
  font-weight: 800;
}

.location-create-dialog :where(input, select, textarea) {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #31515e;
  border-radius: 5px;
  outline: none;
  background: #071a22;
  color: #e2eef2;
  font: inherit;
}

.location-create-dialog textarea {
  min-height: 116px;
  padding-top: 10px;
  resize: vertical;
  line-height: 1.45;
}

.location-create-dialog form label > small {
  color: #91a7b0;
  font-size: 0.68rem;
  line-height: 1.45;
}

.location-create-dialog :where(input, select, textarea):focus {
  border-color: #4d85df;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.location-create-status {
  min-height: 18px;
  margin: 0;
  color: #efb44d;
  font-size: 0.72rem;
}

.location-create-dialog footer {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
}

.location-create-dialog footer button {
  min-height: 40px;
  border: 1px solid #31515e;
  border-radius: 5px;
  background: #0b222c;
  color: #dcecf1;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.location-create-dialog footer button:disabled {
  opacity: 0.55;
  cursor: wait;
}

body[data-theme="light"] .location-create-dialog {
  border-color: #cbdbe4;
  background: #fff;
  color: #142936;
}

body[data-theme="light"] .location-create-dialog > header {
  border-color: #d7e2e8;
}

body[data-theme="light"] .location-create-dialog :where(input, select, textarea) {
  border-color: #c5d7e2;
  background: #fff;
  color: #142936;
}

body[data-theme="light"] .location-create-dialog form label > small {
  color: #5f7582;
}

body[data-theme="light"] .location-create-dialog footer button:not(.primary-action):not(.danger-action) {
  border-color: #c5d7e2;
  background: #f8fafb;
  color: #24404f;
}

body[data-theme="light"] .location-create-dialog footer .danger-action {
  border-color: #a63b49;
  background: #a92839;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .location-create-modal,
  .location-create-dialog {
    transition: none;
  }
}

@media (max-width: 1380px) {
  #devicesPage .devices-location-workspace:has(.location-move-drawer:not([hidden])) {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  #devicesPage .location-move-drawer:not([hidden]) {
    position: fixed;
    z-index: 35;
    top: 58px;
    right: 10px;
    bottom: 10px;
    width: min(360px, calc(100vw - 20px));
    min-height: 0;
    overflow: auto;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  }
}

@media (max-width: 980px) {
  #devicesPage .devices-location-workspace,
  #devicesPage .devices-location-workspace:has(.location-move-drawer:not([hidden])) {
    grid-template-columns: 1fr;
  }

  #devicesPage .location-tree-panel {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  #devicesPage .device-location-tree {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 420px;
  }

  #devicesPage .device-location-group {
    align-content: start;
  }

  #devicesPage .device-summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #devicesPage .device-toolbar .device-search {
    width: 100%;
  }
}

@media (max-width: 620px) {
  #devicesPage .devices-location-workspace {
    padding: 8px;
  }

  #devicesPage .device-location-tree,
  #devicesPage .device-summary-row,
  #devicesPage .device-location-map-grid {
    grid-template-columns: 1fr;
  }

  #devicesPage .device-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }

  #devicesPage .device-selection-bar select {
    width: 100%;
    min-width: 0;
  }

  #devicesPage .device-toolbar > select,
  #devicesPage .device-toolbar > button,
  #devicesPage .device-view-toggle {
    flex: 1 1 calc(50% - 8px);
  }

  #devicesPage .toolbar-spacer {
    margin-left: 0;
  }
}

/* Shared navigation motion keeps the shell stable between routed pages. */
.route-content-enter > .devices-main,
.route-content-enter > .dense-topbar,
.route-content-enter > .dense-content {
  animation: route-content-in 220ms cubic-bezier(0.2, 0, 0, 1) both;
}

.route-content-enter > .dense-content {
  animation-delay: 24ms;
}

@keyframes route-content-in {
  from {
    opacity: 0.72;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 981px) {
  .dense-dashboard > .devices-sidebar,
  #dashboardPage > .app-drawer {
    box-sizing: border-box;
    width: 238px;
    padding: 14px 12px;
    transition:
      width 220ms cubic-bezier(0.2, 0, 0, 1),
      padding 220ms cubic-bezier(0.2, 0, 0, 1);
  }

  .dense-dashboard.sidebar-collapsed > .devices-sidebar,
  #dashboardPage.sidebar-collapsed > .app-drawer {
    width: 72px;
  }

  #dashboardPage .drawer-head {
    display: block;
    margin: 0;
  }

  #dashboardPage .drawer-nav,
  .devices-nav {
    gap: 4px;
  }

  #dashboardPage .drawer-nav a,
  .devices-nav a {
    min-height: 34px;
    padding: 0 11px;
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-content-enter > .devices-main,
  .route-content-enter > .dense-topbar,
  .route-content-enter > .dense-content {
    animation: none;
  }

  .dense-dashboard,
  .dense-dashboard > .devices-sidebar,
  #dashboardPage > .app-drawer,
  .devices-nav a,
  .drawer-nav a,
  .nav-label {
    transition: none !important;
  }
}

/* Policies workspace: library, editor, and assignment matrix */
#policiesPage {
  --policy-surface: #0b2029;
  --policy-surface-raised: #0e2732;
  --policy-line: #244653;
  --policy-text: #edf8fb;
  --policy-muted: #9eb5bf;
  --policy-blue-soft: #102f53;
}

body[data-theme="light"] #policiesPage {
  --policy-surface: #ffffff;
  --policy-surface-raised: #f8fbfd;
  --policy-line: #d6e2e8;
  --policy-text: #132b3a;
  --policy-muted: #607888;
  --policy-blue-soft: #eaf2ff;
}

#policiesPage .policies-workspace {
  padding: 16px;
}

#policiesPage .details-heading {
  min-height: 58px;
  margin-bottom: 12px;
}

#policiesPage .details-heading h2 {
  letter-spacing: 0;
}

#policiesPage .details-heading .details-actions {
  flex-wrap: wrap;
}

#policiesPage .icon-text-button,
#policiesPage .button-link.icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  text-decoration: none;
  white-space: nowrap;
}

#policiesPage .icon-text-button svg,
#policiesPage .button-link.icon-text-button svg,
#policiesPage .section-head-icon svg,
#policiesPage .policy-icon svg,
#policiesPage .policy-detail-section h4 svg,
#policiesPage .policy-enforcement-list svg,
#policiesPage .policy-matrix-search svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#policiesPage .policy-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

#policiesPage .policy-summary-grid .device-summary-card {
  min-height: 108px;
  border-color: var(--policy-line);
  background: var(--policy-surface);
  color: var(--policy-text);
}

#policiesPage .policy-summary-grid .device-summary-card strong {
  color: var(--policy-text);
  font-variant-numeric: tabular-nums;
}

#policiesPage .policy-summary-grid .device-summary-card :is(span, small) {
  color: var(--policy-muted);
}

#policiesPage .policy-summary-grid .device-summary-icon {
  color: #3b82f6;
}

#policiesPage .policy-summary-grid .device-summary-icon svg {
  width: 100%;
  height: 100%;
}

.policy-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  padding: 4px;
  width: fit-content;
  border: 1px solid var(--policy-line);
  border-radius: 7px;
  background: var(--policy-surface);
}

.policy-view-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: var(--policy-muted);
}

.policy-view-tabs button.active {
  background: #2563eb;
  color: #fff;
}

.policy-view-tabs svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#policiesPage .policies-layout {
  grid-template-columns: minmax(420px, 1.35fr) minmax(320px, 0.65fr);
  gap: 12px;
  align-items: start;
}

#policiesPage .policies-list,
#policiesPage .policy-detail,
#policiesPage .policy-assignment-list,
#policiesPage .policy-assignment-matrix,
#policiesPage .policy-enforcement-detail,
#policiesPage .policy-editor {
  border: 1px solid var(--policy-line);
  border-radius: 7px;
  background: var(--policy-surface);
  color: var(--policy-text);
  box-shadow: none;
}

#policiesPage .policies-list {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.policy-list-heading,
.policy-matrix-head,
.policy-enforcement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--policy-line);
}

.policy-list-heading > div,
.policy-matrix-head > div,
.policy-enforcement-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

#policiesPage .section-head-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--policy-blue-soft);
  color: #3b82f6;
}

#policiesPage :is(.policy-list-heading, .policy-matrix-head, .policy-enforcement-head) h3 {
  margin: 0;
  color: var(--policy-text);
  font-size: 0.9rem;
}

#policiesPage :is(.policy-list-heading, .policy-matrix-head, .policy-enforcement-head) p {
  margin: 3px 0 0;
  color: var(--policy-muted);
  font-size: 0.7rem;
}

#policiesPage .policy-toolbar {
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--policy-line);
}

#policiesPage .policy-toolbar button,
#policiesPage .policy-actions button {
  border-color: var(--policy-line);
  background: transparent;
  color: var(--policy-text);
}

#policiesPage .policy-toolbar button.active {
  border-color: #3b82f6;
  background: var(--policy-blue-soft);
  color: #3b82f6;
}

#policiesPage .policy-catalog-list {
  gap: 0;
}

#policiesPage .policy-card {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--policy-line);
  border-radius: 0;
  background: var(--policy-surface);
  color: var(--policy-text);
}

#policiesPage .policy-card:last-child {
  border-bottom: 0;
}

#policiesPage .policy-card:hover,
#policiesPage .policy-card.selected {
  background: var(--policy-blue-soft);
}

#policiesPage .policy-card.selected {
  box-shadow: inset 3px 0 0 #3b82f6;
}

#policiesPage .policy-card .policy-icon,
#policiesPage .policy-detail .policy-icon,
#policiesPage .policy-assignment-policy-items .policy-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--policy-blue-soft);
  color: #3b82f6;
}

#policiesPage .policy-card h3,
#policiesPage .policy-detail h3 {
  color: var(--policy-text);
  font-size: 0.82rem;
}

#policiesPage .policy-card p,
#policiesPage .policy-detail p,
#policiesPage .policy-card small {
  color: var(--policy-muted);
}

#policiesPage .policy-card small {
  display: flex;
  justify-content: space-between;
  padding-left: 48px;
}

#policiesPage .policy-detail {
  position: sticky;
  top: 10px;
  padding: 16px;
}

#policiesPage .policy-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

#policiesPage .policy-score-row,
#policiesPage .policy-detail-section {
  border: 1px solid var(--policy-line);
  border-radius: 6px;
  background: var(--policy-surface-raised);
}

#policiesPage .policy-score-row {
  margin: 14px 0 0;
}

#policiesPage .policy-score-row strong,
#policiesPage .policy-detail-section h4,
#policiesPage .policy-detail-section p {
  color: var(--policy-text);
}

#policiesPage .policy-detail-section {
  padding: 12px;
}

#policiesPage .policy-detail-section h4 {
  display: flex;
  align-items: center;
  gap: 7px;
}

#policiesPage .policy-detail-section p {
  align-items: flex-start;
  border-color: var(--policy-line);
}

#policiesPage .policy-detail-section p span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#policiesPage .policy-detail-section p strong {
  color: #3b82f6;
  text-align: right;
  text-transform: capitalize;
}

#policiesPage .policy-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#policiesPage .policy-actions .primary-action {
  grid-column: 1 / -1;
  background: #2563eb;
  color: #fff;
}

#policiesPage .policy-actions .danger-action {
  color: #f87171;
}

.policy-assignment-workspace {
  display: grid;
  grid-template-columns: 260px minmax(680px, 1fr) 300px;
  gap: 12px;
  align-items: start;
}

.policy-assignment-list,
.policy-assignment-matrix,
.policy-enforcement-detail {
  min-height: 550px;
  overflow: hidden;
}

.policy-assignment-policy-items {
  display: grid;
}

.policy-assignment-policy-items button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--policy-line);
  border-radius: 0;
  background: transparent;
  color: var(--policy-text);
  text-align: left;
}

.policy-assignment-policy-items button:hover,
.policy-assignment-policy-items button.active {
  background: var(--policy-blue-soft);
}

.policy-assignment-policy-items button.active {
  box-shadow: inset 3px 0 0 #3b82f6;
}

.policy-assignment-policy-items button > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.policy-assignment-policy-items :is(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.policy-assignment-policy-items small {
  color: var(--policy-muted);
}

.policy-assignment-policy-items b {
  color: #3b82f6;
  font-variant-numeric: tabular-nums;
}

.policy-matrix-head {
  flex-wrap: wrap;
}

.policy-matrix-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: min(320px, 100%);
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--policy-line);
  border-radius: 5px;
  color: var(--policy-muted);
  background: var(--policy-surface-raised);
}

.policy-matrix-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--policy-text);
  font: inherit;
}

.policy-matrix-table-wrap {
  overflow: auto;
}

.policy-matrix-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.policy-matrix-table :is(th, td) {
  padding: 11px 10px;
  border-bottom: 1px solid var(--policy-line);
  color: var(--policy-text);
  font-size: 0.72rem;
  text-align: left;
  vertical-align: middle;
}

.policy-matrix-table th {
  height: 44px;
  background: var(--policy-surface-raised);
  color: var(--policy-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.policy-matrix-table tr {
  cursor: pointer;
}

.policy-matrix-table tbody tr:hover,
.policy-matrix-table tbody tr.selected {
  background: var(--policy-blue-soft);
}

.policy-matrix-table td:first-child button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3b82f6;
  font-weight: 800;
}

.policy-matrix-table td:first-child svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.policy-matrix-table .status {
  white-space: nowrap;
}

.policy-matrix-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--policy-muted);
  font-size: 0.7rem;
}

.policy-enforcement-detail {
  padding: 0 14px 14px;
}

.policy-enforcement-detail .policy-enforcement-head {
  margin: 0 -14px;
}

.policy-enforcement-list {
  margin: 0;
}

.policy-enforcement-list > div {
  display: grid;
  gap: 7px;
  padding: 14px 0;
  border-bottom: 1px solid var(--policy-line);
}

.policy-enforcement-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--policy-muted);
  font-size: 0.7rem;
}

.policy-enforcement-list dd {
  margin: 0 0 0 25px;
  color: var(--policy-text);
  font-size: 0.76rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.policy-enforcement-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.policy-enforcement-actions .primary-action {
  background: #2563eb;
  color: #fff;
}

.policy-enforcement-actions .button-link {
  border: 1px solid var(--policy-line);
  color: #3b82f6;
}

#policiesPage.policy-editor-open :is(.policy-summary-grid, .policy-view-tabs, #policyLibraryView, #policyAssignmentsView) {
  display: none !important;
}

#policiesPage .policy-editor {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

#policiesPage .policy-editor-head {
  min-height: 68px;
  padding: 13px 16px;
  border-color: var(--policy-line);
}

.policy-editor-title,
.policy-editor-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

#policiesPage .policy-editor form {
  padding: 16px;
}

#policiesPage .policy-form-grid {
  padding: 14px;
  border: 1px solid var(--policy-line);
  border-radius: 6px;
  background: var(--policy-surface-raised);
}

#policiesPage .policy-form-grid label > span {
  color: var(--policy-text);
}

#policiesPage :is(.policy-form-grid input, .policy-form-grid select, .policy-form-grid textarea, .policy-setting-row input) {
  min-height: 42px;
  border-color: var(--policy-line);
  background: var(--policy-surface);
  color: var(--policy-text);
}

#policiesPage :is(.policy-target-picker, .policy-settings-editor) {
  padding: 14px;
  border: 1px solid var(--policy-line);
  border-radius: 6px;
  background: var(--policy-surface-raised);
}

#policiesPage .policy-target-option {
  min-height: 60px;
  border-color: var(--policy-line);
  background: var(--policy-surface);
}

#policiesPage .policy-target-option strong,
#policiesPage .policy-editor h3,
#policiesPage .policy-editor h4 {
  color: var(--policy-text);
}

#policiesPage .policy-target-option small,
#policiesPage .policy-editor p {
  color: var(--policy-muted);
}

#policiesPage .policy-setting-row .icon-button {
  width: 40px;
  min-height: 40px;
  color: #f87171;
}

#policiesPage .policy-editor-actions {
  padding-top: 14px;
  border-top: 1px solid var(--policy-line);
}

@media (max-width: 1260px) {
  .policy-assignment-workspace {
    grid-template-columns: 230px minmax(620px, 1fr);
  }

  .policy-enforcement-detail {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .policy-enforcement-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .policy-enforcement-list > div {
    padding: 12px;
    border-right: 1px solid var(--policy-line);
  }

  .policy-enforcement-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #policiesPage .policy-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #policiesPage .policies-layout,
  .policy-assignment-workspace {
    grid-template-columns: 1fr;
  }

  #policiesPage .policy-detail {
    position: static;
  }

  .policy-assignment-list,
  .policy-assignment-matrix {
    min-height: 0;
  }

  .policy-assignment-policy-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .policy-enforcement-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #policiesPage .policies-workspace {
    padding: 10px;
  }

  #policiesPage .details-heading {
    align-items: flex-start;
  }

  #policiesPage .details-heading .details-actions,
  #policiesPage .details-heading .details-actions > button {
    width: 100%;
  }

  #policiesPage .policy-summary-grid,
  .policy-assignment-policy-items,
  .policy-enforcement-list,
  #policiesPage .policy-actions,
  #policiesPage .policy-form-grid,
  #policiesPage .policy-target-options {
    grid-template-columns: 1fr;
  }

  #policiesPage .policy-summary-grid .device-summary-card {
    min-height: 92px;
  }

  .policy-view-tabs {
    width: 100%;
  }

  .policy-view-tabs button {
    flex: 1;
  }

  #policiesPage .policy-actions .primary-action {
    grid-column: auto;
  }

  .policy-matrix-head {
    align-items: flex-start;
  }

  .policy-matrix-search {
    width: 100%;
  }

  .policy-matrix-footer,
  .policy-enforcement-actions {
    grid-template-columns: 1fr;
  }

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

  #policiesPage .policy-setting-row {
    grid-template-columns: 1fr 40px;
  }
}

/* Reports Model C: compliance and audit reporting workspace */
#reportsPage .reports-legacy-workspace {
  display: none !important;
}

#reportsPage .reports-model-c {
  --reports-bg: #071c25;
  --reports-surface: #0b2631;
  --reports-surface-raised: #0e303c;
  --reports-border: #214553;
  --reports-text: #eef8fb;
  --reports-muted: #9bb4bf;
  --reports-primary: #38bdf8;
  --reports-primary-strong: #0ea5e9;
  --reports-success: #34d399;
  --reports-warning: #fbbf24;
  --reports-danger: #fb7185;
  --reports-info-soft: rgba(56, 189, 248, 0.12);
  --reports-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 0;
  min-height: calc(100dvh - 58px);
  padding: 20px;
  color: var(--reports-text);
  background: var(--reports-bg);
}

body[data-theme="light"] #reportsPage .reports-model-c {
  --reports-bg: #eef4f7;
  --reports-surface: #ffffff;
  --reports-surface-raised: #f7fafc;
  --reports-border: #ccdce3;
  --reports-text: #132a35;
  --reports-muted: #58717e;
  --reports-primary: #1769e0;
  --reports-primary-strong: #1359be;
  --reports-success: #118a5b;
  --reports-warning: #a96500;
  --reports-danger: #c92a43;
  --reports-info-soft: #e9f2ff;
  --reports-shadow: 0 8px 22px rgba(28, 55, 69, 0.08);
}

#reportsPage .reports-model-c *,
#reportsPage .reports-model-c *::before,
#reportsPage .reports-model-c *::after {
  box-sizing: border-box;
}

#reportsPage .reports-model-c svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

#reportsPage .reports-c-page-header,
#reportsPage .reports-c-section-heading,
#reportsPage .reports-c-header-actions,
#reportsPage .reports-c-report-name,
#reportsPage .reports-c-row-actions,
#reportsPage .reports-c-selected-template {
  display: flex;
  align-items: center;
}

#reportsPage .reports-c-page-header {
  min-height: 64px;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

#reportsPage .reports-c-page-header h1 {
  margin: 2px 0 3px;
  color: var(--reports-text);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0;
}

#reportsPage .reports-c-page-header p,
#reportsPage .reports-c-section-heading p,
#reportsPage .reports-c-selected-template p {
  margin: 0;
  color: var(--reports-muted);
}

#reportsPage .reports-c-page-header > div:first-child > p:last-child {
  font-size: 13px;
}

#reportsPage .reports-c-eyebrow {
  color: var(--reports-primary) !important;
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
}

#reportsPage .reports-c-header-actions {
  gap: 8px;
}

#reportsPage .reports-c-button,
#reportsPage .reports-c-icon-button {
  appearance: none;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  color: var(--reports-text);
  background: var(--reports-surface);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease;
}

#reportsPage .reports-c-button {
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

#reportsPage .reports-c-icon-button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
}

#reportsPage .reports-c-button:hover,
#reportsPage .reports-c-icon-button:hover {
  border-color: var(--reports-primary);
  color: var(--reports-primary);
  background: var(--reports-info-soft);
}

#reportsPage .reports-c-button:active,
#reportsPage .reports-c-icon-button:active {
  transform: scale(0.97);
}

#reportsPage .reports-c-button:focus-visible,
#reportsPage .reports-c-icon-button:focus-visible,
#reportsPage .reports-c-template-item:focus-visible,
#reportsPage .reports-c-search input:focus-visible,
#reportsPage .reports-c-delivery-form :is(input, select):focus-visible,
#reportsPage .reports-c-toolbar select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--reports-primary) 28%, transparent);
  outline-offset: 1px;
}

#reportsPage .reports-c-button-primary {
  border-color: var(--reports-primary-strong);
  color: #ffffff;
  background: var(--reports-primary-strong);
}

#reportsPage .reports-c-button-primary:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--reports-primary-strong) 86%, #000000);
}

#reportsPage .reports-c-button:disabled,
#reportsPage .reports-c-icon-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

#reportsPage .reports-c-button.loading svg,
#reportsPage .reports-c-icon-button.loading svg {
  animation: reports-c-spin 750ms linear infinite;
}

@keyframes reports-c-spin {
  to { transform: rotate(360deg); }
}

#reportsPage .reports-c-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

#reportsPage .reports-c-summary article {
  min-width: 0;
  min-height: 104px;
  padding: 15px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--reports-border);
  border-radius: 6px;
  background: var(--reports-surface);
  box-shadow: var(--reports-shadow);
}

#reportsPage .reports-c-summary-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--reports-primary);
  background: var(--reports-info-soft);
}

#reportsPage .reports-c-summary-icon.scheduled {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.13);
}

#reportsPage .reports-c-summary-icon.review {
  color: var(--reports-warning);
  background: rgba(251, 191, 36, 0.13);
}

#reportsPage .reports-c-summary-icon.verified {
  color: var(--reports-success);
  background: rgba(52, 211, 153, 0.13);
}

#reportsPage .reports-c-summary article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#reportsPage .reports-c-summary small {
  color: var(--reports-muted);
  font-size: 11px;
  font-weight: 700;
}

#reportsPage .reports-c-summary strong {
  color: var(--reports-text);
  font-size: 24px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#reportsPage .reports-c-summary article span:last-child {
  overflow: hidden;
  color: var(--reports-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reportsPage .reports-c-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  grid-template-areas:
    "inventory delivery"
    "history delivery";
  align-items: start;
  gap: 12px;
}

#reportsPage .reports-c-inventory,
#reportsPage .reports-c-history,
#reportsPage .reports-c-delivery {
  min-width: 0;
  border: 1px solid var(--reports-border);
  border-radius: 6px;
  background: var(--reports-surface);
  box-shadow: var(--reports-shadow);
}

#reportsPage .reports-c-delivery {
  position: sticky;
  top: 12px;
}

#reportsPage .reports-c-inventory { grid-area: inventory; }
#reportsPage .reports-c-history { grid-area: history; }
#reportsPage .reports-c-delivery { grid-area: delivery; }

#reportsPage .reports-c-inventory-toolbar {
  grid-template-columns: minmax(260px, 1fr) 170px 170px;
}

#reportsPage .reports-c-inventory-table {
  min-width: 1660px;
  table-layout: auto;
}

#reportsPage .reports-c-inventory-table th:nth-child(n) {
  width: auto;
}

#reportsPage .reports-c-inventory-table th:nth-child(1) { min-width: 130px; }
#reportsPage .reports-c-inventory-table th:nth-child(2) { min-width: 125px; }
#reportsPage .reports-c-inventory-table th:nth-child(3) { min-width: 185px; }
#reportsPage .reports-c-inventory-table th:nth-child(4) { min-width: 205px; }
#reportsPage .reports-c-inventory-table th:nth-child(5) { min-width: 170px; }
#reportsPage .reports-c-inventory-table th:nth-child(6) { min-width: 180px; }
#reportsPage .reports-c-inventory-table th:nth-child(7) { min-width: 130px; }
#reportsPage .reports-c-inventory-table th:nth-child(8) { min-width: 180px; }
#reportsPage .reports-c-inventory-table th:nth-child(9) { min-width: 120px; }
#reportsPage .reports-c-inventory-table th:nth-child(10) { min-width: 210px; }

#reportsPage .reports-c-inventory-table td {
  overflow-wrap: normal;
  word-break: normal;
}

#reportsPage .reports-c-good { color: var(--reports-success); }
#reportsPage .reports-c-attention { color: var(--reports-warning); }

#reportsPage .reports-c-section-heading {
  min-height: 64px;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--reports-border);
}

#reportsPage .reports-c-section-heading h2 {
  margin: 0 0 2px;
  color: var(--reports-text);
  font-size: 15px;
  line-height: 1.25;
}

#reportsPage .reports-c-section-heading p {
  font-size: 11px;
}

#reportsPage .reports-c-section-heading > span:not(.reports-c-live-badge) {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--reports-primary);
  background: var(--reports-info-soft);
  font-size: 11px;
  font-weight: 800;
}

#reportsPage .reports-c-search {
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  color: var(--reports-muted);
  background: var(--reports-surface-raised);
}

#reportsPage .reports-c-search svg {
  width: 16px;
  margin-left: 10px;
}

#reportsPage .reports-c-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 10px 0 0;
  border: 0;
  outline: 0;
  color: var(--reports-text);
  background: transparent;
  font: inherit;
}

#reportsPage .reports-c-search input::placeholder {
  color: var(--reports-muted);
}

#reportsPage .reports-c-templates > .reports-c-search {
  margin: 12px;
}

#reportsPage .reports-c-template-list {
  max-height: 630px;
  padding: 0 8px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--reports-border) transparent;
}

#reportsPage .reports-c-template-item {
  width: 100%;
  min-height: 68px;
  margin: 0 0 5px;
  padding: 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--reports-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
}

#reportsPage .reports-c-template-item:hover {
  border-color: var(--reports-border);
  background: var(--reports-surface-raised);
}

#reportsPage .reports-c-template-item:active {
  transform: scale(0.99);
}

#reportsPage .reports-c-template-item.selected {
  border-color: var(--reports-primary);
  background: var(--reports-info-soft);
  box-shadow: inset 3px 0 0 var(--reports-primary);
}

#reportsPage .reports-c-template-icon,
#reportsPage .reports-c-selected-template > span:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--reports-primary);
  background: var(--reports-info-soft);
}

#reportsPage .reports-c-template-item > span:nth-child(2) {
  min-width: 0;
}

#reportsPage .reports-c-template-item strong,
#reportsPage .reports-c-template-item small {
  display: block;
}

#reportsPage .reports-c-template-item strong {
  overflow: hidden;
  color: var(--reports-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reportsPage .reports-c-template-item small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--reports-muted);
  font-size: 10px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#reportsPage .reports-c-chevron {
  width: 16px !important;
  color: var(--reports-muted);
}

#reportsPage .reports-c-template-item.selected .reports-c-chevron {
  color: var(--reports-primary);
}

#reportsPage .reports-c-template-skeleton {
  height: 62px;
  margin: 0 0 6px;
  border-radius: 5px;
  background: var(--reports-surface-raised);
  animation: reports-c-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes reports-c-pulse {
  from { opacity: 0.45; }
  to { opacity: 0.9; }
}

#reportsPage .reports-c-empty {
  padding: 18px 10px;
  color: var(--reports-muted);
  text-align: center;
}

#reportsPage .reports-c-history-heading .reports-c-icon-button {
  width: 34px;
  height: 34px;
}

#reportsPage .reports-c-toolbar {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 145px auto;
  gap: 8px;
  border-bottom: 1px solid var(--reports-border);
}

#reportsPage .reports-c-toolbar select,
#reportsPage .reports-c-delivery-form :is(select, input) {
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  outline: 0;
  color: var(--reports-text);
  background: var(--reports-surface-raised);
  font: inherit;
}

#reportsPage .reports-c-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

#reportsPage .reports-c-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  table-layout: fixed;
}

#reportsPage .reports-c-table th,
#reportsPage .reports-c-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--reports-border);
  color: var(--reports-text);
  font-size: 11px;
  text-align: left;
  vertical-align: middle;
}

#reportsPage .reports-c-table th {
  color: var(--reports-muted);
  background: var(--reports-surface-raised);
  font-size: 10px;
  text-transform: uppercase;
}

#reportsPage .reports-c-table th:nth-child(1) { width: 27%; }
#reportsPage .reports-c-table th:nth-child(2) { width: 17%; }
#reportsPage .reports-c-table th:nth-child(3) { width: 16%; }
#reportsPage .reports-c-table th:nth-child(4) { width: 14%; }
#reportsPage .reports-c-table th:nth-child(5) { width: 13%; }
#reportsPage .reports-c-table th:nth-child(6) { width: 13%; }

#reportsPage .reports-c-table tbody tr {
  transition: background-color 150ms ease;
}

#reportsPage .reports-c-table tbody tr:hover {
  background: var(--reports-surface-raised);
}

#reportsPage .reports-c-report-name {
  min-width: 0;
  gap: 8px;
}

#reportsPage .reports-c-report-name > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--reports-primary);
  background: var(--reports-info-soft);
  flex: 0 0 auto;
}

#reportsPage .reports-c-report-name > span svg {
  width: 16px;
}

#reportsPage .reports-c-report-name > div {
  min-width: 0;
}

#reportsPage .reports-c-report-name strong,
#reportsPage .reports-c-report-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reportsPage .reports-c-report-name strong {
  font-size: 11px;
}

#reportsPage .reports-c-report-name small {
  margin-top: 2px;
  color: var(--reports-muted);
  font-size: 10px;
}

#reportsPage .reports-c-status {
  width: max-content;
  max-width: 100%;
  min-height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 800;
}

#reportsPage .reports-c-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

#reportsPage .reports-c-status.completed {
  color: var(--reports-success);
  background: rgba(52, 211, 153, 0.13);
}

#reportsPage .reports-c-status.processing,
#reportsPage .reports-c-status.queued {
  color: var(--reports-primary);
  background: var(--reports-info-soft);
}

#reportsPage .reports-c-status.failed {
  color: var(--reports-danger);
  background: rgba(251, 113, 133, 0.13);
}

#reportsPage .reports-c-row-actions {
  justify-content: flex-end;
  gap: 5px;
}

#reportsPage .reports-c-row-actions .link-button {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  color: var(--reports-primary);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

#reportsPage .reports-c-row-actions .reports-c-icon-button {
  width: 32px;
  height: 32px;
}

#reportsPage .reports-c-row-actions .reports-c-icon-button svg {
  width: 15px;
}

#reportsPage .reports-c-loading-row td,
#reportsPage .reports-c-empty-row td {
  height: 220px;
  color: var(--reports-muted);
  text-align: center;
}

#reportsPage .reports-c-empty-row td > span {
  width: 42px;
  height: 42px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--reports-primary);
  background: var(--reports-info-soft);
}

#reportsPage .reports-c-empty-row strong,
#reportsPage .reports-c-empty-row p {
  display: block;
  margin: 3px 0;
}

#reportsPage .reports-c-table-footer {
  min-height: 42px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--reports-muted);
  font-size: 10px;
}

#reportsPage .reports-c-selected-template {
  min-height: 92px;
  margin: 12px;
  padding: 12px;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  background: var(--reports-surface-raised);
}

#reportsPage .reports-c-selected-template > div {
  min-width: 0;
}

#reportsPage .reports-c-selected-template small,
#reportsPage .reports-c-selected-template strong,
#reportsPage .reports-c-selected-template p {
  display: block;
}

#reportsPage .reports-c-selected-template small {
  color: var(--reports-muted);
  font-size: 10px;
}

#reportsPage .reports-c-selected-template strong {
  margin: 2px 0 4px;
  color: var(--reports-text);
  font-size: 13px;
}

#reportsPage .reports-c-selected-template p {
  font-size: 10px;
  line-height: 1.45;
}

#reportsPage .reports-c-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--reports-success);
  font-size: 10px;
  font-weight: 800;
}

#reportsPage .reports-c-live-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

#reportsPage .reports-c-delivery-form {
  padding: 0 12px 12px;
  display: grid;
  gap: 10px;
}

#reportsPage .reports-c-delivery-mode {
  min-height: 38px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  background: var(--reports-surface-raised);
}

#reportsPage .reports-c-delivery-mode button {
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 4px;
  color: var(--reports-muted);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

#reportsPage .reports-c-delivery-mode button.active {
  color: #ffffff;
  background: var(--reports-primary-strong);
}

#reportsPage .reports-c-delivery-mode svg {
  width: 15px;
  flex: 0 0 auto;
}

#reportsPage .reports-c-delivery-form label {
  display: grid;
  gap: 5px;
}

#reportsPage .reports-c-delivery-form label > span {
  color: var(--reports-muted);
  font-size: 10px;
  font-weight: 700;
}

#reportsPage .reports-c-generate {
  width: 100%;
  margin-top: 2px;
}

#reportsPage .reports-c-schedule-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#reportsPage .reports-c-schedule-fields[hidden],
#reportsPage .reports-c-schedule-fields label[hidden] {
  display: none;
}

#reportsPage .reports-c-schedules {
  min-width: 0;
  margin-top: 12px;
  border: 1px solid var(--reports-border);
  border-radius: 6px;
  background: var(--reports-surface);
  box-shadow: var(--reports-shadow);
}

#reportsPage .reports-c-schedule-table th:nth-child(1) { width: 22%; }
#reportsPage .reports-c-schedule-table th:nth-child(2) { width: 17%; }
#reportsPage .reports-c-schedule-table th:nth-child(3) { width: 22%; }
#reportsPage .reports-c-schedule-table th:nth-child(4) { width: 15%; }
#reportsPage .reports-c-schedule-table th:nth-child(5) { width: 13%; }
#reportsPage .reports-c-schedule-table th:nth-child(6) { width: 11%; }

#reportsPage .reports-c-cell-note {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--reports-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reportsPage .reports-c-schedule-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

#reportsPage .reports-c-schedule-actions .reports-c-icon-button {
  width: 30px;
  height: 30px;
}

#reportsPage .reports-c-schedule-actions .reports-c-icon-button svg {
  width: 15px;
}

#reportsPage .reports-c-icon-button.danger {
  color: var(--reports-danger);
}

#reportsPage .reports-c-delivery-status {
  margin: 0 12px 12px;
  padding: 10px;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.45;
}

#reportsPage .reports-c-delivery-status strong,
#reportsPage .reports-c-delivery-status span {
  display: block;
}

#reportsPage .reports-c-delivery-status.completed {
  border-color: color-mix(in srgb, var(--reports-success) 45%, var(--reports-border));
  color: var(--reports-success);
  background: rgba(52, 211, 153, 0.08);
}

#reportsPage .reports-c-delivery-status.processing {
  color: var(--reports-primary);
  background: var(--reports-info-soft);
}

#reportsPage .reports-c-delivery-status.failed {
  border-color: color-mix(in srgb, var(--reports-danger) 45%, var(--reports-border));
  color: var(--reports-danger);
  background: rgba(251, 113, 133, 0.08);
}

#reportsPage .reports-c-delivery-status .link-button {
  margin-top: 8px;
  padding: 0;
  border: 0;
  color: currentColor;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

#reportsPage .reports-c-note {
  margin: 0 12px 12px;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--reports-border);
  border-radius: 5px;
  color: var(--reports-muted);
  background: var(--reports-surface-raised);
}

#reportsPage .reports-c-note svg {
  width: 17px;
  color: var(--reports-success);
}

#reportsPage .reports-c-note p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
}

#reportsPage .reports-c-note strong,
#reportsPage .reports-c-note span {
  display: block;
}

#reportsPage .reports-c-note strong {
  color: var(--reports-text);
}

@media (max-width: 1320px) {
  #reportsPage .reports-c-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "inventory"
      "delivery"
      "history";
  }

  #reportsPage .reports-c-delivery {
    position: static;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
  }

  #reportsPage .reports-c-delivery > .reports-c-section-heading {
    grid-column: 1 / -1;
  }

  #reportsPage .reports-c-delivery-form {
    padding-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #reportsPage .reports-c-delivery-mode,
  #reportsPage .reports-c-schedule-fields {
    grid-column: 1 / -1;
  }

  #reportsPage .reports-c-generate {
    grid-column: 1 / -1;
  }

  #reportsPage .reports-c-note,
  #reportsPage .reports-c-delivery-status {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  #reportsPage .reports-model-c {
    padding: 14px;
  }

  #reportsPage .reports-c-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #reportsPage .reports-c-layout {
    grid-template-columns: 1fr;
  }

  #reportsPage .reports-c-delivery {
    position: static;
  }

  #reportsPage .reports-c-template-list {
    max-height: 290px;
  }

  #reportsPage .reports-c-delivery {
    grid-column: auto;
    display: block;
  }

  #reportsPage .reports-c-schedule-table {
    min-width: 840px;
  }
}

@media (max-width: 680px) {
  #reportsPage .reports-model-c {
    min-height: 100dvh;
    padding: 12px;
  }

  #reportsPage .reports-c-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #reportsPage .reports-c-page-header h1 {
    font-size: 21px;
  }

  #reportsPage .reports-c-header-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  #reportsPage .reports-c-header-actions .reports-c-button {
    width: 100%;
    flex: 0 0 auto;
  }

  #reportsPage .reports-c-schedule-fields {
    grid-template-columns: 1fr;
  }

  #reportsPage .reports-c-summary {
    grid-template-columns: 1fr;
  }

  #reportsPage .reports-c-summary article {
    min-height: 90px;
  }

  #reportsPage .reports-c-toolbar {
    grid-template-columns: 1fr;
  }

  #reportsPage .reports-c-toolbar .reports-c-button {
    min-height: 44px;
  }

  #reportsPage .reports-c-table {
    min-width: 0;
    table-layout: auto;
  }

  #reportsPage .reports-c-table thead {
    display: none;
  }

  #reportsPage .reports-c-table tbody,
  #reportsPage .reports-c-table tr,
  #reportsPage .reports-c-table td {
    display: block;
  }

  #reportsPage .reports-c-table tr {
    padding: 10px;
    border-bottom: 1px solid var(--reports-border);
  }

  #reportsPage .reports-c-table td {
    min-height: 32px;
    padding: 7px 0 7px 108px;
    position: relative;
    border: 0;
  }

  #reportsPage .reports-c-table td::before {
    content: attr(data-label);
    width: 96px;
    position: absolute;
    left: 0;
    color: var(--reports-muted);
    font-size: 10px;
    font-weight: 700;
  }

  #reportsPage .reports-c-row-actions {
    justify-content: flex-start;
  }

  #reportsPage .reports-c-table-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px;
  }

  #reportsPage .reports-c-button,
  #reportsPage .reports-c-icon-button,
  #reportsPage .reports-c-search,
  #reportsPage .reports-c-toolbar select,
  #reportsPage .reports-c-delivery-form :is(select, input) {
    min-height: 44px;
  }
}

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

/* Remote Access Model A with session-evidence drawer */
#remoteAccessPage .remote-summary-grid {
  gap: 12px;
  margin-bottom: 12px;
}

#remoteAccessPage .remote-summary-grid .device-summary-card {
  display: flex;
  min-width: 0;
  min-height: 104px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
}

#remoteAccessPage .remote-summary-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 8px;
  color: var(--primary, #2563eb);
  background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
}

#remoteAccessPage .remote-summary-icon svg {
  width: 21px;
  height: 21px;
}

#remoteAccessPage .remote-summary-grid .device-summary-card > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#remoteAccessPage .remote-summary-grid strong {
  font-size: 1.5rem;
  line-height: 1;
}

#remoteAccessPage .remote-model-a-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#remoteAccessPage .remote-device-list,
#remoteAccessPage .remote-session-panel,
#remoteAccessPage .session-history {
  min-width: 0;
  border-radius: 8px;
}

#remoteAccessPage .remote-device-list {
  display: block;
  overflow: hidden;
}

#remoteAccessPage .remote-list-head {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, rgba(120, 150, 170, 0.2));
}

#remoteAccessPage .remote-list-head > div {
  min-width: 0;
}

.history-window-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.history-window-actions > span {
  color: var(--muted-text, #64748b);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.history-window-actions button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.history-window-actions button svg {
  width: 15px;
  height: 15px;
}

#remoteAccessPage .remote-device-search {
  position: relative;
  flex: 0 1 300px;
}

#remoteAccessPage .remote-device-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

#remoteAccessPage .remote-device-controls select {
  min-width: 132px;
  min-height: 38px;
}

#remoteAccessPage .remote-device-name {
  text-decoration: none;
}

#remoteAccessPage .remote-device-name.is-unavailable {
  cursor: default;
  opacity: 0.62;
}

#remoteAccessPage .remote-row-connect {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--primary, #2563eb);
  border-radius: 5px;
  color: #fff;
  background: var(--primary, #2563eb);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

#remoteAccessPage .remote-row-connect:disabled {
  border-color: var(--border-color, rgba(120, 150, 170, 0.24));
  color: var(--muted-text, #64748b);
  background: transparent;
  cursor: not-allowed;
}

#remoteAccessPage .remote-row-connect svg {
  width: 14px;
  height: 14px;
}

#remoteAccessPage .remote-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

#remoteAccessPage .remote-status-dot.online { background: #22c55e; }
#remoteAccessPage .remote-status-dot.offline { background: #ef4444; }
#remoteAccessPage .remote-status-dot.setup { background: #f59e0b; }

#remoteAccessPage .remote-device-search > span {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}

#remoteAccessPage .remote-device-search svg {
  width: 16px;
  height: 16px;
}

#remoteAccessPage .remote-device-search input {
  width: 100%;
  min-height: 38px;
  padding-left: 35px;
}

#remoteAccessPage .remote-device-table-wrap,
#remoteAccessPage .remote-audit-table-wrap {
  width: 100%;
  overflow: auto;
}

#remoteAccessPage .remote-device-table,
#remoteAccessPage .session-history table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

#remoteAccessPage .remote-device-table th,
#remoteAccessPage .remote-device-table td,
#remoteAccessPage .session-history th,
#remoteAccessPage .session-history td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color, rgba(120, 150, 170, 0.18));
}

#remoteAccessPage .remote-device-table th,
#remoteAccessPage .session-history th {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

#remoteAccessPage .remote-device-table tbody tr {
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

#remoteAccessPage .remote-device-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary, #2563eb) 5%, transparent);
}

#remoteAccessPage .remote-device-table tbody tr.selected {
  background: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--primary, #2563eb);
}

#remoteAccessPage .remote-device-name {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

#remoteAccessPage .remote-device-name svg {
  width: 18px;
  height: 18px;
  color: var(--primary, #2563eb);
}

#remoteAccessPage .remote-row-action,
#remoteAccessPage .remote-evidence-button {
  display: inline-flex;
  min-width: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#remoteAccessPage .remote-row-action svg,
#remoteAccessPage .remote-evidence-button svg {
  width: 16px;
  height: 16px;
}

#remoteAccessPage .remote-session-panel {
  position: sticky;
  top: 58px;
  overflow: hidden;
}

#remoteAccessPage .mesh-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, rgba(120, 150, 170, 0.2));
}

#remoteAccessPage .remote-selected-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 8px;
  color: var(--primary, #2563eb);
  background: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent);
}

#remoteAccessPage .remote-selected-icon svg {
  width: 19px;
  height: 19px;
}

#remoteAccessPage .remote-session-details {
  margin: 0;
  padding: 4px 16px 12px;
}

#remoteAccessPage .remote-session-details > div,
#remoteEvidenceDrawer dl > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color, rgba(120, 150, 170, 0.18));
}

#remoteAccessPage .remote-session-details dd,
#remoteEvidenceDrawer dd {
  min-width: 0;
  margin: 0;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

#remoteAccessPage .remote-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px 16px;
}

#remoteAccessPage .remote-action-grid .primary-action,
#remoteAccessPage .remote-action-grid > .panel-action-status,
#remoteAccessPage .remote-action-grid .remote-command-status,
#remoteAccessPage .remote-action-grid .remote-session-end-action {
  grid-column: 1 / -1;
}

#remoteAccessPage .remote-action-grid .remote-session-launch {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

#remoteAccessPage .remote-action-grid .remote-session-launch.is-launching {
  cursor: progress;
  opacity: 0.78;
}

#remoteAccessPage .remote-action-grid button,
#remoteAccessPage .remote-action-grid .remote-action-link {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  white-space: normal;
  text-align: center;
}

#remoteAccessPage .remote-action-grid svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

#remoteAccessPage .remote-security {
  margin: 0 16px 16px;
  padding: 14px;
  border-radius: 8px;
}

#remoteAccessPage .remote-security-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#remoteAccessPage .remote-security-heading h3 {
  margin: 0;
}

#remoteAccessPage .remote-security-heading svg {
  width: 18px;
  height: 18px;
}

#remoteAccessPage .remote-security-list {
  display: grid;
  gap: 9px;
}

#remoteAccessPage .remote-security-list p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

#remoteAccessPage .session-history {
  grid-column: 1 / -1;
  overflow: hidden;
}

#remoteEvidenceScrim {
  position: fixed;
  inset: 0;
  z-index: 1190;
  opacity: 0;
  visibility: hidden;
  border: 0;
  background: rgba(8, 18, 28, 0.5);
  transition: opacity 200ms ease, visibility 200ms ease;
}

#remoteEvidenceScrim:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

#remoteEvidenceDrawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1200;
  width: min(460px, 100vw);
  height: 100dvh;
  overflow: auto;
  background: var(--panel-bg, #fff);
  border-left: 1px solid var(--border-color, rgba(120, 150, 170, 0.2));
  box-shadow: -16px 0 36px rgba(4, 18, 28, 0.22);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 240ms ease;
}

#remoteEvidenceDrawer.open {
  visibility: visible;
  transform: translateX(0);
}

#remoteEvidenceDrawer > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  background: inherit;
  border-bottom: 1px solid var(--border-color, rgba(120, 150, 170, 0.2));
}

#remoteEvidenceDrawer > header h3,
#remoteEvidenceDrawer > header p {
  margin: 4px 0 0;
}

#remoteEvidenceDrawer > header button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
}

#remoteEvidenceDrawer > header svg {
  width: 17px;
  height: 17px;
}

#remoteEvidenceDrawerBody {
  display: grid;
  gap: 16px;
  padding: 18px;
}

#remoteEvidenceDrawer .remote-evidence-summary,
#remoteEvidenceDrawer .remote-evidence-timeline {
  padding: 14px;
  border: 1px solid var(--border-color, rgba(120, 150, 170, 0.2));
  border-radius: 8px;
}

#remoteEvidenceDrawer .remote-evidence-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#remoteEvidenceDrawer dl {
  margin: 0;
}

#remoteEvidenceDrawer .remote-evidence-timeline h4 {
  margin: 0 0 12px;
}

#remoteEvidenceDrawer .remote-evidence-timeline article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color, rgba(120, 150, 170, 0.16));
}

#remoteEvidenceDrawer .remote-evidence-timeline article:last-child {
  border-bottom: 0;
}

#remoteEvidenceDrawer .remote-evidence-timeline svg {
  width: 17px;
  height: 17px;
  color: var(--primary, #2563eb);
}

#remoteEvidenceDrawer .remote-evidence-timeline small,
#remoteEvidenceDrawer .remote-evidence-timeline p {
  display: block;
  margin: 3px 0 0;
}

#remoteEvidenceDrawer .remote-evidence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#remoteEvidenceDrawer .remote-evidence-actions button,
#remoteEvidenceDrawer .remote-evidence-actions a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

html[data-theme="light"] #remoteAccessPage :is(.remote-device-list, .remote-session-panel, .session-history),
html[data-theme="light"] #remoteEvidenceDrawer {
  color: #152737;
  background: #fff;
}

html[data-theme="light"] #remoteAccessPage :is(.remote-list-head h3, .mesh-status h3) {
  color: #152737;
}

html[data-theme="light"] #remoteAccessPage :is(.remote-list-head p, .mesh-status p) {
  color: #5f7485;
}

html[data-theme="dark"] #remoteAccessPage :is(.remote-device-list, .remote-session-panel, .session-history),
html[data-theme="dark"] #remoteEvidenceDrawer {
  color: #e8f1f5;
  background: #071e27;
}

@media (max-width: 1180px) {
  #remoteAccessPage .remote-model-a-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  #remoteAccessPage .remote-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #remoteAccessPage .remote-model-a-layout {
    grid-template-columns: 1fr;
  }

  #remoteAccessPage .remote-session-panel {
    position: static;
  }

  #remoteAccessPage .session-history {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  #remoteAccessPage .remote-workspace {
    padding: 10px;
  }

  #remoteAccessPage .remote-summary-grid {
    gap: 8px;
  }

  #remoteAccessPage .remote-summary-grid .device-summary-card {
    min-height: 92px;
    padding: 12px;
  }

  #remoteAccessPage .remote-summary-grid strong {
    font-size: 1.3rem;
  }

  #remoteAccessPage .remote-list-head {
    align-items: stretch;
    flex-direction: column;
  }

  #remoteAccessPage .remote-device-search {
    width: 100%;
    flex-basis: auto;
  }

  #remoteAccessPage .remote-device-controls {
    align-items: stretch;
    flex-direction: column;
  }

  #remoteAccessPage .remote-device-controls select {
    width: 100%;
  }

  #remoteAccessPage .remote-action-grid {
    grid-template-columns: 1fr 1fr;
  }

  #remoteEvidenceDrawer {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  #remoteAccessPage .remote-device-table tbody tr,
  #remoteEvidenceDrawer,
  #remoteEvidenceScrim {
    transition: none;
  }
}

/* Remote Access and Agent Management layout reliability */
#remoteAccessPage .remote-model-a-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

#remoteAccessPage .remote-session-panel {
  position: static;
  top: auto;
  align-self: start;
  overflow: hidden;
}

#remoteAccessPage .mesh-status > div {
  min-width: 0;
}

#remoteAccessPage .mesh-status h3,
#remoteAccessPage .mesh-status p {
  overflow-wrap: break-word;
  word-break: normal;
}

#remoteAccessPage .remote-session-details > div {
  grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1.3fr);
}

#remoteAccessPage .remote-session-details dd {
  overflow-wrap: break-word;
  word-break: normal;
}

#remoteAccessPage .remote-action-grid {
  grid-template-columns: repeat(3, minmax(104px, 1fr));
}

#remoteAccessPage .remote-action-grid button,
#remoteAccessPage .remote-action-grid .remote-action-link {
  line-height: 1.25;
}

#remoteAccessPage .remote-security-list p {
  min-width: 0;
  line-height: 1.4;
}

#remoteAccessPage .remote-security-list .status {
  min-width: 54px;
  flex: 0 0 auto;
  white-space: nowrap;
  word-break: normal;
}

#agentManagementPage .agent-table-panel {
  grid-row: 1 / span 2;
}

#agentManagementPage .agent-side-panel {
  grid-row: 1;
}

#agentManagementPage .agent-deployment-panel {
  grid-row: 2;
}

#agentManagementPage .agent-failure-panel {
  grid-row: 3;
}

#agentManagementPage .agent-command-history {
  grid-row: 4;
}

#agentManagementPage .agent-side-panel,
#agentManagementPage .agent-deployment-panel,
#agentManagementPage .agent-failure-panel,
#agentManagementPage .agent-command-history {
  align-self: start;
}

#agentManagementPage .agent-ops-primary,
#agentManagementPage .agent-ops-sidebar {
  display: grid;
  min-width: 0;
  gap: 12px;
  align-content: start;
}

#agentManagementPage .agent-ops-main > .agent-ops-primary {
  grid-column: 1;
}

#agentManagementPage .agent-ops-main > .agent-ops-sidebar {
  grid-column: 2;
}

#agentManagementPage .agent-ops-main :is(
  .agent-table-panel,
  .agent-side-panel,
  .agent-deployment-panel,
  .agent-failure-panel
) {
  grid-column: auto;
  grid-row: auto;
  border: 1px solid var(--agent-border);
  border-radius: 7px;
  background: var(--agent-surface);
  color: var(--agent-text);
  box-shadow: none;
}

#agentManagementPage .agent-ops-main > .agent-command-history {
  grid-column: 1 / -1;
  grid-row: auto;
}

@media (max-width: 1320px) {
  #remoteAccessPage .remote-model-a-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  #remoteAccessPage .remote-model-a-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #remoteAccessPage .remote-session-panel,
  #remoteAccessPage .session-history {
    grid-column: 1;
  }
}

@media (max-width: 1280px) {
  #agentManagementPage .agent-ops-main > .agent-ops-primary,
  #agentManagementPage .agent-ops-main > .agent-ops-sidebar,
  #agentManagementPage .agent-ops-main > .agent-command-history {
    grid-column: 1;
    grid-row: auto;
  }

  #agentManagementPage .agent-table-panel,
  #agentManagementPage .agent-side-panel,
  #agentManagementPage .agent-deployment-panel,
  #agentManagementPage .agent-failure-panel,
  #agentManagementPage .agent-command-history {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  .history-window-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #remoteAccessPage .remote-session-details {
    padding-inline: 12px;
  }

  #remoteAccessPage .remote-session-details > div {
    grid-template-columns: minmax(76px, 0.62fr) minmax(0, 1.38fr);
    gap: 8px;
  }

  #remoteAccessPage .remote-session-details dd {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #remoteAccessPage .remote-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 12px;
  }

  #remoteAccessPage .remote-action-grid > :last-child:nth-child(even) {
    grid-column: 1 / -1;
  }

  #remoteAccessPage .remote-security {
    margin-inline: 12px;
  }
}

/* Plain production login shell */
.login-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 96px 20px 40px;
  overflow: auto;
  isolation: isolate;
  background:
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(255, 255, 255, 0.035) 72px),
    repeating-linear-gradient(0deg, transparent 0 71px, rgba(255, 255, 255, 0.035) 72px),
    #092433;
}

.login-page .background-scene,
.login-page .brand-block {
  display: none;
}

.login-accent {
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

.login-accent-left {
  left: 0;
  bottom: 0;
  width: 34vw;
  min-width: 420px;
  height: 36vh;
  background: #0f6e78;
  clip-path: polygon(0 34%, 100% 0, 72% 100%, 0 100%);
}

.login-accent-right {
  top: 0;
  right: 0;
  width: 31vw;
  min-width: 380px;
  height: 34vh;
  background: #204bb5;
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 66%);
}

.login-topbar {
  position: fixed;
  z-index: 2;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 25, 36, 0.84);
  color: #fff;
}

.login-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
}

.login-wordmark img {
  width: 34px;
  height: 34px;
}

.login-wordmark strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-wordmark span {
  color: #76a8ff;
}

.login-topbar .theme-mode-toggle {
  flex-basis: 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.login-card {
  grid-column: 1;
  box-sizing: border-box;
  width: min(100%, 448px);
  max-width: calc(100vw - 40px);
  min-width: 0;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #102433;
  box-shadow: none;
  perspective: 1200px;
}

.login-card-inner {
  display: grid;
  width: 100%;
  min-height: 572px;
  transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-card[data-face="mfa"] .login-card-inner {
  transform: rotateY(180deg);
}

.login-card-face {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  align-self: stretch;
  padding: 38px;
  overflow: hidden;
  border: 1px solid #d8e3ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.login-card-back {
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
}

.login-card-face[aria-hidden="true"] {
  pointer-events: none;
}

.login-card :where(form, .field, .input-wrap, .mfa-panel) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.login-card .input-wrap,
.login-card input:not([type="checkbox"]),
.login-card .sign-in {
  box-sizing: border-box;
  max-width: 100%;
}

.login-card .login-logo {
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.login-card .login-logo img {
  width: 58px;
  height: 58px;
}

.login-card-front > h2 {
  margin: 0;
  color: #102433;
  font-size: 27px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.login-card .signin-copy {
  margin: 8px 0 28px;
  color: #617687;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.login-logo-mfa {
  margin-bottom: 8px !important;
}

.mfa-card-kicker {
  margin: 0 0 14px;
  color: #1769e8;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.login-card-back .mfa-panel {
  flex: 1;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.login-card-back .mfa-head strong {
  color: #102433;
  font-size: 20px;
}

.login-card-back .mfa-head span {
  color: #617687;
  font-size: 13px;
  line-height: 1.45;
}

.login-card-back .mfa-code-field > span:first-child {
  color: #30495b;
}

.login-card-back .mfa-back {
  border-color: #bacbd6;
  background: #fff;
  color: #1769e8;
}

.login-card-back .mfa-back:hover {
  border-color: #1769e8;
  background: #f1f6ff;
}

.login-card-back .login-security-note {
  margin-top: 16px;
}

body[data-theme="dark"] .login-card-back :is(.mfa-card-kicker, .mfa-head strong) {
  color: #1769e8;
}

body[data-theme="dark"] .login-card-back :is(.mfa-head span, .login-security-note) {
  color: #526b7e !important;
}

body[data-theme="dark"] .login-card-back .mfa-back {
  border-color: #bacbd6;
  background: #fff;
  color: #1769e8;
}

.login-card .login-rule {
  display: none;
}

.login-card form {
  gap: 18px;
}

.login-card .field {
  gap: 7px;
}

.login-card .field > span:first-child,
.login-card .remember,
.login-card .form-row a {
  color: #30495b;
  font-size: 14px;
  font-weight: 600;
}

.login-card input:not([type="checkbox"]) {
  height: 48px;
  border-color: #bacbd6;
  background: #f8fafc;
  color: #102433;
}

.login-card .sign-in {
  min-height: 48px;
  margin-top: 4px;
  background: #1769e8;
  font-size: 16px;
}

.login-card .form-message:empty {
  min-height: 0;
}

.login-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  color: #526b7e !important;
  font-size: 13px;
}

.login-security-note span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a36a;
}

body[data-theme="light"] .login-page {
  background:
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(23, 105, 232, 0.035) 72px),
    repeating-linear-gradient(0deg, transparent 0 71px, rgba(23, 105, 232, 0.035) 72px),
    #edf3f7;
}

body[data-theme="light"] .login-accent-left {
  background: #d7eee9;
}

body[data-theme="light"] .login-accent-right {
  background: #dce9fb;
}

body[data-theme="light"] .login-topbar {
  border-bottom-color: #d7e1e8;
  background: rgba(255, 255, 255, 0.92);
  color: #102433;
}

body[data-theme="light"] .login-topbar .theme-mode-toggle {
  border-color: #cbdde6;
  background: #fff;
  color: #415a6c;
}

@media (max-width: 560px) {
  .login-page {
    align-content: start;
    padding: 82px 16px 26px;
  }

  .login-topbar {
    height: 58px;
    padding: 0 16px;
  }

  .login-wordmark {
    font-size: 15px;
  }

  .login-wordmark img {
    width: 30px;
    height: 30px;
  }

  .login-accent-left,
  .login-accent-right {
    width: 70vw;
    min-width: 0;
  }

  .login-card {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .login-card-inner {
    min-height: 574px;
  }

  .login-card-face {
    padding: 28px 22px;
  }

  .login-card input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
  }

  .login-card-front > h2 {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card-inner {
    transition: opacity 120ms ease;
  }

  .login-card[data-face="mfa"] .login-card-inner {
    transform: none;
  }

  .login-card[data-face="signin"] .login-card-back,
  .login-card[data-face="mfa"] .login-card-front {
    visibility: hidden;
  }

  .login-card[data-face="mfa"] .login-card-back {
    transform: none;
  }
}

/* Keep the wide endpoint inventory report readable on compact screens. */
#reportsPage .reports-c-table.reports-c-inventory-table {
  min-width: 1660px;
  table-layout: auto;
}

#reportsPage .reports-c-table.reports-c-inventory-table thead {
  display: table-header-group;
}

#reportsPage .reports-c-table.reports-c-inventory-table tbody {
  display: table-row-group;
}

#reportsPage .reports-c-table.reports-c-inventory-table tr {
  display: table-row;
  padding: 0;
}

#reportsPage .reports-c-table.reports-c-inventory-table th,
#reportsPage .reports-c-table.reports-c-inventory-table td {
  display: table-cell;
  padding: 11px 10px;
  white-space: normal;
}

#reportsPage .reports-c-table.reports-c-inventory-table td::before {
  content: none;
}

/* The shared mode switch follows the active page's existing top bar. */
.management-mode-control {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  flex: 0 0 auto;
  margin-right: auto;
  color: #dcebf0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.management-mode-control[hidden] { display: none; }
.management-mode-control > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.management-mode-track {
  display: block;
  position: relative;
  width: 36px;
  height: 20px;
  flex: 0 0 36px;
  border: 1px solid #7794a3;
  border-radius: 12px;
  background: #344b58;
}
.management-mode-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 150ms ease;
}
.management-mode-control > input:checked + .management-mode-track { background: #087f77; border-color: #3dd4c4; }
.management-mode-control > input:checked + .management-mode-track::after { transform: translateX(16px); }
.management-mode-control > input:focus-visible + .management-mode-track { outline: 2px solid #51b3ff; outline-offset: 3px; }
.management-mode-control:has(input:disabled) { cursor: not-allowed; opacity: 0.65; }
body[data-theme="light"] .management-mode-control { color: #173545; }
@media (prefers-reduced-motion: reduce) {
  .management-mode-track::after { transition: none; }
}
@media (max-width: 760px) {
  .dense-topbar:has(.management-mode-control),
  .devices-topbar:has(.management-mode-control),
  .topbar-tools:has(.management-mode-control) { flex-wrap: wrap; }
  .management-mode-control { min-width: 180px; }
}

/* Mobile BYOD pilot */
.mobile-device-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mobile-device-actions .mobile-wipe-button { margin-left: auto; }
@media (max-width: 640px) {
  .mobile-device-actions > button { flex: 1 1 calc(50% - 8px); }
  .mobile-device-actions .mobile-wipe-button { margin-left: 0; }
}
.mobile-pilot-page {
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  background: var(--page-bg, #06151c);
}

.mobile-pilot-page[hidden] { display: none; }
.mobile-pilot-page {
  --mobile-surface: #0b232d;
  --mobile-border: #284652;
  --mobile-muted: #9db6bf;
  --mobile-neutral: #405763;
  color: #e9f1f4;
}
body[data-theme="light"] .mobile-pilot-page {
  --mobile-surface: #fff;
  --mobile-border: #d5e2e8;
  --mobile-muted: #526d79;
  --mobile-neutral: #d8e4e8;
  background: #f3f7f9;
  color: #17313f;
}
.mobile-overview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mobile-pilot-page .mobile-overview-stamp { margin: 0 0 18px; color: var(--mobile-muted); font-size: 12px; }
.mobile-ownership-summary { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); margin-bottom: 12px; border: 1px solid var(--mobile-border); background: var(--mobile-surface); }
.mobile-ownership-summary > div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--mobile-border); }
.mobile-ownership-summary > div:last-child { border-right: 0; }
.mobile-ownership-summary span, .mobile-ownership-summary small { display: block; color: var(--mobile-muted); font-size: 11px; }
.mobile-ownership-summary strong { display: block; margin: 5px 0; font-size: 22px; }
.mobile-pilot-page .mobile-pilot-summary { background: var(--mobile-surface); border-color: var(--mobile-border); }
.mobile-pilot-summary small { display: block; margin-top: 7px; color: var(--mobile-muted); font-size: 11px; line-height: 1.5; }
.mobile-overview-insights { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); margin: 22px 0; border-block: 1px solid var(--mobile-border); }
.mobile-overview-insights > section { min-width: 0; padding: 22px 20px; }
.mobile-overview-insights > section + section { border-left: 1px solid var(--mobile-border); }
.mobile-overview-insights header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 38px; margin-bottom: 18px; }
.mobile-overview-insights h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
.mobile-overview-insights p, #mobileAppCount { font-size: 12px; color: var(--mobile-muted); }
.mobile-policy-chart { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 28px; min-height: 190px; }
.mobile-policy-donut { width: 172px; height: 172px; border-radius: 50%; padding: 16px; background: var(--mobile-neutral); }
.mobile-policy-donut > div { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: var(--page-bg, #06151c); border-radius: 50%; }
body[data-theme="light"] .mobile-policy-donut > div { background: #f3f7f9; }
.mobile-policy-donut strong { font-size: 34px; font-variant-numeric: tabular-nums; }
.mobile-policy-donut span { font-size: 11px; color: var(--mobile-muted); }
.mobile-policy-legend { margin: 0; min-width: 0; }
.mobile-policy-legend > div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mobile-border); font-size: 12px; }
.mobile-policy-legend dt { display: flex; align-items: center; gap: 8px; }
.mobile-policy-legend dd { margin: 0; font-weight: 700; }
.mobile-policy-legend i { display: block; flex: 0 0 8px; height: 8px; border-radius: 50%; }
.mobile-policy-legend .current { background: #18baa8; }
.mobile-policy-legend .pending { background: #eeb34e; }
.mobile-policy-legend .unreported { background: #647b87; }
.mobile-policy-note { margin: 18px 0 8px; }
.mobile-app-table-wrap { overflow-x: auto; min-height: 154px; }
.mobile-managed-apps table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mobile-managed-apps th { text-align: left; color: var(--mobile-muted); font-size: 11px; font-weight: 500; }
.mobile-managed-apps th, .mobile-managed-apps td { padding: 14px 8px; border-bottom: 1px solid var(--mobile-border); overflow-wrap: anywhere; }
.mobile-managed-apps small { color: var(--mobile-muted); }
.mobile-policy-progress { margin-top: 22px; font-size: 12px; color: var(--mobile-muted); }
.mobile-policy-progress progress { display: block; appearance: none; width: 100%; height: 7px; margin-top: 12px; border: none; border-radius: 3px; overflow: hidden; background: var(--mobile-neutral); }
.mobile-policy-progress progress::-webkit-progress-bar { background: var(--mobile-neutral); }
.mobile-policy-progress progress::-webkit-progress-value { background: #18baa8; }
.mobile-usage-traffic { margin: 0 0 22px; padding: 20px; border: 1px solid var(--mobile-border); border-radius: 6px; background: var(--mobile-surface); }
.mobile-usage-traffic > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.mobile-usage-traffic h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: 0; }
.mobile-usage-traffic header p { margin: 0; color: var(--mobile-muted); font-size: 12px; }
.mobile-traffic-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--mobile-border); }
.mobile-traffic-metrics > div { min-width: 0; padding: 16px; border-right: 1px solid var(--mobile-border); }
.mobile-traffic-metrics > div:last-child { border-right: 0; }
.mobile-traffic-metrics span, .mobile-traffic-metrics small { display: block; color: var(--mobile-muted); font-size: 11px; }
.mobile-traffic-metrics strong { display: block; margin: 5px 0; font-size: 22px; font-variant-numeric: tabular-nums; }
.mobile-traffic-table-wrap { overflow-x: auto; margin-top: 16px; }
.mobile-traffic-table-wrap table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; }
.mobile-traffic-table-wrap th { color: var(--mobile-muted); font-size: 11px; font-weight: 500; text-align: left; }
.mobile-traffic-table-wrap th, .mobile-traffic-table-wrap td { padding: 12px 10px; border-bottom: 1px solid var(--mobile-border); overflow-wrap: anywhere; }
.mobile-pilot-page .mobile-device-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
.mobile-table-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.mobile-table-filters input, .mobile-table-filters select, .mobile-table-pagination select { min-width: 0; max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--mobile-border); border-radius: 4px; background: var(--mobile-surface); color: inherit; font-size: 12px; }
.mobile-table-filters input { flex: 1 1 220px; }
.mobile-table-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; color: var(--mobile-muted); font-size: 12px; }
.mobile-table-pagination > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mobile-table-pagination button, #mobileCloseDialog { min-width: 36px; min-height: 36px; }
.mobile-table-pagination button:disabled { opacity: .4; cursor: default; }
.mobile-pilot-page .mobile-device-panel table { min-width: 1060px; }
.mobile-pilot-page .mobile-device-panel td { overflow-wrap: anywhere; }
.mobile-pilot-page .mobile-device-panel th:nth-child(4) { width: 12%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(5) { width: 15%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(7) { width: 13%; }
.mobile-settings-dialog { width: min(700px, calc(100% - 24px)); max-height: calc(100% - 40px); padding: 20px; background: var(--mobile-surface); color: inherit; border: 1px solid var(--mobile-border); border-radius: 6px; }
.mobile-settings-dialog::backdrop { background: #0009; }
.mobile-settings-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.mobile-settings-dialog h2 { font-size: 18px; margin: 0; }
.mobile-settings-dialog .mobile-pilot-workspace { display: block; margin: 0; }
.mobile-settings-dialog .panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
@media (max-width: 1150px) {
  .mobile-overview-insights { grid-template-columns: 1fr; }
  .mobile-overview-insights > section + section { border-left: 0; border-top: 1px solid var(--mobile-border); }
}
@media (max-width: 680px) {
  .mobile-ownership-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-ownership-summary > div:nth-child(2) { border-right: 0; }
  .mobile-ownership-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--mobile-border); }
  .mobile-pilot-content .page-heading-row { flex-wrap: wrap; }
  .mobile-policy-chart { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .mobile-policy-legend { width: 100%; }
  .mobile-overview-insights > section { padding: 18px 0; }
  .mobile-overview-insights header { flex-wrap: wrap; }
  .mobile-table-filters select { flex: 1 1 120px; }
  .mobile-app-table-wrap table { min-width: 390px; }
  .mobile-usage-traffic { padding: 16px 0; border-inline: 0; }
  .mobile-usage-traffic > header { padding-inline: 0; flex-wrap: wrap; }
  .mobile-traffic-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-traffic-metrics > div:nth-child(2) { border-right: 0; }
  .mobile-traffic-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--mobile-border); }
}
.mobile-pilot-main { min-width: 0; }
.mobile-pilot-content { padding: 16px; }
.mobile-pilot-content .page-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mobile-pilot-content .page-heading-row h1 { margin: 0 0 4px; font-size: 24px; letter-spacing: 0; }
.mobile-pilot-content .page-heading-row p,
.mobile-pilot-page .panel header p { margin: 0; color: #8fb0be; }
.mobile-pilot-summary { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); border: 1px solid #1c4657; margin-bottom: 12px; }
.mobile-pilot-summary div { padding: 14px 16px; border-right: 1px solid #1c4657; }
.mobile-pilot-summary div:last-child { border-right: 0; }
.mobile-pilot-summary span { display: block; color: #8fb0be; font-size: 12px; }
.mobile-pilot-summary strong { display: block; margin-top: 5px; font-size: 22px; }
.mobile-pilot-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; margin-bottom: 12px; }
.mobile-pilot-page .panel { border-radius: 6px; }
.mobile-pilot-page .panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mobile-pilot-page .panel h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0; }
.mobile-pilot-page .icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
  flex-shrink: 0;
}
.mobile-pilot-page .icon-text-button [data-user-icon],
.mobile-pilot-page .icon-text-button svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.mobile-pilot-page .mobile-enrollment-panel > header { flex-direction: column; }
.mobile-policy-controls { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 1px 24px; margin: 18px 0; }
.mobile-policy-controls > label { min-height: 42px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #173b49; }
.mobile-policy-controls input { width: 17px; height: 17px; accent-color: #14b8a6; }
.mobile-timeout-control { justify-content: space-between; }
.mobile-timeout-control select { min-width: 130px; }
.mobile-policy-panel footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mobile-policy-controls [data-user-icon], .mobile-policy-controls svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mobile-pilot-page .devices-nav a[href="#mobile-policies"]::before { display: none; }
.mobile-pilot-page .devices-nav .mobile-history-nav::before { display: none; }
.mobile-pilot-page .devices-nav .mobile-history-nav [data-user-icon], .mobile-pilot-page .devices-nav .mobile-history-nav svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mobile-pilot-page .devices-nav .mobile-history-nav [data-user-icon], .mobile-pilot-page .devices-nav a[href="#mobile-policies"] [data-user-icon] { margin-right: 8px; }
.mobile-pilot-page .devices-nav .mobile-icon-nav::before { display: none; }
.mobile-pilot-page .devices-nav .mobile-icon-nav > [data-user-icon],
.mobile-pilot-page .devices-nav .mobile-icon-nav > svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.6; margin-right: 8px; }
.mobile-ownership-summary:has(.mobile-metric-card),
.mobile-pilot-summary:has(.mobile-metric-card) { gap: 10px; border: 0; background: transparent; }
.mobile-ownership-summary > .mobile-metric-card,
.mobile-pilot-summary > .mobile-metric-card { position: relative; min-height: 114px; padding: 15px 18px 13px; overflow: hidden; border: 1px solid var(--mobile-border); border-radius: 6px; background: var(--mobile-surface); }
.mobile-ownership-summary > .mobile-metric-card:last-child,
.mobile-pilot-summary > .mobile-metric-card:last-child { border-right: 1px solid var(--mobile-border); }
.mobile-metric-card > span { max-width: calc(100% - 44px); color: var(--mobile-muted); font-size: 12px; font-weight: 600; }
.mobile-metric-card > strong { margin: 5px 0 2px; font-size: 27px; font-variant-numeric: tabular-nums; }
.mobile-metric-card > small { min-height: 17px; margin: 0; }
.mobile-metric-card > i { position: absolute; right: 18px; bottom: 9px; left: 18px; height: 5px; overflow: hidden; border-radius: 4px; background: #173440; }
.mobile-metric-card > i > em { display: block; width: 0; height: 100%; border-radius: inherit; background: #1ed5c0; transition: width .25s ease; }
.mobile-metric-card.blue > i > em { background: #2daaf1; }
.mobile-metric-card.red > i > em { background: #ff526d; }
.mobile-metric-card.amber > i > em { background: #f4bb3c; }
.mobile-metric-icon { position: absolute; top: 15px; right: 15px; display: grid; width: 38px; height: 38px; place-items: center; color: #23d2c3; border: 1px solid #087d84; border-radius: 6px; background: #07313b; }
.mobile-metric-card.green .mobile-metric-icon { color: #35df9a; border-color: #08785d; }
.mobile-metric-card.blue .mobile-metric-icon { color: #35aff5; border-color: #145f89; }
.mobile-metric-card.red .mobile-metric-icon { color: #ff5970; border-color: #793342; }
.mobile-metric-card.amber .mobile-metric-icon { color: #f4bd3c; border-color: #82651b; }
.mobile-metric-icon [data-user-icon], .mobile-metric-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mobile-overview-insights { gap: 10px; margin: 10px 0; border: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mobile-overview-insights > section { min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--mobile-border); border-radius: 6px; background: var(--mobile-surface); }
.mobile-overview-insights > section + section { border: 1px solid var(--mobile-border); }
.mobile-overview-insights > section > header { min-height: 43px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--mobile-border); }
.mobile-overview-insights > section > header h2 { font-size: 15px; }
.mobile-recent-activity header a, .mobile-attention-row a { color: #25b7f4; text-decoration: none; font-size: 12px; }
.mobile-recent-activity header a span, .mobile-attention-row a span { margin-left: 6px; font-size: 19px; vertical-align: -1px; }
.mobile-posture-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 46px; align-items: center; gap: 14px; min-height: 92px; margin: 0 16px; border-bottom: 1px solid var(--mobile-border); }
.mobile-posture-row:last-child { border-bottom: 0; }
.mobile-posture-row > div:first-child strong, .mobile-posture-row > div:first-child small { display: block; }
.mobile-posture-row > div:first-child small { margin-top: 4px; color: var(--mobile-muted); font-size: 11px; line-height: 1.25; }
.mobile-posture-track { display: flex; height: 10px; overflow: hidden; border-radius: 3px; background: #183742; }
.mobile-posture-track i { display: block; width: 0; height: 100%; background: #23cfbc; transition: width .25s ease; }
.mobile-posture-track i.warning { background: #f2b83c; }
.mobile-posture-track i.risk { background: #fa526a; }
.mobile-posture-visual p { display: flex; flex-wrap: wrap; gap: 9px 24px; margin: 10px 0 0; color: var(--mobile-muted); font-size: 11px; }
.mobile-posture-visual p span { display: flex; align-items: center; gap: 6px; }
.mobile-posture-visual p strong { color: inherit; }
.mobile-posture-visual p b { width: 9px; height: 9px; border-radius: 50%; background: #23cfbc; }
.mobile-posture-visual p .amber-dot { background: #f2b83c; }
.mobile-posture-visual p .red-dot { background: #fa526a; }
.mobile-posture-total { text-align: center; }
.mobile-posture-total small { display: block; color: var(--mobile-muted); font-size: 10px; }
.mobile-posture-total strong { display: block; margin-top: 2px; font-size: 19px; }
.mobile-recent-table-wrap { overflow-x: auto; padding: 0 12px 10px; }
.mobile-recent-activity table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12px; }
.mobile-recent-activity th { color: var(--mobile-muted); background: #0c2b37; font-size: 10px; font-weight: 600; text-align: left; }
.mobile-recent-activity th, .mobile-recent-activity td { padding: 10px 12px; border-bottom: 1px solid var(--mobile-border); }
.mobile-activity-status { display: inline-flex; align-items: center; gap: 7px; color: var(--mobile-muted); }
.mobile-activity-status i { width: 10px; height: 10px; border-radius: 50%; background: #35db8c; }
.mobile-activity-status i.offline { background: #ff5870; }
.mobile-activity-status i.attention { background: #f4bb3c; }
.mobile-attention-panel { margin: 0 0 18px; padding: 0; }
.mobile-attention-panel > header { min-height: 43px; margin: 0; padding: 0 16px; align-items: center; border-bottom: 1px solid var(--mobile-border); }
.mobile-attention-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.mobile-attention-panel h2 > span { display: grid; width: 20px; height: 20px; place-items: center; color: white; border-radius: 50%; background: #ff5267; font-size: 12px; }
.mobile-attention-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 112px; align-items: center; gap: 12px; min-height: 53px; padding: 0 18px; border-bottom: 1px solid var(--mobile-border); }
.mobile-attention-row:last-child { border-bottom: 0; }
.mobile-attention-row > strong { color: #ff5267; font-size: 18px; }
.mobile-attention-row:nth-child(3) > strong, .mobile-attention-row:nth-child(4) > strong { color: #f4b83c; }
.mobile-attention-row > span { color: var(--mobile-muted); font-size: 12px; }
.mobile-attention-row > a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; color: #20d0c0; border: 1px solid #0d9d94; border-radius: 4px; }
.mobile-overview-legacy-data[hidden] { display: none !important; }
@media (max-width: 1150px) {
  .mobile-overview-insights { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .mobile-ownership-summary > .mobile-metric-card,
  .mobile-pilot-summary > .mobile-metric-card { border: 1px solid var(--mobile-border); }
  .mobile-posture-row { grid-template-columns: 82px minmax(0, 1fr) 40px; gap: 9px; margin: 0 12px; }
  .mobile-posture-visual p { gap: 7px 12px; }
  .mobile-attention-row { grid-template-columns: 30px minmax(0, 1fr); padding: 8px 14px; }
  .mobile-attention-row > a { grid-column: 2; justify-self: start; min-width: 104px; }
}
#mobileHistoryView { min-width: 0; }
.mobile-history-filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.mobile-history-filters input, .mobile-history-filters select { background: var(--mobile-surface); color: inherit; border: 1px solid var(--mobile-border); border-radius: 4px; min-height: 36px; padding: 7px 10px; min-width: 0; max-width: 100%; font-size: 12px; }
.mobile-history-filters input[type="search"] { flex: 1 1 210px; }
.mobile-history-filters label { display: grid; gap: 6px; color: var(--mobile-muted); font-size: 11px; }
.mobile-history-filters button { min-height: 36px; }
#mobileHistoryView .mobile-history-table { table-layout: fixed; min-width: 1100px; }
#mobileHistoryView .mobile-history-table th:nth-child(1) { width: 145px; }
#mobileHistoryView .mobile-history-table th:nth-child(2) { width: 145px; }
#mobileHistoryView .mobile-history-table th:nth-child(3) { width: 185px; }
#mobileHistoryView .mobile-history-table th:nth-child(4) { width: 150px; }
#mobileHistoryView .mobile-history-table th:nth-child(5) { width: 155px; }
#mobileHistoryView .mobile-history-table th:last-child { width: 70px; }
#mobileHistoryView [data-mobile-history-detail] { width: 34px; height: 32px; padding: 6px; justify-content: center; }
#mobileHistoryView .status { white-space: nowrap; }
#mobileHistoryView .mobile-history-table td { overflow-wrap: anywhere; vertical-align: top; line-height: 1.5; }
#mobileHistoryDetails h3 { margin: 22px 0 12px; font-size: 15px; }
#mobileHistoryDetails td { overflow-wrap: anywhere; }
#mobileHistoryDetails .mobile-version-table { min-width: 360px; }
@media (max-width: 600px) {
  .mobile-history-filters > select, .mobile-history-filters label { flex: 1 1 135px; }
  #mobileHistoryDetails > .mobile-version-table { min-width: 0; }
}
.mobile-pilot-page .devices-nav a[href="#mobile-policies"] [data-user-icon], .mobile-pilot-page .devices-nav a[href="#mobile-policies"] svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#mobilePoliciesView .mobile-policies-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 28px; padding: 18px 0 26px; }
#mobilePoliciesEditor .mobile-policy-panel { background: none; border: 0; box-shadow: none; padding: 0; }
#mobilePoliciesView h2 { font-size: 20px; margin: 0 0 12px; }
#mobilePoliciesView h3 { font-size: 15px; margin-top: 22px; }
#mobilePoliciesView .mobile-policy-controls { grid-template-columns: 1fr; gap: 0; }
#mobilePoliciesView .mobile-policy-controls > label { min-height: 61px; border-color: var(--mobile-border); }
#mobilePoliciesView .mobile-policy-controls input { appearance: none; box-sizing: border-box; padding: 0; min-width: 42px; max-width: 42px; width: 42px; min-height: 24px; max-height: 24px; height: 24px; flex: 0 0 42px; margin-left: auto; order: 2; border: 1px solid var(--mobile-muted); border-radius: 14px; background: var(--mobile-neutral); position: relative; cursor: pointer; }
#mobilePoliciesView .mobile-policy-controls input::after { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: white; }
#mobilePoliciesView .mobile-policy-controls input:checked { background: #009f98; border-color: #009f98; }
#mobilePoliciesView .mobile-policy-controls input:checked::after { left: 20px; }
#mobilePoliciesView .mobile-policy-controls input:disabled { opacity: .45; cursor: not-allowed; }
#mobilePoliciesView .mobile-policy-controls input:focus-visible { outline: 2px solid #48bfff; outline-offset: 3px; }
#mobilePoliciesView .mobile-timeout-control select { margin-left: auto; min-height: 36px; min-width: 145px; padding: 6px 10px; border: 1px solid var(--mobile-border); }
#mobilePoliciesView .mobile-policy-scope { border-left: 1px solid var(--mobile-border); padding-left: 26px; min-width: 0; }
#mobilePoliciesView .mobile-enrollment-details > div { border: 0; padding: 8px 0; }
#mobilePoliciesView .mobile-policies-bar { height: 14px; border-radius: 3px; margin: 14px 0; }
#mobilePoliciesLegend, #mobilePolicyDraftState { color: var(--mobile-muted); font-size: 12px; }
#mobilePoliciesSave footer { display: grid; gap: 10px; font-size: 12px; }
#mobilePoliciesSave button { width: 100%; justify-content: center; min-height: 42px; }
#mobilePoliciesSave #mobilePolicyDraftState { text-align: center; }
#mobilePoliciesView .mobile-policy-reports { border-top: 1px solid var(--mobile-border); padding-top: 20px; }
#mobilePoliciesView .mobile-policy-reports > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#mobilePoliciesView .mobile-policy-reports .mobile-table-filters { margin: 0 0 12px; }
#mobilePoliciesView .mobile-policy-reports .mobile-table-filters { display: flex; flex-wrap: wrap; }
#mobilePoliciesView .mobile-policy-reports input { min-width: 160px; max-width: 100%; }
#mobilePoliciesView .mobile-applications-table { min-width: 850px; }
@media (max-width: 1100px) {
  #mobilePoliciesView .mobile-policies-workspace { grid-template-columns: 1fr; }
  #mobilePoliciesView .mobile-policy-scope { border-left: 0; padding-left: 0; border-top: 1px solid var(--mobile-border); padding-top: 24px; }
}
.mobile-enrollment-panel { display: flex; flex-direction: column; }
.mobile-cod-qr { margin-top: 16px; text-align: center; }
.mobile-cod-qr img { display: block; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto 10px; padding: 8px; background: #fff; border: 1px solid #2a6477; }
.mobile-cod-qr strong, .mobile-cod-qr small { display: block; }
.mobile-cod-qr small { margin-top: 5px; color: #8fb0be; line-height: 1.45; }
.mobile-enrollment-code { margin-top: 22px; padding: 14px; border: 1px dashed #2a6477; text-align: center; font: 700 28px/1 monospace; letter-spacing: 4px; }
.mobile-enrollment-panel > p { color: #8fb0be; font-size: 12px; text-align: center; }
.mobile-enrollment-panel > button { margin-top: auto; width: 100%; }
.mobile-device-table-wrap { overflow-x: auto; }
.mobile-device-panel td small { display: block; margin-top: 3px; color: #7898a5; }
.mobile-device-panel table { min-width: 920px; table-layout: fixed; }
.mobile-device-panel th:nth-child(1) { width: 23%; }
.mobile-device-panel th:nth-child(2) { width: 18%; }
.mobile-device-panel th:nth-child(3) { width: 13%; }
.mobile-device-panel th:nth-child(4) { width: 10%; }
.mobile-device-panel th:nth-child(5) { width: 17%; }
.mobile-device-panel th:nth-child(6) { width: 9%; }
.mobile-device-panel th:nth-child(7) { width: 10%; }
.mobile-wipe-button { color: #ff7c87; border-color: #71333a; white-space: nowrap; }

/* The mobile list shares the Overview snapshot and shell. */
.mobile-pilot-page[data-mobile-view="devices"] .mobile-device-panel { margin-top: 24px; }
.mobile-pilot-page .mobile-device-panel th:nth-child(1) { width: 38px; }
.mobile-pilot-page .mobile-device-panel th:nth-child(2) { width: 18%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(3) { width: 20%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(4) { width: 16%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(5) { width: 6%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(6) { width: 10%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(7) { width: 12%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(8) { width: 8%; }
.mobile-pilot-page .mobile-device-panel th:nth-child(9) { width: 10%; }
.mobile-pilot-page .mobile-device-panel td.mobile-mail-id { white-space: normal; overflow-wrap: anywhere; }
.mobile-pilot-page[data-mobile-view="devices"] .mobile-device-panel table { min-width: 1240px; }
.mobile-mail-restriction { display: grid; gap: 12px; border-top: 1px solid var(--mobile-border, #285063); padding-top: 16px; margin-top: 16px; }
.mobile-mail-restriction p { margin: 0; overflow-wrap: anywhere; }
.mobile-mail-restriction label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mobile-mail-restriction input[type="checkbox"] { appearance: auto; width: 16px; height: 16px; }
.mobile-mail-restriction select { width: 100%; min-width: 0; }
.mobile-mail-restriction .icon-text-button { justify-self: start; }
.mobile-pilot-page .mobile-selection-column input { appearance: auto; width: 16px; height: 16px; padding: 0; margin: 0; accent-color: #18baa8; cursor: pointer; vertical-align: middle; }
.mobile-selection-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 12px; margin-bottom: 12px; border-left: 3px solid #18baa8; background: var(--mobile-surface); font-size: 12px; }
.mobile-selection-toolbar > span { margin-right: auto; }
.mobile-selection-toolbar .danger-action { border-color: #71333a; color: #ff9ca8; }
.mobile-selection-toolbar .danger-action:hover:not(:disabled) { border-color: #ff7c87; color: #ffd5da; }
.mobile-device-cell { display: flex; gap: 12px; align-items: center; }
.mobile-device-cell > div { min-width: 0; overflow-wrap: anywhere; }
.mobile-device-cell > svg, .mobile-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; color: var(--mobile-muted); }
.mobile-device-cell > svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mobile-icon { background: currentColor; mask: var(--mobile-icon) center / contain no-repeat; }
.mobile-phone-icon { --mobile-icon: url('/assets/mobile-icons/smartphone.svg'); }
.mobile-eye-icon { --mobile-icon: url('/assets/mobile-icons/eye.svg'); }
.mobile-message-icon { --mobile-icon: url('/assets/mobile-icons/message-square.svg'); }
.mobile-pilot-page .devices-nav a[href="#mobile-devices"],
.mobile-pilot-page .devices-nav a[href="#mobile-cod-devices"],
.mobile-pilot-page .devices-nav a[href="#mobile-byod-devices"] { --nav-icon: url('/assets/mobile-icons/smartphone.svg'); }
.mobile-online-state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; }
.mobile-online-state i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.mobile-online-state .online { background: #34c65a; }
.mobile-online-state .offline { background: #f44f63; }
.mobile-pilot-page .mobile-policy-unreported { color: var(--mobile-muted); background: var(--mobile-surface); }
.mobile-pilot-page .mobile-details-button { min-height: 32px; padding: 5px 8px; border: 1px solid var(--mobile-border); border-radius: 4px; background: var(--mobile-surface); color: inherit; }
.mobile-details-button .mobile-icon { width: 16px; height: 16px; flex-basis: 16px; }
.mobile-report-disclaimer { margin: 8px 0 14px; font-size: 12px; color: var(--mobile-muted); line-height: 1.5; }
.mobile-enrollment-details { margin: 0; }
.mobile-enrollment-details > div { display: grid; grid-template-columns: minmax(110px, .6fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mobile-border); font-size: 13px; }
.mobile-enrollment-details dt { color: var(--mobile-muted); }
.mobile-enrollment-details dd { margin: 0; overflow-wrap: anywhere; }
#mobileDeviceActionResult { font-size: 13px; line-height: 1.5; }
.mobile-app-access { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--mobile-border); }
.mobile-app-access > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mobile-app-access h3 { margin: 0 0 4px; font-size: 15px; }
.mobile-app-access header p { margin: 0; color: var(--mobile-muted); font-size: 12px; }
.mobile-app-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mobile-app-access-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--mobile-border); border-radius: 6px; background: var(--mobile-surface); }
.mobile-app-access-option span { min-width: 0; }
.mobile-app-access-option strong, .mobile-app-access-option small { display: block; overflow-wrap: anywhere; }
.mobile-app-access-option strong { font-size: 13px; }
.mobile-app-access-option small { margin-top: 3px; color: var(--mobile-muted); font-size: 10px; }
.mobile-rustdesk-access { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--mobile-border); }
.mobile-rustdesk-access > header { margin-bottom: 14px; }
.mobile-rustdesk-access h3 { margin: 0 0 4px; font-size: 15px; }
.mobile-rustdesk-access header p { margin: 0; color: var(--mobile-muted); font-size: 12px; }
.mobile-rustdesk-controls { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.mobile-rustdesk-controls label { display: grid; gap: 6px; min-width: min(100%, 240px); color: var(--mobile-muted); font-size: 11px; }
.mobile-rustdesk-controls input { width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid var(--mobile-border); border-radius: 4px; background: var(--mobile-surface); color: var(--mobile-text); font: inherit; }
.mobile-rustdesk-connect { text-decoration: none; }
@media (max-width: 680px) { .mobile-app-access > header { align-items: flex-start; flex-direction: column; } .mobile-app-access-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .mobile-rustdesk-controls { align-items: stretch; flex-direction: column; } .mobile-rustdesk-controls label, .mobile-rustdesk-controls .icon-text-button { width: 100%; } }

.mobile-pilot-page .devices-nav a[href="#mobile-applications"] { --nav-icon: url('/assets/mobile-icons/message-square.svg'); }
#mobileApplicationsView { min-width: 0; }
#mobileLocationsView { min-width: 0; }
#mobileLocationsView .mobile-location-table { min-width: 980px; }
.mobile-location-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.mobile-location-actions .icon-text-button { min-height: 32px; text-decoration: none; }
.mobile-location-actions .icon-text-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#mobileApplicationsView .mobile-platform-label { align-self: center; padding: 8px 14px; color: var(--mobile-muted); font-size: 12px; }
.mobile-applications-table-wrap { overflow-x: auto; }
.mobile-applications-table, .mobile-version-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mobile-applications-table { min-width: 1000px; }
.mobile-applications-table th, .mobile-version-table th { text-align: left; font-size: 11px; color: var(--mobile-muted); font-weight: 500; }
.mobile-applications-table th, .mobile-applications-table td, .mobile-version-table th, .mobile-version-table td { padding: 16px 12px; border-bottom: 1px solid var(--mobile-border); }
.mobile-applications-table td { overflow-wrap: anywhere; max-width: 260px; }
.mobile-applications-table small { display: block; margin-top: 5px; color: var(--mobile-muted); font-size: 11px; }
.mobile-applications-table tr.selected { background: var(--mobile-surface); box-shadow: inset 3px 0 #18baa8; }
.mobile-app-identity { display: flex; align-items: center; gap: 14px; }
.mobile-app-identity > div { min-width: 0; }
.mobile-application-icon { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 6px; color: #eaffff; background: #087e78; }
.mobile-application-icon.connect { background: #2462d3; }
.mobile-application-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mobile-application-icon .mobile-icon { color: inherit; width: 24px; height: 24px; flex-basis: 24px; }
.mobile-version-current, .mobile-version-older { display: block; line-height: 1.6; }
.mobile-version-current { color: #18baa8; }
.mobile-version-older { color: #eeb34e; }
body[data-theme="light"] .mobile-version-current { color: #087568; }
body[data-theme="light"] .mobile-version-older { color: #8a5900; }
.mobile-version-bar { width: 130px; height: 6px; margin-top: 7px; border-radius: 2px; }
#mobileApplicationDetails { border-top: 1px solid var(--mobile-border); padding-top: 24px; margin-top: 24px; }
#mobileApplicationDetails > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
#mobileApplicationDetails h2 { font-size: 18px; margin: 0 0 6px; }
#mobileApplicationDetails p { color: var(--mobile-muted); font-size: 12px; margin: 0; overflow-wrap: anywhere; }
.mobile-application-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--mobile-border); margin: 24px 0 14px; }
.mobile-application-tabs button { padding: 10px 4px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--mobile-muted); font-size: 13px; }
.mobile-application-tabs button[aria-selected="true"] { border-bottom-color: #18baa8; color: #18baa8; }
.mobile-release-actions { display: flex; gap: 6px; align-items: center; }
#mobileIntegrationPanel { padding: 16px 0; }
#mobileIntegrationPanel h3 { font-size: 15px; }
#mobileApplicationDetails .mobile-report-disclaimer { margin: 16px 0; }
@media (max-width: 680px) {
  .mobile-application-tabs { gap: 10px; }
  .mobile-application-tabs button { font-size: 12px; }
}

@media (max-width: 980px) {
  .mobile-pilot-page { display: block; }
  .mobile-pilot-page > .devices-sidebar {
    position: sticky;
    top: 0;
    z-index: 25;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 6px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--mobile-border);
  }
  .mobile-pilot-page .devices-brand,
  .mobile-pilot-page .devices-nav small { display: none; }
  .mobile-pilot-page .devices-nav {
    display: flex;
    gap: 4px;
    min-width: max-content;
  }
  .mobile-pilot-page .devices-nav a {
    min-height: 38px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .mobile-pilot-page .devices-nav a::before { margin-right: 7px; }
  .mobile-pilot-page .devices-nav .mobile-icon-nav > [data-user-icon],
  .mobile-pilot-page .devices-nav .mobile-icon-nav > svg { margin-right: 7px; }
  .mobile-pilot-workspace { grid-template-columns: 1fr; }
  .mobile-enrollment-panel > button { margin-top: 12px; }
}

@media (max-width: 680px) {
  .mobile-pilot-summary { grid-template-columns: repeat(2, 1fr); }
  .mobile-pilot-summary div:nth-child(2) { border-right: 0; }
  .mobile-pilot-summary div:nth-child(-n+2) { border-bottom: 1px solid #1c4657; }
  .mobile-policy-controls { grid-template-columns: 1fr; }
}
/* Remote app updates */
.mobile-update-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; padding: 20px; border: 1px solid #36515c; border-radius: 8px; background: #0b222d; color: #edf6fa; }
.mobile-update-dialog::backdrop { background: #0008; }
.mobile-update-dialog .icon-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; min-height: 36px; font-size: 13px; }
.mobile-update-dialog .icon-text-button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.mobile-update-dialog footer { padding-top: 12px; }
.mobile-update-dialog header, .mobile-update-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mobile-update-dialog h2 { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.mobile-update-message { font-size: 13px; color: #b6cbd5; margin-top: 12px; line-height: 1.5; }
.mobile-update-targets { max-height: 50dvh; overflow: auto; margin: 16px 0; }
.mobile-update-targets label { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(100px, 160px); gap: 12px; padding: 12px 4px; border-bottom: 1px solid #36515c; align-items: center; }
.mobile-update-targets input[type=checkbox] { appearance: auto; width: 18px; height: 18px; padding: 0; margin: 0; }
.mobile-update-targets small { display: block; color: #b6cbd5; margin-top: 4px; overflow-wrap: anywhere; }
.mobile-update-targets strong { overflow-wrap: anywhere; }
#mobileUpdateHistory { margin-top: 24px; border-top: 1px solid #36515c; padding-top: 16px; }
#mobileUpdateHistory h3 { font-size: 16px; }
.mobile-update-history-wrap { max-width: 100%; overflow-x: auto; }
#mobileUpdateHistory table { width: 100%; min-width: 720px; table-layout: auto; border-collapse: collapse; }
#mobileUpdateHistory td, #mobileUpdateHistory th { padding: 12px; text-align: left; border-bottom: 1px solid #36515c; overflow-wrap: anywhere; font-size: 12px; }
@media (max-width: 480px) { .mobile-update-targets label { grid-template-columns: 22px minmax(0, 1fr); } .mobile-update-targets label > span:last-child { grid-column: 2; } }
/* End remote app updates */
.headwind-policy-band {
  padding: 18px 0 22px;
  border-bottom: 1px solid rgba(120, 159, 174, 0.28);
  margin-bottom: 22px;
}
.headwind-policy-band header,
.headwind-policy-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.headwind-policy-band h2 { margin: 0; font-size: 19px; }
.headwind-policy-band h3 { margin: 20px 0 10px; font-size: 15px; }
.headwind-policy-connect,
.headwind-policy-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin-top: 16px;
}
.headwind-policy-connect label { display: grid; gap: 5px; min-width: 0; }
.headwind-policy-connect input { width: 100%; min-width: 0; }
.headwind-policy-connect button { align-self: end; }
.headwind-policy-apps label,
.headwind-policy-settings label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.headwind-policy-apps span { min-width: 0; overflow-wrap: anywhere; }
.headwind-policy-apps small { display: block; opacity: 0.7; }
#headwindPolicyAppSearch { width: min(100%, 420px); }
.headwind-policy-apps { max-height: 320px; overflow-y: auto; align-content: start; }
.headwind-policy-settings { justify-content: flex-start; margin: 18px 0; }
.headwind-policy-confirm { display: grid; gap: 5px; max-width: 300px; margin-bottom: 12px; }
.headwind-policy-confirm input { width: 100%; }
.mobile-headwind-cod { margin: 20px 0 26px; border-top: 1px solid rgba(120, 159, 174, 0.28); padding-top: 18px; }
.mobile-headwind-cod header h2 { margin: 0; font-size: 19px; }
.mobile-headwind-cod header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mobile-headwind-cod header p { margin: 4px 0 0; }
.mobile-headwind-cod form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.mobile-headwind-cod form label { display: grid; gap: 5px; min-width: min(100%, 210px); }
.mobile-headwind-cod form input { width: 100%; min-width: 0; }
.mobile-headwind-cod table { min-width: 760px; width: 100%; }
.mobile-headwind-cod td small { display: block; margin-top: 3px; color: #7898a5; }