/* app.css — общие элементы, которых не было в демо (вход, формы, ошибки).
   Строится только на токенах из tokens.css. */

.topbar-spacer{flex:1}
.btn:disabled{opacity:.5;cursor:default}
.account-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* Inline form error (modals, login) */
.form-error{color:var(--destructive);font-size:.82rem;margin:10px 0 0}

/* Loading / empty states */
.page-loading{color:var(--muted);padding:var(--sp-xl) 0;text-align:center}
.page-error{color:var(--destructive)}

/* Auth pages (login / consents): centred card without the app frame */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-md);background:var(--bg)}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-xl);width:100%;max-width:420px;box-shadow:0 1px 3px rgba(17,17,17,.05)}
.auth-brand{font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:var(--primary);letter-spacing:-.01em}
.auth-sub{color:var(--muted);font-size:.82rem;margin:2px 0 var(--sp-lg)}
.auth-card h1{font-size:1.3rem;margin:0 0 6px}
.auth-card p.lead{color:var(--muted);font-size:.88rem;margin:0 0 var(--sp-md)}
.auth-card label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:12px 0 4px}
.auth-card input[type=email],.auth-card input[type=text]{width:100%;box-sizing:border-box;padding:10px 12px;
  border:1px solid var(--input);border-radius:var(--r-md);font:inherit;background:var(--card)}
.auth-card input:focus{outline:2px solid var(--ring);outline-offset:-1px}
.auth-card .btn{width:100%;justify-content:center;margin-top:var(--sp-md)}
.auth-card .link-btn{border:0;background:none;color:var(--primary);cursor:pointer;font:inherit;font-size:.84rem;padding:0;margin-top:var(--sp-sm)}
.auth-note{background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--r-md);
  padding:10px 12px;font-size:.84rem;margin:0 0 var(--sp-md)}
.dev-code{font-family:ui-monospace,monospace;font-weight:700;letter-spacing:.15em}
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin:12px 0;cursor:pointer}
.consent-row input{margin-top:3px;accent-color:var(--primary)}

/* Generic form grid used in edit modals */
.modal.wide{max-width:640px;max-height:calc(100vh - 32px);overflow-y:auto}
.field-hint{font-size:.74rem;color:var(--muted);margin:3px 0 0}
.copy-row{display:flex;gap:8px;align-items:center;margin-top:12px}
.copy-row input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--input);border-radius:var(--r-sm);font:inherit;font-size:.82rem}

/* ===== Фильтры-чипы — из demo-web/styles/block-people.css (нужны нескольким фронтам) ===== */
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 6px}
.fchip{padding:7px 13px;border:1px solid var(--border);border-radius:999px;font-size:.85rem;background:var(--card);cursor:pointer}
.fchip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.sub{color:var(--muted);font-size:.88rem;margin:0 0 18px}
.fchip-pill{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:999px;padding:7px 13px;font-size:.8rem;color:var(--fg);
  cursor:pointer;font-family:inherit;
}
.fchip-pill.on{background:var(--accent-soft);border-color:var(--primary);color:var(--primary);font-weight:600}
.fchip-pill .x{margin-left:6px;font-weight:700;cursor:pointer}
.fchip-pill select{
  border:0;outline:0;background:transparent;font:inherit;color:inherit;
  cursor:pointer;font-size:.8rem;font-family:inherit;
  /* cap so long option labels don't blow the chip to full width — keep filters
     compact (1–2 rows). The native dropdown popup is unaffected. */
  max-width:150px;text-overflow:ellipsis;
}
.filters-clear{font-size:.78rem;color:var(--primary);cursor:pointer;font-weight:600}
.tag{background:var(--muted-bg);border-radius:6px;padding:2px 7px;font-size:.72rem;color:var(--muted)}

/* Заголовок первым в блоке-карточке — без верхнего отступа .label (26px нужен между секциями, не у края). */
.prof-block > .label:first-child{margin-top:0}

/* Вход администратора под пользователем — заметно, чтобы не забыть вернуться. */
.imp-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff7e0;border:1px solid #f5d9a0;
  color:#7a4b00;border-radius:var(--r-md);padding:6px 12px;font-size:.84rem}
.imp-banner .btn{background:#a06000;border-color:#a06000}
.btn-xs{padding:3px 10px;font-size:.74rem}