/* Admin device inventory and details. Reseller and owner surfaces keep their own skin. */
.admin-device-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 11px;
  padding: 8px 11px;
  border: 1px solid #473b65;
  border-radius: 13px;
  background: #201c32;
}
.admin-platform-filter__text { flex: 1 1 100px; display: grid; min-width: 0; gap: 2px; }
.admin-platform-filter__text small { color: #b9adcf; font-size: .68rem; }
.admin-platform-filter__text strong { color: #f0e9ff; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.admin-platform-filter__text strong span { color: #b4a4d4; }
.admin-device-filter .btn { min-block-size: 44px; border-radius: 10px; color: #e5d9fa; border-color: #52446e; }
.admin-device-filter .btn svg { inline-size: 16px; block-size: 16px; }
.admin-status-filter__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #31294b;
  color: #d9c9ff;
}
.admin-status-filter__icon svg { width: 19px; height: 19px; }
.admin-active-device-card .admin-device-facts { grid-template-columns: minmax(0,1fr); }
.admin-devices-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "intro count" "search search";
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  padding-block: 3px 1px;
}
.admin-devices-intro { grid-area: intro; min-inline-size: 0; }
.admin-devices-intro .eyebrow { color: var(--admin-lavender, #b3a7ff); }
.admin-devices-intro h1 { margin-block: 4px; font-size: clamp(1.5rem, 4.5vw, 2.35rem); }
.admin-devices-intro .subtle { color: var(--admin-muted, #a4acc2); }
.admin-devices-header .admin-devices-count {
  grid-area: count;
  justify-self: end;
  min-block-size: 30px;
  max-inline-size: min(100%, 140px);
  border: 1px solid #413a68;
  border-radius: 999px;
  background: #24203a;
  color: #d6cdff;
}
.admin-devices-header .admin-devices-search {
  grid-area: search;
  margin: 0;
  border-color: var(--admin-line, #30354d);
  background: var(--admin-panel, #141928);
  box-shadow: 0 3px 12px rgb(1 4 12 / 23%);
}
.admin-devices-header .admin-devices-search:focus-within {
  border-color: #8476e5;
  box-shadow: 0 0 0 3px rgb(166 151 255 / 16%);
}
.admin-devices-header .admin-devices-search > .icon-btn {
  --control-top: #37305f;
  --control-bottom: #2b264c;
  --control-edge: #514780;
  --control-hover: #8172d2;
  color: #ddd4ff;
}
.admin-devices-header .admin-devices-search > .search-clear {
  --control-top: #25283c;
  --control-bottom: #1d2131;
  --control-edge: #34394f;
  color: #adb5cc;
}

.admin-devices-results .admin-device-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 304px), 1fr));
  gap: 12px;
}
.admin-devices-results .admin-device-list > :not(.admin-device-record) { grid-column: 1 / -1; }
.admin-devices-results .empty {
  border-color: var(--admin-line, #30354d);
  background: var(--admin-panel, #141928);
}
.admin-device-card.admin-device-record {
  --platform-line: var(--admin-lavender, #a697ff);
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  gap: 11px;
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid var(--admin-line, #30354d);
  border-radius: 18px;
  background: var(--admin-panel, #141928);
  box-shadow: 0 6px 19px rgb(2 4 11 / 25%), inset 0 1px rgb(222 226 255 / 4%);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.admin-device-card.admin-device-record::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 17px;
  inline-size: 38px;
  block-size: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--platform-line);
  content: "";
  pointer-events: none;
}
.admin-device-card.admin-device-record:is([data-platform="android"], [data-platform="android-mobile"]) { --platform-line: #65e5a3; }
.admin-device-card.admin-device-record:is([data-platform="tizen"], [data-platform="vidaa"]) { --platform-line: #91b7ff; }
.admin-device-card.admin-device-record[data-platform="webos"] { --platform-line: #fb9bb6; }
.admin-device-card.admin-device-record:is([data-platform="titan"], [data-platform="fire-tv"]) { --platform-line: #ffc189; }
.admin-device-card.admin-device-record[data-platform="roku"] { --platform-line: #c59bf4; }
.admin-device-card.admin-device-record[data-platform="unknown"] { --platform-line: #69718e; }
.admin-device-card.admin-device-record:focus-within {
  border-color: #7467bd;
  box-shadow: 0 6px 19px rgb(2 4 11 / 25%), 0 0 0 2px rgb(166 151 255 / 13%);
}
.admin-device-record .admin-device-head { align-items: center; gap: 8px; }
.admin-device-platform {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
  min-inline-size: 0;
}
.admin-device-platform > .admin-platform-logo {
  flex: 0 0 auto;
  inline-size: 54px;
  block-size: 43px;
  border-radius: 10px;
}
.admin-device-platform-copy { display: grid; min-inline-size: 0; gap: 1px; }
.admin-device-platform-copy strong { font-size: .88rem; font-weight: 700; line-height: 1.16; overflow-wrap: anywhere; }
.admin-device-platform-copy small { color: var(--admin-muted, #a4acc2); font-size: .69rem; line-height: 1.3; overflow-wrap: anywhere; }
.admin-device-states {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  max-inline-size: 51%;
}
.admin-device-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: 3px 7px;
  border: 1px solid #383e56;
  border-radius: 999px;
  background: #24293e;
  color: #c2c9df;
  font-size: .68rem;
  font-weight: 680;
  line-height: 1.23;
  text-align: center;
  overflow-wrap: anywhere;
}
.admin-device-state[data-tone="mint"] { border-color: #365751; background: #1b3735; color: #a0f1df; }
.admin-device-state[data-tone="amber"] { border-color: #624c48; background: #352a31; color: #ffd1a7; }
.admin-device-state[data-tone="lavender"] { border-color: #51477e; background: #2d2749; color: #d7cbff; }
.admin-device-state.admin-device-online {
  border-color: transparent;
  background: transparent;
  padding-inline: 4px;
}
.admin-device-online::before {
  flex: 0 0 auto;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.admin-device-online[data-tone="mint"] { color: var(--admin-aqua, #66e7d3); }
.admin-device-online[data-tone="neutral"] { color: var(--admin-muted, #a4acc2); }

.admin-device-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label id" "mac mac";
  align-items: center;
  gap: 4px 7px;
  min-inline-size: 0;
  padding: 8px 10px;
  border: 1px solid var(--admin-line, #2d3349);
  border-radius: 12px;
  background: #0d1321;
}
.admin-device-id-label { grid-area: label; color: var(--admin-muted, #a4acc2); font-size: .7rem; font-weight: 630; }
.admin-device-id {
  grid-area: id;
  justify-self: end;
  max-inline-size: 100%;
  color: #c3baff;
  font-size: .69rem;
  font-weight: 620;
  overflow-wrap: anywhere;
}
.admin-device-identity .mac {
  grid-area: mac;
  display: block;
  min-inline-size: 0;
  color: var(--text, #f3f5ff);
  font-size: clamp(1.01rem, 4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}
[dir="rtl"] .admin-device-identity .mac { text-align: right; }
.admin-device-record--detail .admin-device-identity {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "label id copy" "mac mac copy";
}
.admin-device-identity .admin-device-copy {
  grid-area: copy;
  --control-top: #37305f;
  --control-bottom: #292446;
  --control-edge: #4f457e;
  --control-hover: #8172d2;
  inline-size: 44px;
  min-block-size: 44px;
  color: #ded5ff;
}

.admin-device-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.admin-device-fact {
  display: grid;
  align-content: start;
  gap: 2px;
  min-inline-size: 0;
  padding: 6px 8px;
  border: 1px solid #2a3045;
  border-radius: 9px;
  background: #1a1f31;
}
.admin-device-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.admin-device-fact dt { color: var(--admin-muted, #a4acc2); font-size: .67rem; font-weight: 570; line-height: 1.25; }
.admin-device-fact dd { margin: 0; color: #e6e9f8; font-size: .77rem; font-weight: 640; line-height: 1.25; overflow-wrap: anywhere; }
.admin-device-note.card { border-color: var(--admin-line, #30354d); background: var(--admin-panel, #141928); }

.admin-device-record > .admin-device-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-inline-size: 0;
  padding-block-start: 9px;
  border-block-start: 1px solid var(--admin-line, #30354d);
}
.admin-device-record > .admin-device-actions .btn {
  --control-top: #272d44;
  --control-bottom: #20263a;
  --control-edge: #3e4561;
  --control-hover: #646c93;
  min-inline-size: 0;
  min-block-size: 44px;
  padding-inline: 5px;
  border-radius: 10px;
  font-size: .75rem;
}
.admin-device-record > .admin-device-actions .btn svg { color: currentColor; }
.admin-device-record > .admin-device-actions .btn.soft {
  --control-top: #4d407f;
  --control-bottom: #392f66;
  --control-edge: #6656a4;
  --control-hover: #a697ff;
  color: #f0eaff;
}
.admin-device-record > .admin-device-actions .btn.quiet {
  --control-top: #191e2f;
  --control-bottom: #171c2b;
  --control-edge: #333a51;
  --control-hover: #5d6589;
  color: #bdc4dd;
}
.dialog:has(.admin-device-record--detail) .dialog-actions .btn.primary {
  --control-top: #b1a3ff;
  --control-bottom: #9c8bee;
  --control-edge: #bdb1ff;
  --control-hover: #ddd4ff;
  color: #15112b;
}

.admin-devices-results > .page-actions .pager > bdi {
  justify-self: center;
  padding: 5px 10px;
  border: 1px solid var(--admin-line, #30354d);
  border-radius: 999px;
  background: var(--admin-panel, #141928);
  color: #c2bbec;
}

@media (max-width: 420px) {
  .admin-device-record > .admin-device-actions .btn { flex-direction: column; gap: 3px; padding-block: 6px; }
  .admin-device-record .admin-device-states { flex-direction: column; align-items: flex-end; }
}
@media (max-width: 330px) {
  .admin-device-platform { gap: 6px; }
  .admin-device-platform > .admin-platform-logo { inline-size: 46px; block-size: 39px; }
  .admin-device-record--detail .admin-device-identity { grid-template-areas: "label id copy" "mac mac mac"; }
}
@media (max-width: 799px) {
  .admin-devices-results > .page-actions { background: linear-gradient(180deg, transparent, var(--admin-ink, #0b101b) 26%); }
}
@media (min-width: 800px) {
  .admin-devices-results > .page-actions .pager { inline-size: min(100%, 345px); margin-inline-start: auto; }
}
@media (min-width: 960px) {
  .admin-devices-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(246px, 342px);
    grid-template-areas: "intro count search";
    gap: clamp(12px, 2vw, 20px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .admin-device-card.admin-device-record:hover { border-color: #4c4f70; }
}