/* ============================================================
   PARIS VIA — кабинет учётных записей.

   Надстройка над vault.css: формы, окна, список и переключатель там уже
   описаны и выглядят как весь хаб. Здесь только то, чего в реестре паролей
   нет — блоки страницы, строка сотрудника и метки состояния учётки.
   ============================================================ */

.c-block { margin-top: 34px; }
.c-block:first-child { margin-top: 8px; }

.c-block-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.c-count { font-size: 14px; color: var(--muted); white-space: nowrap; }

.c-hint { padding: 6px 0 0; font-size: 14px; }
.c-hint-warn { color: var(--warn); }

.c-card {
  background: var(--card); border-radius: var(--r-card);
  padding: 22px 26px; margin-top: 14px;
  display: flex; flex-direction: column; max-width: 460px;
}
.c-form-foot { margin-top: 20px; }

/* ---------- строка сотрудника ---------- */

/* Учётка идёт третьей строкой под именем и мета-данными: логин и состояние
   читают глазами сверху вниз, а не ищут по правому краю. */
.c-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }

.c-login {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; color: var(--purple);
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 12px;
}
.c-seen { font-size: 13px; color: var(--muted); }

.c-badge {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.c-badge-on  { color: var(--open); background: var(--open-bg); }
.c-badge-new { color: var(--warn); background: #F6EBDA; }
.c-badge-off { color: var(--danger); background: #F6E3E0; }
.c-badge-adm { color: var(--on-purple); background: var(--purple); }

.c-grant {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--purple); color: var(--on-purple);
  border: none; border-radius: 999px; padding: 9px 18px;
  font: inherit; font-size: 15px; cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.c-grant:hover { background: var(--purple-600); transform: translateY(-1px); }
.c-grant .ico { width: 18px; height: 18px; }

/* ---------- логин и пароль после выдачи ---------- */

.c-creds { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.c-cred {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.c-cred:last-child { border-bottom: none; }
.c-cred span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.c-cred b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400; font-size: 19px; color: var(--purple);
  /* Пароль переписывают с экрана и диктуют по телефону: даём выделить целиком. */
  user-select: all; word-break: break-all;
}

/* ---------- всплывающая подсказка ---------- */

.c-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--purple); color: var(--on-purple);
  padding: 10px 18px; border-radius: 999px; z-index: 70;
  font-size: 15px; margin: 0; max-width: calc(100% - 32px); text-align: center;
}

@media (max-width: 560px) {
  .c-card { padding: 20px; }
  /* Кнопка выдачи на телефоне уезжает под текст: в строку она не влезает,
     а обрезанная надпись хуже переноса. */
  .v-item { flex-wrap: wrap; }
  .v-acts { width: 100%; justify-content: flex-end; }
}