/* Nightwatch console styles. One hand-written system: tokens first, then layout, then components.
   Written mobile-first; the navigation is a drawer on phones and a collapsible sidebar from 768px. */

/* Inter is served from this server so the console never calls an external font service. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --dg-bg: #f6f7f9;
  --dg-surface: #ffffff;
  --dg-subtle: #f9fafb;
  --dg-line: #eaecf0;
  --dg-line-strong: #d0d5dd;
  --dg-ink: #101828;
  --dg-ink-2: #344054;
  --dg-muted: #667085;
  --dg-primary: #7f56d9;
  --dg-primary-strong: #6941c6;
  --dg-primary-soft: #f4ebff;
  --dg-primary-softer: #f9f5ff;
  --dg-primary-line: #d6bbfb;
  --dg-blue: #1570ef;
  --dg-green: #17b26a;
  --dg-orange: #ef6820;
  --dg-red: #d92d20;
  --dg-warn-ink: #b54708;
  --dg-radius: 12px;
  --dg-radius-control: 8px;
  --dg-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --dg-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --dg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dg-topbar-height: 60px;
  --dg-rail-width: 64px;
  --dg-nav-width: 232px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  caret-color: var(--dg-primary);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--dg-bg);
  color: var(--dg-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  line-height: 1.45;
  font-feature-settings: "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--dg-primary-soft);
}

:focus-visible {
  outline: 2px solid var(--dg-primary);
  outline-offset: 2px;
}

a {
  color: var(--dg-primary-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

h1,
h2,
p {
  margin: 0;
}

.dg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard users can jump past the navigation; the link shows only when focused. */
.dg-skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 40;
  padding: 0.5rem 0.75rem;
  border-radius: var(--dg-radius-control);
  background: var(--dg-ink);
  color: #fff;
  transform: translateY(-200%);
}

.dg-skip:focus {
  transform: none;
}

.dg-icon {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}

/* ---------- Shell: top bar and navigation ---------- */

.dg-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: var(--dg-topbar-height);
  padding: 0 1rem;
  background: var(--dg-surface);
  border-bottom: 1px solid var(--dg-line);
}

.dg-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  /* Night sky behind the wolf, so its violet eye stands out. */
  background: linear-gradient(160deg, #2e1f5e, #0f0b1f);
  color: #fff;
}

.dg-logo img {
  display: block;
  width: 32px;
  height: 32px;
}

/* The menu button needs the script, so it only appears once the page knows scripts run. */
.dg-nav-toggle {
  display: none;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--dg-ink-2);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.dg-js .dg-nav-toggle {
  display: grid;
}

.dg-home {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  color: var(--dg-ink);
  text-decoration: none;
}

.dg-wordmark {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .dg-nav-toggle:hover {
    background: #eef0f3;
  }
}

.dg-topbar-divider {
  flex: none;
  width: 1px;
  height: 24px;
  background: var(--dg-line);
}

.dg-topbar-title {
  min-width: 0;
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-topbar-title a {
  color: var(--dg-muted);
  font-weight: 500;
  text-decoration: none;
}

.dg-topbar-title .dg-icon {
  width: 16px;
  height: 16px;
  margin: 0 0.125rem;
  color: var(--dg-muted);
  vertical-align: -2px;
}

.dg-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  font-weight: 500;
}

.dg-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dg-primary-soft);
  color: var(--dg-primary-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}

.dg-user-name {
  display: none;
}

.dg-user-role {
  display: none;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--dg-muted);
  line-height: 1.2;
}

/* Account menu in the top bar: a native disclosure, so it needs no script. */
.dg-user-menu {
  position: relative;
  margin-left: auto;
}

.dg-user-menu > summary {
  list-style: none;
  cursor: pointer;
  margin-left: 0;
}

.dg-user-menu > summary::-webkit-details-marker {
  display: none;
}

.dg-user-menu > summary > .dg-icon {
  width: 16px;
  height: 16px;
  color: var(--dg-muted);
}

