/* ============================================================================
   MGIoT — Activated Devices page (full redesign, self-contained on 2027 tokens)
   Scope: #viewActivations.  Loads after redesign-2027.
   ========================================================================== */

/* Clean header (matches Installations) */
#viewActivations .ax-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; margin-bottom:2px; border-bottom:1px solid var(--r27-line);
}
#viewActivations .ax-head-text{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
#viewActivations .ax-accent{
  width:4px; height:30px; border-radius:999px; flex-shrink:0;
  background:linear-gradient(180deg,var(--r27-accent),var(--r27-brand));
}
#viewActivations .ax-title{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--r27-ink); }
#viewActivations .ax-sub{ margin:2px 0 0; font-size:12px; color:var(--r27-ink-faint); }
#viewActivations .ax-head-actions{ margin-inline-start:auto; display:flex; gap:8px; }
#viewActivations .ax-btn{
  border:1px solid var(--r27-line-2); background:var(--r27-surface); color:var(--r27-ink-mid);
  border-radius:10px; font-weight:700; font-size:13px; padding:9px 14px; cursor:pointer; font-family:inherit;
  transition:background var(--r27-ease), border-color var(--r27-ease), transform var(--r27-ease);
}
#viewActivations .ax-btn:hover{ background:var(--r27-surface-2); border-color:#D7DEE8; transform:translateY(-1px); }

/* Toolbar */
#viewActivations .mg-toolbar{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
#viewActivations .mg-search{ flex:1; min-width:220px; }

/* ── Table (premium, airy) ────────────────────────────────────────────── */
#viewActivations .mg-table-wrap{
  background:var(--r27-surface); border:1px solid var(--r27-line);
  border-radius:14px; box-shadow:var(--r27-sh); overflow:hidden; margin-top:6px;
}
#viewActivations .mg-table{ width:100%; border-collapse:separate; border-spacing:0; }
#viewActivations .mg-table thead th{
  background:var(--r27-surface-2); color:var(--r27-ink-faint);
  font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:12px 16px; border-bottom:1px solid var(--r27-line); text-align:start; white-space:nowrap;
}
#viewActivations .mg-table tbody td{
  padding:13px 16px; border-bottom:1px solid var(--r27-line); font-size:13px; color:var(--r27-ink-mid); vertical-align:middle;
}
#viewActivations .mg-table tbody tr:last-child td{ border-bottom:0; }
#viewActivations .mg-cell-strong{ font-weight:800; color:var(--r27-ink); }
#viewActivations .mg-cell-mono{ font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--r27-ink-mid); }
#viewActivations .mg-cell-mid{ color:var(--r27-ink-soft); }
#viewActivations .mg-table .mg-badge{ border-radius:var(--r27-pill); font-weight:800; font-size:11px; padding:3px 10px; }

/* Clickable rows → device details */
#viewActivations .act-row{ cursor:pointer; transition:background var(--r27-ease); }
#viewActivations table.mg-table tbody tr.act-row:hover{ background:var(--r27-surface-2); }
#viewActivations .mg-table .mg-btn{
  border:1px solid var(--r27-line-2); background:#fff; color:var(--r27-ink-mid);
  border-radius:9px; font-weight:700; padding:5px 9px;
}
#viewActivations .mg-table .mg-btn--danger{ background:var(--r27-red-bg); border-color:#F3C9C9; color:var(--r27-red); }

/* ── Mobile cards ─────────────────────────────────────────────────────── */
#viewActivations .mg-row-card.act-row{
  background:var(--r27-surface); border:1px solid var(--r27-line); border-radius:14px;
  box-shadow:var(--r27-sh); padding:16px; cursor:pointer;
  transition:transform var(--r27-ease), box-shadow var(--r27-ease);
}
#viewActivations .mg-row-card.act-row:hover{ transform:translateY(-2px); box-shadow:var(--r27-sh-md); }
#viewActivations .mg-info-box{
  background:var(--r27-surface-2); border:1px solid var(--r27-line); border-radius:11px; padding:10px 12px;
}
#viewActivations .mg-info-label{ font-size:11px; font-weight:700; color:var(--r27-ink-faint); }
#viewActivations .mg-info-value{ font-size:13px; font-weight:700; color:var(--r27-ink); }
#viewActivations .mg-info-value--strong{ color:var(--r27-brand); }