/* ============================================================================
   MGIoT — Backup & Restore page (2026-07-01)
   Scope: #viewBackup. Reuses --r27-* tokens (mgiot-redesign-2027.css) and
   follows the same card/pill-button language as mgiot-page-installations.css
   (see .ix-* there) so this page reads as part of the same design system.
   ========================================================================== */

#viewBackup .bk-grid{
  display:grid; gap:18px; margin-top:18px;
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  align-items:start;
}

/* ── Card shell ───────────────────────────────────────────────────────── */
#viewBackup .bk-card{
  background:var(--r27-surface); border:1px solid var(--r27-line);
  border-radius:22px; box-shadow:var(--r27-sh); padding:22px;
}
#viewBackup .bk-card--danger{ border-color:#F3C9C9; }

#viewBackup .bk-card-head{ display:flex; align-items:flex-start; gap:12px; }
#viewBackup .bk-card-ic{
  width:42px; height:42px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
#viewBackup .bk-card-ic svg{ width:20px; height:20px; }
#viewBackup .bk-ic--accent{ background:#EAF1FC; color:var(--r27-accent); }
#viewBackup .bk-ic--danger{ background:var(--r27-red-bg); color:var(--r27-red); }
#viewBackup .bk-card-title{ margin:0; font-size:15px; font-weight:800; color:var(--r27-ink); letter-spacing:-.01em; }
#viewBackup .bk-card-sub{ margin:4px 0 0; font-size:12.5px; color:var(--r27-ink-faint); line-height:1.5; }

/* ── Warning banner (restore card) ───────────────────────────────────── */
#viewBackup .bk-warning{
  margin-top:14px; padding:12px 14px; border-radius:14px;
  background:var(--r27-red-bg); border:1px solid #F3C9C9;
}
#viewBackup .bk-warning strong{ display:block; font-size:12.5px; font-weight:800; color:var(--r27-red); }
#viewBackup .bk-warning p{ margin:5px 0 0; font-size:12px; color:var(--r27-ink-mid); line-height:1.55; }

/* ── Item rows ────────────────────────────────────────────────────────── */
#viewBackup .bk-items{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
#viewBackup .bk-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px; border-radius:14px; background:var(--r27-surface-2);
  border:1px solid var(--r27-line);
}
#viewBackup .bk-item--col{ flex-direction:column; align-items:stretch; gap:8px; }
#viewBackup .bk-item-text strong{ font-size:13.5px; font-weight:800; color:var(--r27-ink); }
#viewBackup .bk-item-text p{ margin:3px 0 0; font-size:12px; color:var(--r27-ink-faint); line-height:1.5; }
#viewBackup .bk-item--col > strong{ font-size:13px; font-weight:800; color:var(--r27-ink); }

/* ── File picker (styled as a pill, native input hidden but functional) ── */
#viewBackup .bk-file{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--r27-line-2); background:var(--r27-surface);
  border-radius:999px; font-weight:700; font-size:12.5px; padding:8px 16px;
  cursor:pointer; color:var(--r27-ink-mid); width:fit-content;
  transition:background var(--r27-ease), border-color var(--r27-ease);
}
#viewBackup .bk-file:hover{ background:var(--r27-surface-2); border-color:#D7DEE8; }
#viewBackup .bk-file input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
#viewBackup .bk-file-name{ font-size:11.5px; color:var(--r27-ink-faint); word-break:break-all; }

/* ── Fields (TOTP / confirm text) ────────────────────────────────────── */
#viewBackup .bk-field{ margin-top:16px; }
#viewBackup .bk-field label{ display:block; font-size:12px; font-weight:700; color:var(--r27-ink-mid); margin-bottom:6px; }
#viewBackup .bk-field input[type="text"]{
  width:100%; box-sizing:border-box; padding:10px 14px; border-radius:12px;
  border:1px solid var(--r27-line-2); background:var(--r27-surface);
  font-size:13.5px; font-family:inherit; color:var(--r27-ink);
}
#viewBackup .bk-field input[type="text"]:focus{ outline:none; border-color:var(--r27-accent); }
#viewBackup .bk-totp-input{ direction:ltr; letter-spacing:.35em; text-align:center; font-family:'Inter', ui-monospace, SFMono-Regular, Menlo, monospace; }

#viewBackup .bk-error{ min-height:16px; margin-top:8px; font-size:12px; font-weight:700; color:var(--r27-red); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
#viewBackup .bk-btn{
  border:1px solid var(--r27-line-2); background:var(--r27-surface); color:var(--r27-ink-mid);
  border-radius:999px; font-weight:700; font-size:12.5px; padding:9px 16px; cursor:pointer;
  font-family:inherit; white-space:nowrap;
  transition:background var(--r27-ease), border-color var(--r27-ease), transform var(--r27-ease);
}
#viewBackup .bk-btn:hover{ transform:translateY(-1px); }
#viewBackup .bk-btn:disabled{ opacity:.6; cursor:default; transform:none; }
#viewBackup .bk-btn--primary{ background:#EAF1FC; border-color:#CFE0F8; color:var(--r27-accent); }
#viewBackup .bk-btn--primary:hover{ background:#DEE9FB; }
#viewBackup .bk-btn--danger{ background:var(--r27-red-bg); border-color:#F3C9C9; color:var(--r27-red); }
#viewBackup .bk-btn--danger:hover{ background:#FBDDDD; }

#viewBackup .bk-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
#viewBackup .bk-actions .bk-btn{ flex:1 1 auto; text-align:center; }

@media (max-width:520px){
  #viewBackup .bk-item{ flex-direction:column; align-items:stretch; }
  #viewBackup .bk-item .bk-btn{ width:100%; }
}