.dg-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  padding: 6px;
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: 10px;
  box-shadow: var(--dg-shadow-lg);
  z-index: 30;
  transform-origin: top right;
  animation: dg-menu-in 140ms var(--dg-ease-out);
}

@keyframes dg-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
}

.dg-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dg-menu-item:hover {
  background: var(--dg-subtle);
}

/* Rename control in the top bar, right of the page title (device page): a small round pencil that
   opens a one-field box underneath. A details element, so it needs no script. */
.dg-rename {
  position: relative;
  flex: none;
  margin-left: 0.25rem;
}

.dg-rename > summary {
  list-style: none;
}

.dg-rename > summary::-webkit-details-marker {
  display: none;
}

.dg-rename-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--dg-line-strong);
  border-radius: 999px;
  background: var(--dg-surface);
  color: var(--dg-muted);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.dg-rename-button:hover,
.dg-rename[open] > .dg-rename-button {
  border-color: var(--dg-primary-line);
  background: var(--dg-primary-softer);
  color: var(--dg-primary-strong);
}

.dg-rename-button .dg-icon {
  width: 15px;
  height: 15px;
}

.dg-rename-box {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 0.5rem;
  width: min(320px, calc(100vw - 32px));
  padding: 0.875rem;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-lg);
}

.dg-rename-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dg-ink-2);
}

.dg-rename-hint {
  font-size: 0.75rem;
  color: var(--dg-muted);
}

.dg-rename-actions {
  display: flex;
  justify-content: flex-end;
}

/* Sign out is the one red entry in the account menu and the navigation, so it is never clicked by
   mistake for a page link. The word stays; the colour only adds to it. */
.dg-menu-item-danger,
.dg-nav-link-danger {
  color: var(--dg-red);
}

.dg-menu-item-danger:hover {
  background: color-mix(in srgb, var(--dg-red) 8%, var(--dg-surface));
  color: var(--dg-red);
}

@media (hover: hover) and (pointer: fine) {
  .dg-nav-link-danger:hover,
  .dg-nav-link-danger:hover .dg-nav-icon {
    background: color-mix(in srgb, var(--dg-red) 8%, var(--dg-surface));
    color: var(--dg-red);
  }
}

/* Main navigation. Without scripts it is a bottom bar on phones. With scripts it is a drawer that
   slides in from the left on phones. From 768px it is a sidebar with labels that the menu button
   collapses to an icon rail; the choice is kept in localStorage and applied before the first paint. */

.dg-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom));
  background: var(--dg-surface);
  border-top: 1px solid var(--dg-line);
}

.dg-nav form {
  display: contents;
}

.dg-nav-head,
.dg-nav-heading,
.dg-nav-sep,
.dg-nav-backdrop {
  display: none;
}

.dg-nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: var(--dg-muted);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.dg-nav-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 32px;
  border-radius: 8px;
  transition: background-color 150ms ease, color 150ms ease;
}

.dg-nav-link.is-active {
  color: var(--dg-primary-strong);
}

.dg-nav-link.is-active .dg-nav-icon {
  background: var(--dg-primary-soft);
}

.dg-nav-heading {
  padding: 0.875rem 0.625rem 0.375rem;
  color: var(--dg-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.dg-nav-sep {
  height: 1px;
  margin: 0.75rem 0.5rem;
  background: var(--dg-line);
}

.dg-nav-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--dg-muted);
  cursor: pointer;
}

.dg-main {
  padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom));
  /* A short fade on every page load so moving between pages feels continuous. Fill mode
     "backwards" leaves no transform behind, which would break position: fixed inside the page. */
  animation: dg-page-in 220ms var(--dg-ease-out) backwards;
  /* Pages size their tables and columns by the room left beside the sidebar, open or collapsed,
     not by the window. Nothing inside the page may use position: fixed (containment would break it). */
  container: dg-main / inline-size;
}

