/* ─── DEVICES / INSTALL PAGE (Task 16A) ─────────────────────────
   Minimal, functional styling reusing the same tokens/cards/buttons
   every other page already uses (base.css + components.css) -- no new
   design system introduced for this page. */

.devices-section {
  padding: 1rem 5% 0;
  max-width: 760px;
}

.devices-section:last-child { padding-bottom: 2rem; }

.devices-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  /* This section sits directly over .home-bg's full-bleed photo (same
     background home.html/admin-host-requests.html also use) -- over a
     bright/busy photo, unscrimmed heading text failed contrast (found
     via a real screenshot of admin-host-requests.html, confirmed the
     same gap exists here on the already-deployed Devices page too).
     Same frosted-panel technique landing.css's .hero-text already
     uses, so both pages sharing this file get the fix consistently. */
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
}

.devices-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
}

.devices-subtitle {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.devices-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.devices-installation-name {
  font-size: 1rem;
  font-weight: 600;
}

.devices-installation-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.devices-empty {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0.4rem 0;
}

.devices-list { display: flex; flex-direction: column; }

.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.device-row:last-child { border-bottom: none; }

.device-row-name { font-size: 0.9rem; font-weight: 500; }

.device-row-active {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2e8b57;
  background: rgba(46,139,87,0.12);
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.device-row-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.device-row-revoke {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
}

.device-row-revoke:hover { color: #c0392b; border-color: #c0392b; }

.platform-list { display: flex; flex-direction: column; }

.platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.platform-row:last-child { border-bottom: none; }

.platform-row-name { font-size: 0.9rem; font-weight: 500; }

.platform-row-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.platform-row-action .btn { font-size: 0.78rem; padding: 0.45rem 1rem; }

.platform-row-unavailable {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
}

.devices-revoke-prompt {
  padding: 0 1.2rem;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.devices-revoke-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.2rem 1.2rem;
}

.devices-error {
  color: #c0392b;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.devices-connect-btn {
  margin-top: 0.8rem;
}

/* .btn sets display:inline-flex with equal (class-level) specificity to
   the [hidden] attribute's own UA-stylesheet display:none -- on an
   equal-specificity tie the later external stylesheet rule wins, so
   without this override a hidden .btn stays visually visible. #id
   specificity guarantees this always wins regardless of stylesheet
   order (found via live-browser verification, Task 16C). */
#connectNewDeviceBtn[hidden] {
  display: none;
}

/* Same .btn/[hidden] specificity gap as above -- #enablePushBtn
   (admin-host-requests.html, K1) is toggled the same way. Found via
   the exact same real-screenshot technique this time, not by
   inspection alone. */
#enablePushBtn[hidden] {
  display: none;
}

.devices-limit-note {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.devices-pair-body {
  padding: 0.4rem 1.2rem 1.2rem;
  text-align: center;
}

.devices-pair-qr {
  width: 220px;
  height: 220px;
  margin: 0.5rem auto;
  display: block;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px;
}

.devices-pair-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0.4rem 0;
}

.devices-pair-expiry {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.devices-pair-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 0.5rem;
}

/* ─── ADMIN DASHBOARD (XC1) ──────────────────────────────────── */
.dash-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.2rem;
}

.dash-tab-btn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  cursor: pointer;
}

.dash-tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

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

.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.dash-stat-card {
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.dash-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dash-stat-label {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.status-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  text-transform: uppercase;
}

.status-badge.st-active   { color: #2e8b57; background: rgba(46,139,87,0.12); }
.status-badge.st-pending_purge { color: #b8860b; background: rgba(184,134,11,0.14); }
.status-badge.st-admin    { color: #4a5fc1; background: rgba(74,95,193,0.12); margin-left: 0.35rem; }

.dash-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-row-actions .btn { font-size: 0.72rem; padding: 0.35rem 0.65rem; }

.dash-inline-form {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}

.dash-retention-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}