/* System inventory layout. */
.page-inventory .inventory-alert {
  margin-bottom: 18px;
}

.inventory-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.inventory-summary-card {
  padding: 14px 16px;
  display: grid;
  gap: 6px;
  min-height: 92px;
}

.inventory-summary-card span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.inventory-summary-card strong {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1;
}

.inventory-summary-card.ok {
  border-color: rgba(47,255,178,.25);
}

.inventory-summary-card.warning {
  border-color: rgba(255,209,102,.32);
}

.inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin-bottom: 16px;
}

.inventory-search,
.inventory-filter {
  display: grid;
  gap: 6px;
}

.inventory-search span,
.inventory-filter span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.inventory-search input,
.inventory-filter select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8,17,31,.72);
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
}

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

.inventory-accordion {
  display: grid;
  gap: 16px;
}

.inventory-collapsible {
  overflow: hidden;
}

.inventory-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,.026);
}

.inventory-collapsible > summary::-webkit-details-marker {
  display: none;
}

.inventory-collapsible > summary::before {
  content: "▶";
  color: var(--blue);
  font-weight: 900;
}

.inventory-collapsible[open] > summary::before {
  content: "▼";
}

.inventory-collapsible > summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.inventory-collapsible > summary small {
  color: var(--muted);
}

.inventory-collapsible > div,
.inventory-collapsible > .inventory-list,
.inventory-collapsible > .inventory-permission-model,
.inventory-collapsible > .plugin-status-grid,
.inventory-collapsible > .inventory-log-grid {
  padding: 16px 18px 18px;
}

.inventory-list {
  display: grid;
  gap: 14px;
}

.inventory-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(109,178,255,.22);
}

.inventory-card[hidden] {
  display: none !important;
}

.inventory-card.sensitive {
  border-color: rgba(255,209,102,.24);
  box-shadow: inset 0 0 0 1px rgba(255,209,102,.06);
}

.inventory-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--system-color, rgba(109,178,255,.42));
}

.inventory-card.sensitive::before {
  background: rgba(255,209,102,.58);
}

.inventory-card.backup::before,
.inventory-card.game_server::before {
  background: rgba(255,159,67,.68);
}

.inventory-card.vpn::before {
  background: rgba(53,167,255,.62);
}

.inventory-card.service::before {
  background: rgba(47,255,178,.50);
}

.inventory-card.host::before {
  background: rgba(47,255,178,.68);
}

.inventory-component-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px 14px 20px;
}

.inventory-component-summary::-webkit-details-marker {
  display: none;
}

.inventory-component-summary > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.inventory-component-summary strong,
.inventory-component-summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inventory-component-summary small {
  color: var(--muted);
}

.inventory-component-body {
  padding: 0 16px 16px 20px;
}

.inventory-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 9px;
  margin-top: 12px;
}

.inventory-field {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8,17,31,.58);
  padding: 9px 10px;
  min-width: 0;
}

.inventory-field span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 4px;
}

.inventory-field strong,
.inventory-field code {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 850;
}

.inventory-section {
  margin-top: 13px;
}

.inventory-section h4 {
  margin: 0 0 8px;
  font-size: .92rem;
  color: var(--text);
}

.inventory-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  padding: 7px 10px;
  color: var(--muted);
  font-size: .84rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.inventory-chip.sensitive {
  border-color: rgba(255,209,102,.38);
  color: #ffe2a3;
  background: rgba(255,209,102,.08);
}

.inventory-chip.ok {
  border-color: rgba(47,255,178,.38);
  color: #b6ffe7;
  background: rgba(47,255,178,.08);
}

.inventory-chip.missing {
  border-color: rgba(255,77,109,.36);
  color: #ffb3c0;
  background: rgba(255,77,109,.08);
}

.inventory-path-list {
  display: grid;
  gap: 8px;
}

.inventory-path {
  border: 1px solid rgba(109,178,255,.18);
  border-radius: 12px;
  background: rgba(53,167,255,.045);
  padding: 8px 10px;
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size: .84rem;
  overflow-wrap: anywhere;
}

.inventory-note-list {
  display: grid;
  gap: 8px;
}

.inventory-note {
  border: 1px dashed rgba(255,209,102,.28);
  border-radius: 12px;
  background: rgba(255,209,102,.055);
  padding: 8px 10px;
  color: #ffe2a3;
  font-size: .88rem;
}

.secret-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(255,255,255,.035);
}

.secret-row div {
  min-width: 0;
}

.secret-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.secret-row small {
  color: var(--muted);
}

.secret-value {
  grid-column: 1 / -1;
  margin-top: 6px;
  border: 1px solid rgba(255,209,102,.28);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(8,17,31,.72);
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size: .84rem;
  overflow-wrap: anywhere;
}

.inventory-permission-model {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.inventory-permission-model p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

.inventory-rule-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.inventory-rule {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: .88rem;
}

.inventory-log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  gap: 9px;
  margin-top: 12px;
}

.inventory-log-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: 10px;
}

.inventory-log-item strong {
  display: block;
}

.inventory-log-item small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.inventory-empty {
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px;
}

@media (max-width: 1050px) {
  .inventory-toolbar {
    grid-template-columns: 1fr;
  }

  .inventory-toolbar-actions {
    justify-content: flex-start;
  }

  .inventory-meta-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px) {
  .inventory-meta-grid {
    grid-template-columns: 1fr;
  }

  .secret-row {
    grid-template-columns: 1fr;
  }

  .inventory-chip-list {
    display: grid;
  }

  .inventory-chip {
    border-radius: 14px;
  }

  .inventory-component-summary {
    grid-template-columns: 1fr;
  }
}

/* Stable inventory toolbar and filter states. */
.inventory-refresh-btn,
.inventory-toggle-all-btn {
  width: 148px;
  min-width: 148px;
  max-width: 148px;
  min-height: 42px;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}

.inventory-refresh-btn[data-busy="true"],
.inventory-toggle-all-btn[data-state] {
  width: 148px;
  min-width: 148px;
  max-width: 148px;
}

.inventory-toolbar-actions .btn {
  min-height: 42px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 14px;
}

#inventory-filter-empty {
  margin-bottom: 16px;
}