@keyframes dg-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Phones with scripts: the links live in a drawer that slides in over a dimmed page. */
@media (max-width: 767.98px) {
  .dg-js .dg-nav {
    inset: 0 auto 0 0;
    z-index: 40;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    width: min(280px, 85vw);
    padding: 0.75rem 0.75rem calc(1rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-top: 0;
    border-right: 1px solid var(--dg-line);
    box-shadow: var(--dg-shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 240ms var(--dg-ease-out), visibility 0s 240ms;
  }

  .dg-nav-open .dg-nav {
    transform: none;
    visibility: visible;
    transition: transform 240ms var(--dg-ease-out), visibility 0s;
  }

  .dg-js .dg-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    padding: 0 0 0.75rem 0.25rem;
    border-bottom: 1px solid var(--dg-line);
  }

  .dg-js .dg-nav-heading,
  .dg-js .dg-nav-sep {
    display: block;
  }

  .dg-js .dg-nav-link {
    flex-direction: row;
    gap: 0.75rem;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.5rem;
    border-radius: 8px;
    color: var(--dg-ink-2);
    font-size: 0.9375rem;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .dg-js .dg-nav-icon {
    width: 24px;
    height: 24px;
  }

  .dg-js .dg-nav-link.is-active {
    background: var(--dg-primary-soft);
  }

  .dg-js .dg-nav-link.is-active .dg-nav-icon {
    background: none;
  }

  .dg-js .dg-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(16, 24, 40, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--dg-ease-out);
  }

  .dg-nav-open .dg-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .dg-nav-open body {
    overflow: hidden;
  }

  .dg-js .dg-main {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }

  .dg-topbar .dg-wordmark {
    display: none;
  }
}

/* From 768px: a sidebar with labels, collapsible to an icon rail. */
@media (min-width: 768px) {
  .dg-topbar {
    padding: 0 1.5rem 0 0.875rem;
  }

  .dg-user-name {
    display: block;
    line-height: 1.2;
  }

  .dg-user-role {
    display: block;
  }

  .dg-nav {
    inset: var(--dg-topbar-height) auto 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    width: var(--dg-nav-width);
    padding: 0.5rem 0.75rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 0;
    border-right: 1px solid var(--dg-line);
    transition: width 220ms var(--dg-ease-out);
  }

  .dg-nav-heading,
  .dg-nav-sep {
    display: block;
  }

  .dg-nav-link {
    flex-direction: row;
    gap: 0.75rem;
    min-width: 0;
    min-height: 40px;
    padding: 0 0.5rem;
    border-radius: 8px;
    color: var(--dg-ink-2);
    font-size: 0.875rem;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .dg-nav-icon {
    width: 24px;
    height: 24px;
  }

  .dg-nav-label {
    transition: opacity 150ms ease;
  }

  .dg-nav-link.is-active {
    background: var(--dg-primary-soft);
  }

  .dg-nav-link.is-active .dg-nav-icon {
    background: none;
  }

  /* The marker on the screen edge shows which section is open. */
  .dg-nav-link.is-active::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -0.75rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--dg-primary);
  }

  .dg-main {
    margin-left: var(--dg-nav-width);
    padding: 1.5rem;
    transition: margin-left 220ms var(--dg-ease-out);
  }

  /* Collapsed: the same rows with only the icons; each link keeps its title as a tooltip. */
  .dg-nav-collapsed .dg-nav {
    width: var(--dg-rail-width);
  }

  .dg-nav-collapsed .dg-nav-link {
    width: 40px;
  }

  .dg-nav-collapsed .dg-nav-label,
  .dg-nav-collapsed .dg-nav-heading {
    opacity: 0;
  }

  .dg-nav-collapsed .dg-main {
    margin-left: var(--dg-rail-width);
  }
}

@media (hover: hover) and (pointer: fine) {
  .dg-nav-link:hover .dg-nav-icon {
    background: #eef0f3;
    color: var(--dg-ink-2);
  }

  .dg-nav-link.is-active:hover .dg-nav-icon {
    background: var(--dg-primary-soft);
    color: var(--dg-primary-strong);
  }

  .dg-nav-close:hover {
    background: #eef0f3;
    color: var(--dg-ink-2);
  }
}

