/* KeptSafe prototype v20: shared web app shell (load after keptsafe-theme.css) */
body { background: var(--bs-tertiary-bg); }
.proto-banner { background: #FFF4E6; color: #7A3E0A; font-size: .8rem; }
.proto-banner .btn { font-size: .75rem; }
.navbar-ks .nav-link { font-size: .9rem; display: inline-flex; align-items: center; }
.navbar-ks .nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--ks-ember); }
.navbar-ks .count { margin-left: .4rem; }
.user-chip { width: 32px; height: 32px; border-radius: 50%; background: var(--ks-ember); color: var(--ks-charcoal); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }

/* Proposed for brand kit v5: "closed" workflow state (billed, archived) in brand mist/ink. 13.5:1 / 8.9:1 */
.qs-closed { background: #EEF2F8; color: #16263F; border-color: #C9D4E6; }
[data-bs-theme="dark"] .qs-closed { background: #1B2D4A; color: #B9CDF0; border-color: #2C4470; }

.row-link { cursor: pointer; }
.row-link:hover td { background: var(--ks-mist); }
.money { font-variant-numeric: tabular-nums; }
.timeline { border-left: 2px solid var(--bs-border-color); padding-left: 14px; margin-left: 6px; }
.timeline .ev { position: relative; margin-bottom: .75rem; font-size: .85rem; }
.timeline .ev::before { content: ""; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bs-body-bg); border: 2px solid var(--bs-border-color); }
.timeline .ev:last-child::before { background: var(--ks-ember); border-color: var(--ks-ember); }
.queue-card { border-left: 4px solid #FFD43B !important; }
.field-chip { display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--ks-mist); color: var(--bs-primary-text-emphasis); white-space: nowrap; }
.sticky-side { position: sticky; top: 1rem; }
.lines td, .lines th { vertical-align: middle; }
.lines .num { width: 92px; }
.lines .price { width: 120px; }
.pb-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 280px; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.xero { display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.xero.synced { color: #0E7FA8; }
.xero.error { color: #8F3A0A; }
.xero.none { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .xero.synced { color: #7FD3F2; }
[data-bs-theme="dark"] .xero.error { color: #FFC9A3; }
.stat-tile .v { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.doc-preview { background: #fff; color: #1D2127; border: 1px solid #E1E4E8; border-radius: .5rem; }
.doc-preview .band { background: #B42318; color: #fff; padding: .75rem 1rem; border-radius: .5rem .5rem 0 0; font-weight: 800; letter-spacing: .02em; }
@media (max-width: 991.98px) { .sticky-side { position: static; } }
.state-chip { font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: .35rem; background: var(--ks-mist); color: var(--bs-primary-text-emphasis); }

/* Wider layout for 1080p and larger screens (v20): Bootstrap caps .container-xl at 1320px from 1400px up. */
@media (min-width: 1400px) { .container-xl, .container-fluid.px-xl-4 { max-width: 1800px; } }