/* devices.css: the devices area (README screens 6 and 7): People, Equipment,
   Work groups and Manage, the record drawer and the unassign dialog.
   Values follow the prototype's devices screen; colours come from the OWL
   tokens, with the prototype's literals as fallbacks where it has no token. */

:root {
  --dv-gx: 16px;
  --dv-chip-bg: var(--sfColour-hover, #eff2f5);
  --dv-chip-fg: var(--textColour-secondary, #59636e);
  --dv-pick-border: #c8d1da;
  --dv-selected-bg: var(--sfColour-hover, #eff2f5);
  --dv-mine-bg: #ffe3d9;
  --dv-mine-fg: #8c2d0b;
  --dv-red: var(--lm-red-5, #cf222e);
  --dv-crit-fg: #a40e26;
  --dv-warn-fg: #7d4e00;
  --dv-crit-dot: #cf222e;
  --dv-warn-dot: #bc4c00;
  --dv-muted-dot: #d1d9e0;
  --dv-ok-dot: #2da44e;
  --dv-dark-btn-bg: #1c2128;
  --dv-dark-btn-fg: #fff;
  --dv-chip-on-bg: #25292e;
  --dv-chip-on-fg: #fff;
  --dv-menu-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  --dv-tone-ok-bg: #dafbe1; --dv-tone-ok-fg: #1a7f37;
  --dv-tone-warn-bg: #fff1e5; --dv-tone-warn-fg: #bc4c00;
  --dv-tone-info-bg: #ddf4ff; --dv-tone-info-fg: #0969da;
  --dv-tone-neutral-bg: #eff2f5; --dv-tone-neutral-fg: #59636e;
  --dv-tone-restricted-bg: #fff8c5; --dv-tone-restricted-fg: #9a6700;
  --dv-tone-prohibited-bg: #ffebe9; --dv-tone-prohibited-fg: #cf222e;
  --dv-warnbox-bg: #ffebe9; --dv-warnbox-border: #ff8182; --dv-warnbox-fg: #a40e26;
}
@media (min-width: 700px) { :root { --dv-gx: 18px; } }
@media (min-width: 1100px) { :root { --dv-gx: 24px; } }

[data-theme="dark"] {
  --dv-pick-border: #656c76;
  --dv-selected-bg: #262c36;
  --dv-mine-bg: rgba(241, 88, 43, 0.2);
  --dv-mine-fg: #ffb59e;
  --dv-red: #ff8080;
  --dv-crit-fg: #ff8080;
  --dv-warn-fg: #e3b341;
  --dv-crit-dot: #ff8080;
  --dv-warn-dot: #f0b072;
  --dv-muted-dot: #3d444d;
  --dv-ok-dot: #3fb950;
  --dv-dark-btn-bg: #f0f6fc;
  --dv-dark-btn-fg: #0d1117;
  --dv-chip-on-bg: #f0f6fc;
  --dv-chip-on-fg: #0d1117;
  --dv-chip-bg: #262c36;
  --dv-menu-shadow: 0 8px 24px rgba(1, 4, 9, 0.5);
  --dv-tone-ok-bg: rgba(46, 160, 67, 0.18); --dv-tone-ok-fg: #4ac26b;
  --dv-tone-warn-bg: rgba(219, 109, 40, 0.18); --dv-tone-warn-fg: #f0883e;
  --dv-tone-info-bg: rgba(56, 139, 253, 0.16); --dv-tone-info-fg: #4493f8;
  --dv-tone-neutral-bg: #262c36; --dv-tone-neutral-fg: #9198a1;
  --dv-tone-restricted-bg: rgba(187, 128, 9, 0.18); --dv-tone-restricted-fg: #e3b341;
  --dv-tone-prohibited-bg: rgba(248, 81, 73, 0.16); --dv-tone-prohibited-fg: #ff7b72;
  --dv-warnbox-bg: rgba(248, 81, 73, 0.1); --dv-warnbox-border: rgba(248, 81, 73, 0.45); --dv-warnbox-fg: #ff7b72;
}

.dv-num { font-family: var(--font-mono-accent, Inter); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- page */
.dv { min-height: 100%; background: var(--bgColour-primary, #f6f8fa); }

/* Toolbar: selection count, Select all, search, sort, list / cards. */
.dv-bar {
  position: relative; display: flex; align-items: center; gap: 8px; height: 54px;
  padding: 0 var(--dv-gx); background: var(--sfColour-primary, #fff);
  border-bottom: 1px solid var(--borderColour-primary, #e0e6eb);
  transition: background var(--duration-normal, 200ms) ease;
}
.dv.has-picks .dv-bar { background: var(--dv-selected-bg); }
.dv-bar__tools { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.dv-bar__count { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--textColour-secondary, #59636e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv.has-picks .dv-bar__count { color: var(--textColour-primary, #25292e); }
.dv-bar__search { flex: 1; min-width: 0; display: none; align-items: center; gap: 8px; }
.dv-bar[data-search="true"] .dv-bar__search { display: flex; }
.dv-bar[data-search="true"] .dv-bar__tools { display: none; }
.dv-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 10px;
  border-radius: 6px; border: 1px solid var(--textColour-brand, #f1582b); background: var(--sfColour-primary, #fff);
  color: var(--textColour-tertiary, #818b98);
}
.dv-search__input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent;
  font: inherit; font-size: 14px; color: var(--textColour-primary, #25292e);
}
.dv-search__input::-webkit-search-cancel-button { display: none; }
.dv-bar__cancel { flex: none; display: flex; align-items: center; height: 34px; padding: 0 6px; font-size: 13px; font-weight: 500; color: var(--textColour-brand, #f1582b); text-decoration: none; }

.dv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 11px;
  border-radius: 6px; border: 1px solid var(--borderColour-primary, #e0e6eb); background: var(--sfColour-primary, #fff);
  color: var(--textColour-primary, #25292e); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background var(--duration-normal, 200ms) ease;
}
.dv-btn:hover { background: var(--sfColour-hover, #eff2f5); }
.dv-tool {
  flex: none; width: 34px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--borderColour-primary, #e0e6eb); background: var(--sfColour-primary, #fff);
  color: var(--textColour-secondary, #59636e); transition: background var(--duration-normal, 200ms) ease;
}
.dv-tool:hover, .dv-tool[aria-expanded="true"] { background: var(--sfColour-hover, #eff2f5); }
.dv-tool.is-on { border-color: var(--textColour-brand, #f1582b); color: var(--textColour-brand, #f1582b); }
/* the touch target is the full bar height around a 32px chip */
.dv-tool, .dv-btn, .dv-seg { position: relative; }
.dv-tool::after, .dv-btn::after { content: ""; position: absolute; inset: -6px -2px; }

.dv-seg { flex: none; display: flex; height: 32px; padding: 2px; border-radius: 7px; background: var(--sfColour-hover, #eff2f5); }
.dv-seg__item {
  width: 40px; height: 28px; display: grid; place-items: center; border-radius: 5px;
  color: var(--textColour-secondary, #59636e); transition: background var(--duration-normal, 200ms) ease, color var(--duration-normal, 200ms) ease;
}
.dv-seg__item[aria-current="true"] { background: var(--sfColour-primary, #fff); color: var(--textColour-primary, #25292e); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
[data-theme="dark"] .dv-seg__item[aria-current="true"] { background: #3d444d; color: #fff; box-shadow: inset 0 0 0 1px #656c76; }

/* Filter pills. */
.dv-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--dv-gx) 2px; }
.dv-pills::-webkit-scrollbar { display: none; }
.dv-pill {
  flex: none; display: flex; align-items: center; gap: calc(6px * var(--sp, 1)); height: 30px; padding: 0 calc(11px * var(--sp, 1));
  border-radius: 999px; border: 1px solid var(--borderColour-primary, #e0e6eb); background: var(--sfColour-primary, #fff);
  color: var(--textColour-secondary, #59636e); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  transition: background var(--duration-normal, 200ms) ease, color var(--duration-normal, 200ms) ease, border-color var(--duration-normal, 200ms) ease;
}
.dv-pill[aria-current="true"] { background: var(--field-coral, #f1582b); border-color: var(--field-coral, #f1582b); color: #fff; }
.dv-pill__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--dv-crit-dot); }
.dv-pill--warning .dv-pill__dot { background: var(--dv-warn-dot); }
.dv-pill[aria-current="true"] .dv-pill__dot { background: #fff; }
.dv-pill__n { font-size: 11px; opacity: 0.75; font-family: var(--font-mono-accent, Inter); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- lists */
.dv-body { padding: 0 var(--dv-gx) 20px; }
.dv-spacer { height: 72px; }
.dv-section { margin-top: 14px; }
.dv-section__label { margin: 0 0 8px; font-size: 11px; line-height: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--textColour-tertiary, #818b98); }
.dv-rows {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px;
  background: var(--borderColour-primary, #e0e6eb); border: 1px solid var(--borderColour-primary, #e0e6eb); border-radius: 8px; overflow: hidden;
}
.dv-row {
  display: flex; align-items: center; gap: calc(10px * var(--sp, 1));
  padding: calc(12px * var(--sp, 1)) calc(8px * var(--sp, 1)) calc(12px * var(--sp, 1)) calc(13px * var(--sp, 1));
  background: var(--sfColour-primary, #fff); transition: background var(--duration-normal, 200ms) ease;
}
.dv-row.is-picked { background: var(--dv-selected-bg); }
.dv-row__open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(10px * var(--sp, 1)); padding: 0; margin: 0;
  border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.dv-row__main { flex: 1; min-width: 0; display: block; }
.dv-row__l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-row__name { min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-row__l1 .f-pill { flex: none; }
.dv-row__l2, .dv-row__l3 { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 6px; font-size: 12px; line-height: 16px; }
.dv-row__l3 { gap: 8px; }
.dv-row__role { min-width: 0; color: var(--textColour-secondary, #59636e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-row__sep { flex: none; color: var(--textColour-tertiary, #818b98); }
.dv-row__sub { display: block; margin-top: 0; font-size: 12px; line-height: 16px; color: var(--textColour-secondary, #59636e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-row__side { display: none; flex: none; text-align: right; }
.dv-row__side .f-batt { margin-top: 4px; }
@media (min-width: 700px) {
  .dv-row__l3 { display: none; }
  .dv-row__side { display: flex; flex-direction: column; align-items: flex-end; }
}
.dv-row .f-batt { font-size: 11px; }
.dv-row__side .f-batt__pct { color: var(--textColour-tertiary, #818b98); }
.dv-batt--none { color: var(--textColour-tertiary, #818b98); }
/* An offline tracker's battery is the last it reported: dimmed, not hidden. */
.dv-batt--stale { opacity: 0.5; }
span.dv-batt--stale { display: inline-flex; }

.dv-ident { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--textColour-secondary, #59636e); }
.dv-ident .f-icon { color: var(--textColour-tertiary, #818b98); }
.dv-ident__sep { color: var(--textColour-tertiary, #818b98); }
.dv-mine { flex: none; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; background: var(--dv-mine-bg); color: var(--dv-mine-fg); }
.dv-dev { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--textColour-primary, #25292e); font-variant-numeric: tabular-nums; }
.dv-dev .f-icon { flex: none; color: var(--textColour-secondary, #59636e); }
.dv-dev__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-dev--none { color: var(--textColour-tertiary, #818b98); }

/* Marker art: the person's pin draws larger than its box, as on the map. */
.dv-marker { flex: none; width: 34px; height: 38px; display: flex; align-items: center; justify-content: center; position: relative; }
.dv-marker img { height: 48px; width: auto; display: block; }
.dv-marker--device img { height: 100%; }
.dv-row--manage .dv-marker { width: 34px; height: 34px; }
.dv-row--manage .dv-marker img { height: 34px; }
.dv-row--manage { gap: calc(12px * var(--sp, 1)); padding: calc(11px * var(--sp, 1)) calc(8px * var(--sp, 1)) calc(11px * var(--sp, 1)) calc(12px * var(--sp, 1)); }
.dv-row--manage .dv-row__open { gap: calc(12px * var(--sp, 1)); }
.dv-row--manage .dv-row__name { font-weight: 600; line-height: 19px; }
.dv-marker__dot { position: absolute; right: -1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--dv-ok-dot); box-shadow: 0 0 0 2px var(--sfColour-primary, #fff); }
.dv-marker--sev-critical .dv-marker__dot { background: var(--dv-crit-dot); }
.dv-marker--sev-warning .dv-marker__dot { background: #bf8700; }
.dv-who { flex: none; max-width: 42%; min-width: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.dv-who__name { max-width: 100%; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-who__meta { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 15px; color: var(--textColour-tertiary, #818b98); white-space: nowrap; }
.dv-who__meta .f-batt { font-size: 11px; color: inherit; }

/* Checkbox: 22px box in a 44px target. */
.dv-pick { flex: none; position: relative; width: 44px; height: 44px; margin: -10px -6px -10px -10px; display: grid; place-items: center; cursor: pointer; }
.dv-pick__box { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* No tracker to unpair: the box keeps the row aligned, greyed and inert. */
.dv-pick.is-disabled, .dv-pick.is-disabled .dv-pick__box { cursor: default; }
.dv-pick.is-disabled .dv-pick__ui { opacity: 0.4; }
.dv-pick__ui {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: #fff; pointer-events: none;
  border: 1.5px solid var(--dv-pick-border); background: transparent;
  transition: background var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease;
}
.dv-pick__ui .f-icon { stroke-width: 3; opacity: 0; transition: opacity var(--duration-fast, 120ms) ease; }
.dv-pick__box:checked + .dv-pick__ui { background: var(--field-coral, #f1582b); border-color: var(--field-coral, #f1582b); }
.dv-pick__box:checked + .dv-pick__ui .f-icon { opacity: 1; }
.dv-pick__box:focus-visible + .dv-pick__ui { outline: 2px solid var(--field-coral, #f1582b); outline-offset: 2px; }

/* "⋯" */
.dv-more {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--textColour-secondary, #59636e); cursor: pointer;
  transition: background var(--duration-normal, 200ms) ease;
}
.dv-more:hover, .dv-more:focus-visible { background: var(--sfColour-hover, #eff2f5); }
.dv-more::after { content: ""; position: absolute; }

/* Cards (the card layout). */
.dv-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: calc(12px * var(--sp, 1)); }
.dv-card {
  position: relative; display: flex; border-radius: 8px; background: var(--sfColour-primary, #fff);
  border: 1px solid var(--borderColour-primary, #e0e6eb); transition: background var(--duration-normal, 200ms) ease, border-color var(--duration-normal, 200ms) ease;
}
.dv-card.is-picked { background: var(--dv-selected-bg); border-color: var(--field-coral, #f1582b); }
.dv-card__open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(8px * var(--sp, 1)); padding: calc(12px * var(--sp, 1));
  border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.dv-card .dv-row__name { font-weight: 600; line-height: 19px; }
.dv-card .dv-row__l2 { margin-top: -2px; }
.dv-marker--card { width: 40px; height: 44px; }
.dv-marker--card img { height: 56px; }
.dv-marker--card.dv-marker--device img { height: 40px; }
.dv-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.dv-card__tools { position: absolute; top: calc(8px * var(--sp, 1)); right: calc(6px * var(--sp, 1)); display: flex; align-items: center; }
.dv-card__tools .dv-pick { width: 36px; height: 36px; margin: 0; }

/* Empty states. */
.dv-empty {
  margin-top: 14px; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: 8px; border: 1px dashed var(--borderColour-primary, #e0e6eb);
}
.dv-empty__art { position: relative; width: 64px; height: 64px; border-radius: 999px; background: var(--sfColour-hover, #eff2f5); display: grid; place-items: center; }
.dv-empty__art img { height: 36px; width: auto; opacity: 0.55; }
.dv-empty__badge {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--sfColour-primary, #fff); border: 1px solid var(--borderColour-primary, #e0e6eb); color: var(--textColour-secondary, #59636e);
}
.dv-empty__title { margin: 14px 0 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.dv-empty__hint { margin: 4px 0 14px; max-width: 260px; font-size: 13px; line-height: 18px; color: var(--textColour-secondary, #59636e); text-wrap: pretty; }
.dv-empty .dv-btn { height: 36px; padding: 0 14px; font-size: 13px; }
.dv-note {
  margin: 14px 0 0; padding: 24px 16px; text-align: center; font-size: 13px; line-height: 18px; color: var(--textColour-tertiary, #818b98);
  border-radius: 8px; border: 1px dashed var(--borderColour-primary, #e0e6eb);
}

/* ---------------------------------------------------------------- menus (popovers) */
.dv-menu {
  inset: auto; margin: 0; position: fixed; width: 212px; box-sizing: border-box; padding: 4px;
  flex-direction: column; gap: 2px; border-radius: 8px; color: var(--textColour-primary, #25292e);
  background: var(--sfColour-primary, #fff); border: 1px solid var(--borderColour-primary, #e0e6eb); box-shadow: var(--dv-menu-shadow);
}
.dv-menu:popover-open { display: flex; animation: dv-fade 120ms ease-out; }
.dv-menu--sort { padding: 6px; }
.dv-menu__title { padding: 6px 8px 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--textColour-tertiary, #818b98); }
.dv-menu__item {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: 0; border-radius: 5px;
  background: transparent; font: inherit; font-size: 14px; color: inherit; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.dv-menu__item:hover, .dv-menu__item:focus-visible { background: var(--sfColour-hover, #eff2f5); outline: 0; }
.dv-menu__item--danger { color: var(--dv-red); }
.dv-menu--sort .dv-menu__item { height: auto; padding: calc(9px * var(--sp, 1)) calc(8px * var(--sp, 1)); border-radius: 6px; font-size: 13px; }
.dv-menu--sort .dv-menu__item span { flex: 1; }
.dv-menu--sort .dv-menu__item[aria-current="true"] { background: var(--sfColour-hover, #eff2f5); }
.dv-menu--sort .f-icon { color: var(--textColour-brand, #f1582b); stroke-width: 2.4; }
@keyframes dv-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- bulk bar */
.dv-bulk {
  position: fixed; z-index: 21; left: 0; right: 0; bottom: calc(var(--field-tab-h, 56px) + max(8px, var(--field-safe-bottom, 0px)));
  display: flex; gap: 8px; padding: 12px var(--dv-gx);
  background: var(--sfColour-primary, #fff); border-top: 1px solid var(--borderColour-primary, #e0e6eb);
  box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.06); animation: f-slide-up 200ms ease both;
}
@media (min-width: 700px) {
  .dv-bulk { left: var(--field-rail-w, 72px); bottom: 0; padding-bottom: calc(12px + var(--field-safe-bottom, 0px)); }
}
.dv-bulk__cancel, .dv-bulk__go {
  height: 46px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.dv-bulk__cancel { flex: none; padding: 0 16px; background: var(--sfColour-primary, #fff); color: var(--textColour-primary, #25292e); border: 1px solid var(--borderColour-primary, #e0e6eb); }
.dv-bulk__go { flex: 1; border: 0; background: var(--lm-red-5, #cf222e); color: #fff; transition: background var(--duration-normal, 200ms) ease; }
.dv-bulk__go:hover { background: var(--lm-red-6, #a40e26); }
.dv.has-picks .dv-spacer { height: 80px; }
.dv.has-picks .dv-fab { display: none; }

/* ---------------------------------------------------------------- FAB */
.dv-fab { position: fixed; z-index: 8; right: var(--dv-gx); bottom: calc(var(--field-tab-h, 56px) + max(8px, var(--field-safe-bottom, 0px)) + 16px); }
@media (min-width: 700px) { .dv-fab { bottom: calc(24px + var(--field-safe-bottom, 0px)); } }
.dv-fab__btn {
  width: 56px; height: 56px; border-radius: 999px; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--lm-brand-4, #f1582b); color: #fff;
  box-shadow: 0 8px 20px -6px rgba(241, 88, 43, 0.55), 0 2px 6px rgba(16, 24, 40, 0.18);
  transition: background var(--duration-normal, 200ms) ease;
}
.dv-fab__btn:hover { background: var(--lm-brand-5, #d6431a); }
.dv-fab__btn svg path { transform-origin: 12px 12px; transition: transform var(--duration-normal, 200ms) ease; }
.dv-fab:has(.dv-fabmenu:popover-open) .dv-fab__btn svg path { transform: rotate(45deg); }
.dv-fabmenu {
  inset: auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
  position: fixed; right: var(--dv-gx); bottom: calc(var(--field-tab-h, 56px) + max(8px, var(--field-safe-bottom, 0px)) + 16px + 56px + 10px);
  flex-direction: column; align-items: flex-end; gap: 8px;
}
@media (min-width: 700px) { .dv-fabmenu { bottom: calc(24px + var(--field-safe-bottom, 0px) + 56px + 10px); } }
.dv-fabmenu::backdrop { background: transparent; }
.dv-fabmenu:popover-open { display: flex; animation: dv-fade 150ms ease-out; }
.dv-fabmenu__item {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--sfColour-primary, #fff); border: 1px solid var(--borderColour-primary, #e0e6eb);
  box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.35); font: inherit; font-size: 14px; font-weight: 500;
  color: var(--textColour-primary, #25292e); white-space: nowrap; transition: background var(--duration-normal, 200ms) ease;
}
.dv-fabmenu__item:hover { background: var(--sfColour-hover, #eff2f5); }

/* ---------------------------------------------------------------- work groups */
.dv-group {
  display: flex; align-items: center; gap: calc(10px * var(--sp, 1));
  padding: calc(11px * var(--sp, 1)) calc(10px * var(--sp, 1)) calc(11px * var(--sp, 1)) calc(12px * var(--sp, 1));
  background: var(--sfColour-primary, #fff); color: inherit; text-decoration: none; transition: background var(--duration-normal, 200ms) ease;
}
.dv-group:hover { background: var(--sfColour-hover, #eff2f5); }
.dv-group > .f-icon { flex: none; color: var(--textColour-tertiary, #818b98); }
.dv-wg {
  --wg: #818b98;
  flex: none; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--wg);
}
[data-theme="dark"] .dv-wg--none { --wg: #656c76; }
.dv-wg--lg, .dv-group--card .dv-wg { width: 40px; height: 40px; border-radius: 8px; font-size: 16px; }
.dv-group__main { flex: 1; min-width: 0; }
.dv-group__l1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dv-group__name { min-width: 0; font-size: 14px; line-height: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-group__sub { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--textColour-secondary, #59636e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-group__stats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--textColour-tertiary, #818b98); font-variant-numeric: tabular-nums; }
.dv-group__stats > span { display: inline-flex; align-items: center; gap: 4px; }
.dv-group__n { flex: none; font-size: 12px; color: var(--textColour-tertiary, #818b98); }
.dv-member { flex: none; height: 18px; padding: 0 6px; border-radius: 3px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; background: rgba(241, 88, 43, 0.12); color: var(--lm-brand-5, #d6431a); }
.dv-galert { flex: none; height: 18px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; background: #fff1e5; color: #953800; }
.dv-galert--critical { background: #ffebe9; color: #a40e26; }
[data-theme="dark"] .dv-galert { background: rgba(219, 109, 40, 0.16); color: #f0883e; }
[data-theme="dark"] .dv-galert--critical { background: rgba(248, 81, 73, 0.15); color: #ff7b72; }
.dv-gcards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dv-group--card {
  gap: calc(12px * var(--sp, 1)); padding: calc(12px * var(--sp, 1)) calc(10px * var(--sp, 1)) calc(12px * var(--sp, 1)) calc(12px * var(--sp, 1));
  border-radius: 8px; border: 1px solid var(--borderColour-primary, #e0e6eb);
}

/* An open work group's header, in place of the tab row. */
.dv-ghead { padding: 10px var(--dv-gx) 12px; background: var(--sfColour-primary, #fff); border-bottom: 1px solid var(--borderColour-primary, #e0e6eb); }
.dv-back {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; margin-left: -8px; padding: 0 12px 0 6px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--lm-brand-4, #f1582b); text-decoration: none; transition: background var(--duration-normal, 200ms) ease;
}
.dv-back:hover { background: var(--sfColour-hover, #eff2f5); }
.dv-back .f-icon { stroke-width: 2.2; }
.dv-ghead__row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.dv-ghead__main { flex: 1; min-width: 0; }
.dv-ghead__l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dv-ghead__name { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; }
.dv-ghead__sub { margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--textColour-secondary, #59636e); }
.dv--groups .dv-bar { border-top: 0; }

/* ---------------------------------------------------------------- record drawer */
.dvr { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--sfColour-primary, #fff); }
.dvr-head.f-drawer__head { flex: none; padding: 18px 64px 16px var(--dv-gx); }
@media (min-width: 700px) { .dvr-head.f-drawer__head { padding-right: 104px; } }
.dvr-head__row { display: flex; align-items: center; gap: 16px; padding-left: 8px; }
.dvr-av { position: relative; flex: none; width: 30px; height: 30px; transition: width var(--duration-normal, 200ms) ease, height var(--duration-normal, 200ms) ease; }
.dvr-av img { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; display: block; }
.dvr-av--device img { object-fit: contain; }
.dvr-head__text { flex: 1; min-width: 0; }
.dvr-name {
  margin: 0; font-family: var(--font-display, Inter); font-size: 19px; line-height: 25px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size var(--duration-normal, 200ms) ease, line-height var(--duration-normal, 200ms) ease;
}
.dvr-role {
  margin-top: 2px; height: 19px; font-size: 12px; line-height: 17px; color: var(--textColour-secondary, #59636e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: height 220ms ease, opacity 160ms ease;
}
.dvr-mini { display: none; flex: none; }
.dvr-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; max-height: 64px; overflow: hidden;
  transition: max-height 220ms ease, margin-top 220ms ease, opacity 160ms ease;
}
.dvr-chips .f-pill, .dvr-chip { padding: 3px 9px; font-size: 12px; }
.dvr-chip { display: inline-flex; align-items: center; border-radius: 999px; font-weight: 500; background: var(--dv-chip-bg); color: var(--dv-chip-fg); }
.dvr-chip--mine { background: var(--dv-mine-bg); color: var(--dv-mine-fg); }
.dvr.is-compact .dvr-av { width: 26px; height: 26px; }
.dvr.is-compact .dvr-name { font-size: 16px; line-height: 21px; }
.dvr.is-compact .dvr-role { height: 0; opacity: 0; }
.dvr.is-compact .dvr-chips { max-height: 0; margin-top: 0; opacity: 0; }
.dvr.is-compact .dvr-mini { display: inline-flex; animation: f-fade 160ms ease both; }

.dvr-tabs.f-drawer__tabs { flex: none; position: relative; display: block; padding: 8px; }
.dvr-seg { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--sfColour-hover, #eff2f5); }
.dvr-seg__item {
  flex: 1; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--sp, 1));
  font-size: 13px; font-weight: 500; color: var(--textColour-secondary, #59636e); text-decoration: none;
  transition: background var(--duration-normal, 200ms) ease, color var(--duration-normal, 200ms) ease;
}
.dvr-seg__item[aria-current="page"] { background: var(--sfColour-primary, #fff); color: var(--textColour-primary, #25292e); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
[data-theme="dark"] .dvr-seg__item[aria-current="page"] { background: #3d444d; color: #fff; box-shadow: inset 0 0 0 1px #656c76; }
.dvr-seg__n { font-size: 11px; color: var(--textColour-tertiary, #818b98); font-family: var(--font-mono-accent, Inter); font-variant-numeric: tabular-nums; }
.dvr-body.f-drawer__body { padding: 14px var(--dv-gx) 24px; background: var(--sfColour-primary, #fff); }

.dvr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dvr-tile { padding: 10px 11px; border-radius: 6px; border: 1px solid var(--borderColour-primary, #e0e6eb); background: var(--sfColour-primary, #fff); }
.dvr-tile__label { font-size: 11px; color: var(--textColour-tertiary, #818b98); }
.dvr-tile__value { margin-top: 2px; font-size: 22px; line-height: 26px; }
.dvr-tile__value.is-critical { color: var(--dv-crit-fg); }
.dvr-tile__value.is-warning { color: var(--dv-warn-fg); }
.dvr-split { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--textColour-tertiary, #818b98); }
.dvr-split > span { display: inline-flex; align-items: center; gap: 5px; }
.dvr-split__c.is-on { color: var(--dv-crit-fg); }
.dvr-split__w.is-on { color: #953800; }
[data-theme="dark"] .dvr-split__w.is-on { color: #f0b072; }
.dvr-diamond { flex: none; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--dv-muted-dot); }
.dvr-triangle { flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--dv-muted-dot); }
.dvr-split__c.is-on .dvr-diamond, .dvr-ev--critical .dvr-diamond { background: var(--dv-crit-dot); }
.dvr-split__w.is-on .dvr-triangle, .dvr-ev--warning .dvr-triangle { border-bottom-color: var(--dv-warn-dot); }
.dvr-batt { margin-top: 2px; }
.dvr-batt .f-batt { gap: 7px; font-size: 20px; line-height: 24px; color: var(--textColour-primary, #25292e); }
.dvr-batt .f-batt__body { width: 22px; height: 12px; }
.dvr-batt .f-batt__pct { font-family: var(--font-mono-accent, Inter); font-variant-numeric: tabular-nums; }
.dvr-batt.is-low .f-batt { color: var(--dv-warn-fg); }

.dvr-label.dv-section__label { margin: 18px 0 8px; }
.dvr-rows {
  margin: 0; display: flex; flex-direction: column; gap: 1px; background: var(--borderColour-primary, #e0e6eb);
  border: 1px solid var(--borderColour-primary, #e0e6eb); border-radius: 8px; overflow: hidden;
}
.dvr-rowi { display: flex; align-items: center; gap: calc(12px * var(--sp, 1)); padding: calc(10px * var(--sp, 1)) calc(12px * var(--sp, 1)); background: var(--sfColour-primary, #fff); }
.dvr-rowi dt { flex: none; width: 120px; font-size: 12px; color: var(--textColour-tertiary, #818b98); }
.dvr-rowi dd { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.dvr-rowi dd img { height: 26px; width: auto; }

.dvr-foot.f-drawer__foot { flex: none; padding: 12px var(--dv-gx) max(12px, var(--field-safe-bottom, 0px)); background: var(--sfColour-primary, #fff); }
.dvr-mapbtn {
  flex: 1; height: 48px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500; text-decoration: none; background: var(--dv-dark-btn-bg); color: var(--dv-dark-btn-fg);
  transition: opacity var(--duration-normal, 200ms) ease;
}
.dvr-mapbtn:hover { opacity: 0.9; }

/* Events. */
.dvr-evchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--dv-gx)) 14px; padding: 0 var(--dv-gx); }
.dvr-evchips::-webkit-scrollbar { display: none; }
.dvr-evchip {
  flex: none; height: 30px; padding: 0 calc(12px * var(--sp, 1)); border-radius: 999px; display: flex; align-items: center; gap: calc(6px * var(--sp, 1));
  font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap;
  background: var(--sfColour-primary, #fff); color: var(--textColour-primary, #25292e); border: 1px solid var(--borderColour-primary, #e0e6eb);
  transition: background var(--duration-normal, 200ms) ease, color var(--duration-normal, 200ms) ease;
}
.dvr-evchip[aria-current="true"] { background: var(--dv-chip-on-bg); color: var(--dv-chip-on-fg); border-color: transparent; }
.dvr-evchip__n { opacity: 0.75; font-family: var(--font-mono-accent, Inter); font-variant-numeric: tabular-nums; }
.dvr-evempty { margin: 0; padding: 22px 12px; text-align: center; font-size: 13px; color: var(--textColour-tertiary, #818b98); }
.dvr-evlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dvr-ev { position: relative; }
/* the timeline between icons */
.dvr-ev:not(:last-child)::before {
  content: ""; position: absolute; left: calc(40px + 10px + 13.5px); top: 34px; bottom: 0; width: 1px;
  background: var(--dividerColour-primary, #e0e6eb);
}
.dvr-ev__s {
  display: grid; grid-template-columns: 40px 28px minmax(0, 1fr) 16px; align-items: start; column-gap: calc(10px * var(--sp, 1));
  padding-bottom: 12px; list-style: none; cursor: pointer;
}
.dvr-ev__s::-webkit-details-marker { display: none; }
.dvr-ev__time { padding-top: 6px; font-size: 12px; color: var(--textColour-secondary, #59636e); }
.dvr-ev__icon { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; }
/* critical is a rounded square, everything else a circle */
.dvr-ev--critical .dvr-ev__icon { border-radius: 7px; box-shadow: 0 0 0 1.5px currentColor; }
.dvr-ev__text { min-width: 0; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; transition: background var(--duration-normal, 200ms) ease; }
.dvr-ev__s:hover .dvr-ev__text { background: var(--sfColour-hover, #eff2f5); }
.dvr-ev__title { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; }
.dvr-ev__sub { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--textColour-tertiary, #818b98); }
.dvr-ev__s > .f-icon { margin-top: 5px; color: var(--textColour-tertiary, #818b98); transition: transform var(--duration-normal, 200ms) ease; }
.dvr-ev__d[open] .dvr-ev__s > .f-icon { transform: rotate(180deg); }
.dvr-ev__more {
  margin: -4px 0 12px calc(40px + 28px + 20px + 2px); padding: 12px; border-radius: 8px;
  border: 1px solid var(--borderColour-primary, #e0e6eb); background: var(--bgColour-primary, #f6f8fa);
  animation: dv-fade 160ms ease-out;
}
.dvr-ev__d[data-target-event] .dvr-ev__more { border-color: var(--borderColour-secondary, #d1d9e0); }
.dvr-evf { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.dvr-evf dt { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--textColour-tertiary, #818b98); }
.dvr-evf dd { margin: 3px 0 0; font-size: 13px; line-height: 18px; color: var(--textColour-primary, #25292e); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dvr-evf dd.is-strong { font-weight: 600; }
.dvr-evf dd.is-critical { color: var(--dv-red); }
.dvr-evf dd.is-warning { color: var(--dv-warn-dot); }
.dvr-evf__s { font-weight: 400; color: var(--textColour-tertiary, #818b98); }
.dvr-ev__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dvr-ev__acts .dv-btn { font-size: 13px; padding: 0 12px; }
.dvr-evnote { margin: 4px 0 0; font-size: 11px; line-height: 16px; color: var(--textColour-tertiary, #818b98); }
.dvr-tone--ok, .dvr-tone--permitted { background: var(--dv-tone-ok-bg); color: var(--dv-tone-ok-fg); }
.dvr-tone--warn { background: var(--dv-tone-warn-bg); color: var(--dv-tone-warn-fg); }
.dvr-tone--info, .dvr-tone--informational { background: var(--dv-tone-info-bg); color: var(--dv-tone-info-fg); }
.dvr-tone--neutral { background: var(--dv-tone-neutral-bg); color: var(--dv-tone-neutral-fg); }
.dvr-tone--restricted { background: var(--dv-tone-restricted-bg); color: var(--dv-tone-restricted-fg); }
.dvr-tone--prohibited { background: var(--dv-tone-prohibited-bg); color: var(--dv-tone-prohibited-fg); }

/* ---------------------------------------------------------------- unassign dialog */
.dvu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dvu-head.f-modal__head { padding: 18px 16px 12px; border-bottom: 1px solid var(--borderColour-primary, #e0e6eb); }
.dvu-head h2 { font-family: var(--font-display, Inter); font-size: 20px; line-height: 28px; font-weight: 600; }
.dvu-sub { margin: 5px 0 0; font-size: 13px; line-height: 19px; color: var(--textColour-secondary, #59636e); }
.dvu-body.f-modal__body { padding: 14px 16px 16px; }
.dvu-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--borderColour-primary, #e0e6eb);
  border: 1px solid var(--borderColour-primary, #e0e6eb); border-radius: 8px; overflow: hidden;
}
.dvu-item { display: flex; align-items: center; gap: calc(10px * var(--sp, 1)); padding: calc(9px * var(--sp, 1)) calc(11px * var(--sp, 1)); background: var(--sfColour-primary, #fff); }
.dvu-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dvu-item__name { font-size: 13px; font-weight: 600; }
.dvu-item__sub { margin-top: 1px; font-size: 11px; color: var(--textColour-tertiary, #818b98); }
.dvu-item__sub.is-mine { color: var(--dv-warnbox-fg); }
.dvu-warn { margin-top: 13px; padding: 13px; border-radius: 6px; background: var(--dv-warnbox-bg); border: 1px solid var(--dv-warnbox-border); color: var(--dv-warnbox-fg); }
.dvu-warn__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.dvu-warn__title .f-icon { flex: none; }
.dvu-warn__body { margin: 7px 0 0; font-size: 13px; line-height: 18px; }
.dvu-ack { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 4px 0; cursor: pointer; font-size: 13px; line-height: 18px; font-weight: 500; }
.dvu-ack .dv-pick__box { width: 22px; height: 22px; inset: 4px auto auto 0; }
.dvu-ack .dv-pick__ui { flex: none; }
.dvu-foot.f-modal__foot { padding: 12px 16px max(26px, var(--field-safe-bottom, 0px)); }
.dvu-foot .f-btn { height: 48px; }
.dvu-go { background: var(--lm-red-5, #cf222e); color: #fff; border: 0; transition: background var(--duration-normal, 200ms) ease, color var(--duration-normal, 200ms) ease; }
.dvu:has(input[name="ack"]:not(:checked)) .dvu-go {
  background: var(--sfColour-hover, #eff2f5); color: var(--textColour-tertiary, #818b98); cursor: not-allowed;
}
@media (min-width: 700px) {
  .dvu-foot.f-modal__foot { padding-bottom: 16px; }
}

/* ---------------------------------------------------------------- round 2: prototype parity */

/* Unassign confirm: a bottom sheet on phones (grip, 12px top corners, up to
   82% of the screen, over a 40% dim), a centred 600px dialog from 700px. */
.f-modal:has(.dvu) { place-items: end stretch; }
.f-modal:has(.dvu) .f-modal__dim { background: rgba(0, 0, 0, 0.4); }
.f-modal__panel:has(.dvu) {
  height: auto; max-height: 82%; padding-top: 14px; border-radius: 12px 12px 0 0;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.06); animation: dvu-sheet 200ms ease-out both;
}
.dvu-grip { flex: none; display: flex; justify-content: center; margin-top: -14px; padding: 14px 0; }
.dvu-grip::before { content: ""; width: 36px; height: 4px; border-radius: 999px; background: var(--lm-neutral-4, #e0e6eb); }
.dvu-head.f-modal__head { padding-top: 0; }
@keyframes dvu-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  .f-modal:has(.dvu) { place-items: center; }
  .f-modal__panel:has(.dvu) {
    width: min(600px, calc(100% - 48px)); max-height: min(840px, calc(100% - 48px)); padding-top: 0; border-radius: 12px;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.08); animation: f-pop 200ms ease both;
  }
  .dvu-grip { display: none; }
  .dvu-head.f-modal__head { padding-top: 18px; }
}

/* The selection count wraps (as the prototype's does in French) rather than
   being cut off; Select all wraps with it. */
.dv-bar__count { min-width: auto; white-space: normal; overflow: visible; line-height: 16px; }
.dv-btn[data-dev-select-all] { white-space: normal; height: auto; min-height: 32px; padding-block: 2px; line-height: 16px; text-align: left; flex: 0 1 auto; }

/* The drawer header's pill is the device's state in the prototype's header
   colours: Warning orange there (the list's is yellow), Critical deep red. */
.dvr .f-pill--warning { background: #fff1e5; color: #953800; }
.dvr .f-pill--critical { background: #ffebe9; color: #a40e26; }
[data-theme="dark"] .dvr .f-pill--warning { background: rgba(219, 109, 40, 0.18); color: #f0b072; }
[data-theme="dark"] .dvr .f-pill--critical { background: rgba(248, 81, 73, 0.15); color: #ff8080; }