/* Where a link is a full row (sidebar, and the phone drawer), the whole row lights up on hover. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .dg-nav-link:hover {
    background: #f2f4f7;
    color: var(--dg-ink);
  }

  .dg-nav-link.is-active:hover {
    background: var(--dg-primary-soft);
    color: var(--dg-primary-strong);
  }

  .dg-nav-link:hover .dg-nav-icon,
  .dg-nav-link.is-active:hover .dg-nav-icon {
    background: none;
    color: inherit;
  }
}

/* ---------- Page layout helpers ---------- */

.dg-stack {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.dg-columns {
  display: grid;
  gap: 1rem;
}

.dg-columns > * {
  min-width: 0;
}

/* The side panel holds a short form, so it comes first on narrow screens. */
.dg-side {
  order: -1;
}

@container dg-main (min-width: 990px) {
  .dg-columns {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }

  .dg-side {
    order: 0;
  }
}

/* ---------- Cards ---------- */

.dg-card {
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
}

.dg-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.125rem 0.875rem;
}

.dg-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.dg-card-sub {
  margin-top: 0.25rem;
  color: var(--dg-muted);
  font-size: 0.8125rem;
}

.dg-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dg-card-body {
  padding: 0 1.125rem 1.125rem;
}

.dg-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--dg-line);
  color: var(--dg-ink-2);
  font-weight: 500;
}

.dg-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dg-primary-softer);
  color: var(--dg-primary-strong);
  font-size: 0.75rem;
  font-weight: 500;
}

/* ---------- Stat cards ---------- */

.dg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dg-stat {
  padding: 0.875rem 1rem;
}

.dg-stat-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dg-stat-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dg-tone);
  color: #fff;
}

.dg-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.dg-stat-label {
  color: var(--dg-ink-2);
  font-size: 0.8125rem;
}

.dg-stat-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 40px;
  margin-top: 0.625rem;
  color: var(--dg-ink-2);
  font-size: 0.75rem;
  font-weight: 500;
}

/* A ring that fills to --value percent. */
.dg-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--dg-tone) calc(var(--value) * 1%), #eef0f4 0);
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dg-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--dg-surface);
}

.dg-ring span {
  position: relative;
}

/* ---------- Buttons ---------- */

.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0 0.875rem;
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-control);
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-xs);
  color: var(--dg-ink-2);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--dg-ease-out);
}

.dg-btn:active {
  transform: scale(0.97);
}

.dg-btn[aria-disabled="true"] {
  color: #98a2b3;
  pointer-events: none;
}

.dg-btn-primary {
  border-color: var(--dg-primary);
  background: var(--dg-primary);
  color: #fff;
}

.dg-btn-outline {
  border-color: var(--dg-primary);
  color: var(--dg-primary-strong);
}

.dg-btn-danger {
  border-color: var(--dg-red);
  color: var(--dg-red);
  background: var(--dg-surface);
}

.dg-btn-danger:hover {
  background: color-mix(in srgb, var(--dg-red) 8%, var(--dg-surface));
}

.dg-btn-block {
  width: 100%;
}

/* Protection actions on the device page: one row of tiles, coloured by how severe the action is
   (blue reversible, green undo, orange needs the key, red cannot be undone, solid red destroys the
   data). Every tile also says so in words. The confirmation of a destructive tile is a panel below
   the row, opened through the URL fragment (no script needed) or kept open after a refusal. */
.dg-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.625rem;
}

.dg-actions > form {
  display: contents;
}

.dg-action {
  --dg-action-bg: var(--dg-subtle);
  --dg-action-ink: var(--dg-ink-2);
  --dg-action-line: var(--dg-line);
  --dg-action-icon-bg: var(--dg-surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  height: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--dg-action-line);
  border-radius: var(--dg-radius);
  background: var(--dg-action-bg);
  color: var(--dg-action-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 160ms var(--dg-ease-out);
}

.dg-action:hover {
  border-color: var(--dg-action-ink);
  box-shadow: var(--dg-shadow-xs);
}

.dg-action:active {
  transform: scale(0.98);
}

.dg-action[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.dg-action-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--dg-action-icon-bg);
}

