/* ═══════════════════════════════════════════════════════════════════════
   CÂN ĐIỆN TỬ — Giám sát & Cài đặt (/scale-admin)
   Layout web thường (MainLayout). Token-based để hợp cả Light & Dark mode:
   dùng var(--mud-palette-*) / rgba(var(--ag-fg-rgb), …) thay vì màu cứng.
   ═══════════════════════════════════════════════════════════════════════ */

.sa-page { display:grid; gap:14px; padding-top:20px; }

.sa-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.sa-title { display:flex; align-items:center; gap:10px; }
.sa-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ── Thẻ tổng quan ── */
.sa-summary { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.sa-summary-card {
    display:flex; gap:10px; align-items:center; padding:10px 14px; min-height:64px;
    border:1px solid var(--mud-palette-lines-default); border-radius:10px;
    background:rgba(var(--ag-fg-rgb), .03);
}
.sa-summary-icon {
    display:grid; place-items:center; width:38px; height:38px; border-radius:9px;
    background:rgba(var(--mud-palette-primary-rgb), .1); color:var(--mud-palette-primary); flex:0 0 auto;
}
.sa-summary-num { font-size:1.35rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }

/* ── Card khung chung ── */
.sa-card {
    border:1px solid var(--mud-palette-lines-default); border-radius:10px;
    background:rgba(var(--ag-fg-rgb), .02); overflow:hidden;
}
.sa-card-head {
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:12px 16px; border-bottom:1px solid var(--mud-palette-lines-default);
    background:rgba(var(--mud-palette-primary-rgb), .04);
}
.sa-card-body { padding:14px 16px; }

/* ── Bảng giám sát cân ── */
.sa-weight { font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sa-weight small { font-weight:600; font-size:.72rem; opacity:.65; margin-left:3px; }
.sa-scale-name { font-weight:700; }
.sa-port { font-family:Consolas, "Cascadia Mono", monospace; font-size:.82rem; opacity:.75; }
.sa-muted { opacity:.55; }

/* Nhịp đập nhẹ cho cân đang cân (chưa ổn định) — tôn trọng reduce-motion */
.sa-live-dot {
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--mud-palette-success); margin-right:6px;
    animation:sa-pulse 1.2s ease-in-out infinite;
}
@keyframes sa-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .sa-live-dot { animation:none; } }

/* ── Empty state ── */
.sa-empty {
    display:grid; place-items:center; gap:12px; text-align:center;
    padding:32px 18px; min-height:200px;
}
.sa-empty-icon { color:var(--mud-palette-text-disabled); }
.sa-empty code {
    font-family:Consolas, "Cascadia Mono", monospace;
    background:rgba(var(--ag-fg-rgb), .08); border-radius:5px; padding:1px 6px;
}

/* ── Hướng dẫn / code block có nút copy ── */
.sa-codeblock {
    position:relative; display:flex; align-items:flex-start; gap:8px;
    border:1px solid var(--mud-palette-lines-default); border-radius:8px;
    background:rgba(var(--ag-fg-rgb), .05); padding:10px 12px; margin:6px 0;
}
.sa-codeblock pre {
    margin:0; flex:1 1 auto; overflow-x:auto; white-space:pre;
    font-family:Consolas, "Cascadia Mono", monospace; font-size:.82rem; line-height:1.55;
}
.sa-codeblock .sa-copy-btn { flex:0 0 auto; }
.sa-step-note { font-size:.82rem; opacity:.72; margin-top:4px; }
.sa-step-note code {
    font-family:Consolas, "Cascadia Mono", monospace;
    background:rgba(var(--ag-fg-rgb), .08); border-radius:4px; padding:0 4px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .sa-actions { width:100%; }
    .sa-summary { width:100%; }
    .sa-summary-card { flex:1 1 100%; }
}