/* Copyright 2026 Alex O <info@lifub.com> */

/*
 * Layered on top of the extension's vault.css, which is staged verbatim into
 * vault/. Everything a shared component renders — rows, monograms, status
 * badges, the detail pane, the monitor cards — is already styled there, which
 * is why this file is short: it covers only what the *app shell* adds or has to
 * differ on. Restyling shared components here would be how the two surfaces
 * start to drift.
 */

/* The app owns the whole viewport, where the extension page is a tab in a
   browser that already frames it. */
body { min-width: 0; }
.vault-shell { max-width: 1320px; margin: 0 auto; }

/* No extension options page to link to, and no per-vault sidebar rows yet, so
   the sidebar is shorter than the extension's and should not stretch. */
.vault-layout { min-height: 620px; }

/* Loading is a real state here: the extension's service worker is already
   running when its page opens, whereas this page must spin up a worker and
   compile the WASM core before it can say anything true about the vault. */
#loadingState { margin-top: 120px; }

/* Non-interactive monitor cards — the web app reports the counts but does not
   yet offer the drill-down, so they must not look clickable. */
.monitor-card { cursor: default; }

.capability-note { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(255,204,102,.18); border-radius: 12px; background: rgba(255,204,102,.05); }
.capability-note h4 { margin: 0 0 6px; color: #ffcc66; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.capability-note p { margin: 0; color: #9a8a68; font-size: 10px; line-height: 1.6; }

.acknowledge { display: flex; align-items: center; gap: 9px; margin: 16px 0; color: #b8c0cc; font-size: 12px; }
.acknowledge input { width: 15px; height: 15px; accent-color: #73d0ff; }

.login-detail-field dd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.optional { color: #737e8b; font-weight: 400; }

/* Encrypted backup. Its own block rather than reusing `.login-form`, which is
   an item editor and carries assumptions about the item pane's lifecycle. */
.backup-panel { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(115,208,255,.18); border-radius: 12px; background: rgba(115,208,255,.04); }
.backup-panel h4 { margin: 0 0 6px; color: #73d0ff; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.backup-note { margin: 0 0 12px; color: #8a9199; font-size: 10px; line-height: 1.6; }
.backup-form { display: grid; gap: 6px; }
.backup-form label { color: #b8c0cc; font-size: 11px; }
.backup-result { margin: 12px 0 0; color: #a6cc70; font-size: 11px; line-height: 1.6; }
.backup-result[data-state="error"] { color: #f28779; }