.dg-action-name {
  font-weight: 600;
}

.dg-action-text {
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.9;
}

.dg-action-azure { --dg-action-bg: #eff8ff; --dg-action-ink: #175cd3; --dg-action-line: #b2ddff; }
.dg-action-green { --dg-action-bg: #ecfdf3; --dg-action-ink: #067647; --dg-action-line: #abefc6; }
.dg-action-orange { --dg-action-bg: #fef6ee; --dg-action-ink: #b93815; --dg-action-line: #f9dbaf; }
.dg-action-red { --dg-action-bg: #fef3f2; --dg-action-ink: #b42318; --dg-action-line: #fecdca; }
.dg-action-red-strong {
  --dg-action-bg: var(--dg-red);
  --dg-action-ink: #fff;
  --dg-action-line: var(--dg-red);
  --dg-action-icon-bg: rgba(255, 255, 255, 0.18);
}

.dg-action-red-strong:hover {
  border-color: #912018;
  background: #b42318;
}

.dg-action-panel {
  display: none;
  margin-top: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  background: var(--dg-subtle);
}

.dg-action-panel:target,
.dg-action-panel.is-open {
  display: block;
}

.dg-action-panel h3 {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.dg-action-panel p {
  margin: 0 0 0.75rem;
  color: var(--dg-ink-2);
}

.dg-action-panel-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.dg-action-panel-form .dg-input {
  flex: 1 1 200px;
  max-width: 280px;
}

.dg-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--dg-radius-control);
  background: none;
  color: var(--dg-muted);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--dg-ease-out);
}

.dg-icon-btn:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .dg-btn:hover {
    background: var(--dg-subtle);
  }

  .dg-btn-primary:hover {
    border-color: var(--dg-primary-strong);
    background: var(--dg-primary-strong);
  }

  .dg-btn-outline:hover {
    background: var(--dg-primary-softer);
  }

  .dg-icon-btn:hover {
    background: #f2f4f7;
    color: var(--dg-ink-2);
  }

  .dg-icon-btn-danger:hover {
    background: #fef3f2;
    color: var(--dg-red);
  }
}

/* ---------- Form controls ---------- */

.dg-field + .dg-field {
  margin-top: 0.875rem;
}

.dg-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--dg-ink-2);
  font-weight: 500;
}

.dg-input,
.dg-select-button,
select.dg-select-native {
  width: 100%;
  min-height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-control);
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-xs);
  color: var(--dg-ink);
  font: inherit;
  /* 16px stops phones from zooming the page when a field is focused. */
  font-size: 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dg-input::placeholder {
  color: var(--dg-muted);
}

.dg-input:focus,
.dg-select-button:focus-visible,
select.dg-select-native:focus {
  border-color: var(--dg-primary-line);
  box-shadow: var(--dg-shadow-xs), 0 0 0 4px var(--dg-primary-soft);
  outline: none;
}

.dg-field-error {
  display: block;
  margin-top: 0.25rem;
  color: var(--dg-red);
  font-size: 0.8125rem;
}

.dg-field-error:empty {
  display: none;
}

.dg-field-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--dg-muted);
  font-size: 0.8125rem;
}

.dg-search {
  position: relative;
}

.dg-search .dg-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  color: var(--dg-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.dg-search .dg-input {
  padding-left: 2.375rem;
}

@media (min-width: 768px) {
  .dg-input,
  .dg-select-button,
  select.dg-select-native {
    font-size: 0.875rem;
  }
}

@media (pointer: coarse) {
  .dg-btn,
  .dg-input,
  .dg-select-button {
    min-height: 44px;
  }

  .dg-icon-btn {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Custom select ---------- */
/* site.js builds this around a normal <select>, which stays in the form and carries the value. */

.dg-select {
  position: relative;
  min-width: 11rem;
}

.dg-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  cursor: pointer;
}

.dg-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-select-button .dg-icon {
  color: var(--dg-muted);
  transition: transform 150ms var(--dg-ease-out);
}

.dg-select.is-open .dg-select-button .dg-icon {
  transform: rotate(180deg);
}

.dg-select-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 16rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius-control);
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-lg);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transform-origin: top center;
  transition: opacity 120ms var(--dg-ease-out), transform 120ms var(--dg-ease-out), visibility 0s 120ms;
}

