/* =========================================================
   Admin portal: dashboard, users, roles, activity, devices, server
   ========================================================= */
.adm .page-title { align-items: center; }
.adm-tabs { max-width: 100%; }
.adm-tabs button { padding: 9px 12px; min-height: 40px; }
.adm-date { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-bottom: 12px; flex-wrap: wrap; }
.adm-date .live { display: inline-flex; align-items: center; gap: 4px; color: var(--green); background: var(--green-50); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; }
.adm-date .live .ic { animation: admpulse 1.6s ease-in-out infinite; }
@keyframes admpulse { 50% { opacity: .35; } }
.adm-grid { align-items: start; }
.adm-note { border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; padding: 12px 18px; }
.adm-note .ic { color: var(--red); margin-top: 2px; }
.adm-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.adm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-who .av { width: 36px; height: 36px; font-size: 13px; }
.adm-who b { display: block; }
.nowrap { white-space: nowrap; }

/* ---- "needs attention" card ---- */
.attn-card .card-body { padding: 6px; }
.attn-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 12px; color: var(--ink); min-height: 56px; }
.attn-row:hover { background: var(--red-50); }
.attn-row > .ic:last-child { color: var(--muted); }
.attn-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #F3ECEC; color: var(--ink-2); flex: none; }
.attn-ic.bad { background: var(--red-100); color: var(--red-d); }
.attn-ic.warn { background: #FFF1D6; color: #9A6100; }
.attn-ic.ok { background: var(--green-50); color: var(--green); }
.attn-t { flex: 1; min-width: 0; }
.attn-t b { display: block; font-size: 14px; }
.attn-t small { color: var(--muted); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attn-val { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--ink-2); flex: none; }
.attn-val.bad, .attn-val .attn-txt.bad { color: var(--red); }
.attn-val.warn { color: #9A6100; }
.attn-val.ok { color: var(--green); }
.attn-val.muted { color: var(--muted); }
.attn-txt { font-size: 13px; }

/* ---- live feed ---- */
.feed { max-height: 460px; overflow: auto; }
.feed-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; padding: 10px 14px; color: var(--ink); min-height: 56px; }
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--red-50); }
.feed-q { font-weight: 800; color: var(--red); font-size: 15px; font-variant-numeric: tabular-nums; min-width: 46px; }
.feed-row.st-void .feed-q { color: var(--muted); text-decoration: line-through; }
.feed-main { flex: 1; min-width: 0; }
.feed-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.feed-main small { color: var(--muted); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.feed-right b { font-variant-numeric: tabular-nums; }

/* ---- users ---- */
.adm-users td { vertical-align: middle; }
.adm-users .tag { vertical-align: 2px; }

/* ---- roles matrix ---- */
.roles-table th.c, .roles-table td.c { text-align: center; width: 92px; }
.roles-table td.c .switch { justify-content: center; }
.roles-table td.fixed { color: var(--green); }
.roles-table tr.grp td { background: #FDFAFA; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 14px; }
.roles-table td .sub { white-space: normal; max-width: 460px; line-height: 1.35; margin-top: 2px; }

/* ---- activity ---- */
.act-table td { font-size: 13px; }
.act-lbl { display: inline-block; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #F3ECEC; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.act-lbl.bad { background: var(--red-100); color: var(--red-d); }
.act-lbl.warn { background: #FFF1D6; color: #9A6100; }
.act-detail { color: var(--ink-2); max-width: 420px; overflow-wrap: anywhere; }
.act-more { padding: 14px; text-align: center; border-top: 1px solid var(--line); }
.toolbar .chip.active { min-height: 36px; }
.toolbar .btn-ghost.active { background: var(--red-50); color: var(--red); }

/* ---- devices ---- */
.dev-list { display: flex; flex-direction: column; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-height: 60px; }
.dev-row:last-child { border-bottom: 0; }
.dev-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #F3ECEC; color: var(--ink-2); flex: none; }
.dev-ic.on { background: var(--green-50); color: var(--green); }
.dev-t { flex: 1; min-width: 0; }
.dev-t b { display: block; font-size: 14px; }
.dev-t small { color: var(--muted); font-size: 12px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.dev-t .tag { vertical-align: 2px; }

/* ---- server ---- */
.srv { padding: 8px 18px; }
.srv-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.srv-row:last-child { border-bottom: 0; }
.srv-row span:first-child { color: var(--muted); font-weight: 600; flex: none; }
.srv-row b { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.srv-row b code, .srv-url code { font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 12.5px; background: #F7F2F2; border-radius: 6px; padding: 2px 6px; }
.srv .ok { color: var(--green); display: inline-flex; align-items: center; gap: 4px; }
.srv .bad { color: var(--red); display: inline-flex; align-items: center; gap: 4px; }
.srv .notice { margin: 10px 0 4px; }
.srv-urls { display: flex; flex-direction: column; gap: 8px; }
.srv-url { display: flex; align-items: center; gap: 10px; background: var(--red-50); border-radius: 12px; padding: 8px 8px 8px 12px; }
.srv-url code { flex: 1; background: none; font-size: 14px; font-weight: 700; color: var(--red-d); overflow-wrap: anywhere; padding: 0; }
.srv-url .btn { flex: none; }
.adm-howto { background: #FDFAFA; border: 1px dashed var(--line-2); border-radius: 14px; padding: 14px 16px; margin-top: 8px; text-align: left; }
.adm-howto h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.adm-howto h4 .ic { color: var(--red); }
.adm-howto ol { margin: 0; padding-left: 20px; color: var(--ink-2); line-height: 1.7; font-size: 13.5px; }
.adm-howto code { background: #fff; border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; font-size: 12.5px; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .adm .page-title { align-items: stretch; }
  .adm-tabs { width: 100%; }
  .adm-tabs button span { display: none; }
  .adm-tabs button.active span { display: inline; }
  .feed { max-height: none; }
  .roles-table th.c, .roles-table td.c { width: 64px; }
  .act-detail { max-width: 220px; }
}
@media (max-width: 520px) {
  .minis { grid-template-columns: repeat(2, 1fr); }
  .attn-t small { white-space: normal; }
  .feed-main small { white-space: normal; }
  .srv-row { flex-direction: column; gap: 2px; }
  .srv-row b { text-align: left; }
  .srv-url { flex-wrap: wrap; }
  .roles-table th:first-child, .roles-table td:first-child { max-width: 160px; }
  .adm-actions { justify-content: flex-start; }
}