/* Inventory site: the inventory page from the clinic prototype, standing on its own (2026-10-15). style.css is the prototype's
   stylesheet unchanged; this file only adds the sign-in page and a few things the standalone shell needs. */
html, body { height: 100%; }
body.site-on { background: var(--bg); }
#app, .stage2 { min-height: 100%; }
.s2-main { width: 100%; }
.inv-signin { display: flex; justify-content: center; padding-top: 10vh; }
.inv-signin-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 24px; }
.inv-signin-card .brand { display: flex; align-items: center; gap: 10px; }
.inv-signin-card .brand .mark { width: 34px; height: 34px; display: inline-flex; color: var(--accent); }
.inv-signin-card .brand .mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.inv-signin-card .brand b { display: block; font-size: 16px; } .inv-signin-card .brand small { color: var(--muted); }
.inv-signin-card h1 { font-size: 24px; margin: 4px 0 0; }
.inv-signin-card .field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--muted); }
.inv-signin-card .field input { font: 16px/1.3 var(--font); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); }
.inv-signin-card button.primary { padding: 12px; font-size: 16px; border-radius: 10px; }
.inv-autherr { color: var(--bad); font-weight: 600; margin: 0; }
.inv-offline { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--warn); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; z-index: 50; width: max-content; }
@media (max-width: 560px) { .s2-top { padding: 10px 12px; } .s2-main { padding-left: 12px; padding-right: 12px; } }
/* People (owner): who can sign in */
.people-tbl { width: 100%; margin-bottom: 18px; }
.people-tbl td { vertical-align: middle; }
.people-tbl tr.off td { color: var(--muted); }
.people-tbl input.people-name { font: inherit; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; color: inherit; width: 180px; }
.people-tbl input.people-name:hover, .people-tbl input.people-name:focus { border-color: var(--line); background: var(--panel); outline: none; }
.people-tbl select, .people-add select, .people-add input, .people-tbl form input { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); }
.people-add { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.people-add h3 { margin: 0; font-size: 15px; }
.people-add .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.people-add .field input { width: 200px; }