.dg-select.is-open .dg-select-list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Opens upwards when there is no room below. */
.dg-select[data-placement="top"] .dg-select-list {
  top: auto;
  bottom: calc(100% + 4px);
  transform-origin: bottom center;
}

.dg-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  cursor: pointer;
}

.dg-select-option.is-active {
  background: #f2f4f7;
}

.dg-select-option[aria-selected="true"] {
  font-weight: 500;
}

.dg-select-option .dg-icon {
  color: var(--dg-primary);
  visibility: hidden;
}

.dg-select-option[aria-selected="true"] .dg-icon {
  visibility: visible;
}

@media (pointer: coarse) {
  .dg-select-option {
    min-height: 44px;
  }
}

/* ---------- Toolbar and segmented control ---------- */

.dg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1.125rem 0.875rem;
}

.dg-toolbar-filters {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dg-toolbar-filters > * {
  flex: 1 1 12rem;
}

.dg-segmented {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-control);
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-xs);
}

.dg-segmented a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 0.875rem;
  color: var(--dg-ink-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease;
}

.dg-segmented a + a {
  border-left: 1px solid var(--dg-line-strong);
}

.dg-segmented a.is-active {
  background: #f2f4f7;
  color: var(--dg-ink);
}

@container dg-main (min-width: 1080px) {
  .dg-toolbar-filters {
    flex: 0 1 40rem;
    flex-wrap: nowrap;
  }
}

@media (pointer: coarse) {
  .dg-segmented a {
    min-height: 44px;
  }
}

/* ---------- Tables ---------- */

.dg-table-wrap {
  overflow-x: auto;
}

.dg-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.dg-table th {
  padding: 0.625rem 1.125rem;
  border-top: 1px solid var(--dg-line);
  border-bottom: 1px solid var(--dg-line);
  background: var(--dg-subtle);
  color: var(--dg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.dg-table td {
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--dg-line);
  color: var(--dg-ink-2);
  vertical-align: middle;
}

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

.dg-nowrap {
  white-space: nowrap;
}

/* Marks a value that needs a look, such as a PC not seen for over a day. */
.dg-table td.dg-text-warn {
  color: var(--dg-warn-ink);
  font-weight: 500;
}

.dg-entity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.dg-entity-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dg-primary-soft);
  color: var(--dg-primary-strong);
}

.dg-entity-name {
  display: block;
  color: var(--dg-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

a.dg-entity-name {
  text-decoration: none;
}

.dg-entity-sub {
  display: block;
  color: var(--dg-muted);
  font-size: 0.8125rem;
}

.dg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: var(--dg-ink-2);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.dg-pill-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.dg-pill-green {
  background: #ecfdf3;
  color: #067647;
}

.dg-pill-red {
  background: #fef3f2;
  color: #b42318;
}

.dg-pill-blue,
.dg-pill-azure {
  background: #eff8ff;
  color: #175cd3;
}

.dg-pill-purple {
  background: #f4f3ff;
  color: #5925dc;
}

.dg-pill-indigo {
  background: #eef4ff;
  color: #3538cd;
}

.dg-pill-pink {
  background: #fdf2fa;
  color: #c11574;
}

.dg-pill-orange {
  background: #fef6ee;
  color: #b93815;
}

.dg-meter {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}

.dg-meter-bar {
  flex: 0 0 4.5rem;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #f2f4f7;
}

.dg-meter-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--dg-primary);
}

@media (hover: hover) and (pointer: fine) {
  .dg-table tbody tr {
    transition: background-color 120ms ease;
  }

  .dg-table tbody tr:hover {
    background: var(--dg-subtle);
  }
}

/* Below 768px every row becomes a labelled block; a wide table cannot be read on a phone. */
@media (max-width: 767.98px) {
  .dg-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .dg-table,
  .dg-table tbody,
  .dg-table tr {
    display: block;
  }

  .dg-table tr {
    padding: 0.875rem 1.125rem;
    border-top: 1px solid var(--dg-line);
  }

  .dg-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    border: 0;
    text-align: right;
  }

  .dg-table td::before {
    content: attr(data-label);
    flex: none;
    color: var(--dg-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    text-align: left;
  }

  .dg-table td.dg-cell-main {
    display: block;
    padding-bottom: 0.5rem;
    text-align: left;
  }

  .dg-table td.dg-cell-main::before,
  .dg-table td.dg-cell-action::before {
    content: none;
  }

  .dg-table td.dg-cell-action {
    justify-content: flex-end;
  }

  .dg-table td.dg-cell-action .dg-card-actions {
    justify-content: flex-end;
  }

  .dg-table td.dg-cell-action:empty {
    display: none;
  }
}

/* A narrower page area (a mid-size screen, or the sidebar open) drops the least-used columns
   instead of squeezing every one in. */
@media (min-width: 768px) {
  @container dg-main (max-width: 1087.98px) {
    .dg-table .dg-col-wide {
      display: none;
    }
  }

  @container dg-main (max-width: 879.98px) {
    .dg-table .dg-col-mid {
      display: none;
    }
  }
}

/* ---------- Notice, alert, empty state ---------- */

.dg-notice {
  padding: 1rem 1.125rem;
  margin-bottom: 1rem;
  border: 1px solid var(--dg-primary-line);
  border-radius: var(--dg-radius);
  background: var(--dg-primary-softer);
}

.dg-notice-title {
  color: #53389e;
  font-weight: 600;
}

.dg-notice-text {
  margin-top: 0.125rem;
  color: var(--dg-ink-2);
}

.dg-command {
  margin: 0.75rem 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--dg-radius-control);
  background: var(--dg-ink);
  color: #f2f4f7;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A secret shown on request, such as a 48-digit BitLocker recovery key. Pair it with a
   data-copy-target button to copy it. */
.dg-key {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--dg-line-strong);
  border-radius: var(--dg-radius-control);
  background: var(--dg-subtle);
  color: var(--dg-ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Label and value pairs, e.g. the facts about one PC. */
.dg-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem 1rem;
  margin: 0;
}

.dg-facts dt {
  color: var(--dg-muted);
}

.dg-facts dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.dg-alert {
  padding: 0.625rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #fecdca;
  border-radius: var(--dg-radius-control);
  background: #fef3f2;
  color: #b42318;
}

.dg-empty {
  padding: 2.5rem 1.125rem;
  border-top: 1px solid var(--dg-line);
  text-align: center;
}

.dg-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--dg-line);
  border-radius: 10px;
  box-shadow: var(--dg-shadow-xs);
  color: var(--dg-ink-2);
}

.dg-empty-title {
  font-weight: 600;
}

.dg-empty-text {
  max-width: 34ch;
  margin: 0.25rem auto 0;
  color: var(--dg-muted);
}

.dg-empty-action {
  margin-top: 1rem;
}

/* ---------- Sign-in ---------- */

.dg-signin-wrap {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1rem;
}

.dg-signin {
  width: 100%;
  max-width: 380px;
  padding: 1.75rem 1.5rem;
}

.dg-signin .dg-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 1rem;
}

.dg-signin .dg-logo img {
  width: 58px;
  height: 58px;
}

.dg-signin h1 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dg-signin-sub {
  margin: 0.25rem 0 1.25rem;
  color: var(--dg-muted);
}

.dg-signin .dg-btn {
  margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .dg-btn:active,
  .dg-icon-btn:active {
    transform: none;
  }

  .dg-select-list,
  .dg-select-button .dg-icon,
  .dg-nav,
  .dg-nav-link,
  .dg-nav-label,
  .dg-nav-heading,
  .dg-nav-backdrop,
  .dg-main {
    transition: none;
  }

  .dg-main,
  .dg-menu {
    animation: none;
  }
}