/* Дополнения к стилям страниц: меню пользователя, вход, контроль, сотрудники.
   Подключается после css/<страница>.css. */

header.topbar{ flex-wrap:wrap; }
header.topbar .nav-links{ flex-wrap:wrap; align-items:center; justify-content:flex-end; }
header.topbar .nav-link.current{ background:rgba(255,255,255,.16); color:#fff; }
header.topbar .user-chip{
  font-size:13px;
  font-weight:600;
  color:#fff;
  padding:7px 4px 7px 12px;
  margin-left:6px;
  border-left:1px solid rgba(255,255,255,.22);
}
header.topbar button.nav-logout{
  flex:none;
  width:auto;
  background:transparent;
  font-family:inherit;
  cursor:pointer;
  box-shadow:none;
}

/* ---- баннер «у вас есть закупки без решения» ---- */
.pending-banner{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:#fff7e6;
  border:1px solid #f5d9a3;
  color:#8a5a00;
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:24px;
  font-size:14px;
}
.pending-banner strong{ color:#6b4500; }
.pending-banner button{
  flex:none;
  width:auto;
  background:#fff;
  color:#8a5a00;
  border:1px solid #f0c77a;
}

/* ---- отметки на карточках ---- */
.mark{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  align-self:flex-start;
}
.mark.new{ background:var(--accent-soft); color:var(--accent-dark); }
.mark.pending{ background:#fff1d6; color:#8a5a00; }
.mark.skipped{ background:#eef0f4; color:#56607a; }
.mark.done{ background:var(--ok-soft); color:#0a7a44; }

/* ---- бейджи статусов/категорий (дашборд, контроль, страница закупки) ---- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.badge.taken{ background:var(--warn-soft, #fdf3da); color:var(--warn, #b7791f); }
.badge.taken::before{ background:var(--warn, #b7791f); }
.badge.won{ background:var(--ok-soft); color:var(--ok); }
.badge.won::before{ background:var(--ok); }
.badge.declined, .badge.lost{ background:var(--danger-soft); color:var(--danger); }
.badge.declined::before, .badge.lost::before{ background:var(--danger); }
.badge.skip, .badge.skipped{ background:#eef0f4; color:#56607a; }
.badge.skip::before, .badge.skipped::before{ background:#8a93a8; }
.badge.ignored{ background:#fff1d6; color:#8a5a00; }
.badge.ignored::before{ background:#e0a100; }
.badge.unseen{ background:#fdecec; color:#a91e1e; }
.badge.unseen::before{ background:var(--danger); }
.badge.dismissed, .badge.dismiss, .badge.view{ background:#f1f3f7; color:#6b7688; }
.badge.dismissed::before, .badge.dismiss::before, .badge.view::before{ background:#b3bccb; }
.badge.take{ background:var(--warn-soft, #fdf3da); color:var(--warn, #b7791f); }
.badge.take::before{ background:var(--warn, #b7791f); }
.badge.decline{ background:var(--danger-soft); color:var(--danger); }
.badge.decline::before{ background:var(--danger); }

td.who{ color:var(--text-muted); white-space:nowrap; }
td.people{ font-size:12.5px; color:var(--text-muted); max-width:320px; }
td.people .p{ display:block; margin-bottom:3px; }
td.people .p.idle{ color:#8a5a00; font-weight:600; }
td.n{ font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
td.n.warn{ color:#b45309; font-weight:700; }
td.n.bad{ color:var(--danger); font-weight:700; }
th.n{ text-align:right; }
tbody tr.is-selected{ background:#eef3ff; }

.stat-card.is-clickable{ cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.stat-card.is-clickable:hover{ border-color:#c9d6f5; }
.stat-card.is-active{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.stat-card.unseen .stat-value{ color:var(--danger); }
.stat-card.ignored .stat-value{ color:#b45309; }
.stat-card.skipped .stat-value{ color:#56607a; }
.stat-card.decided .stat-value{ color:var(--ok); }

/* ---- страница закупки: кто смотрел / что нажимали ---- */
.history-section{ margin-top:36px; }
.history-section h2{
  margin:0 0 12px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-muted);
  font-weight:700;
}
.history-list{ list-style:none; margin:0 0 24px; padding:0; font-size:13.5px; }
.history-list li{
  padding:9px 0;
  border-bottom:1px solid var(--border);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:baseline;
}
.history-list li:last-child{ border-bottom:none; }
.history-list .when{ color:var(--text-muted); font-size:12.5px; margin-left:auto; white-space:nowrap; }
.history-list .muted{ color:var(--text-muted); }
.my-note{
  font-size:13px;
  color:#56607a;
  background:#f1f3f7;
  border-radius:9px;
  padding:10px 14px;
  margin-bottom:16px;
}
.btn-skip{
  background:#fff;
  color:#56607a;
  border:1px dashed #b3bccb;
}
.btn-skip:hover{ background:#f4f6f9; }

/* ---- формы в панелях (сотрудники) ---- */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px 16px;
  padding:4px 24px 20px;
  align-items:end;
}
.form-grid .field{ min-width:0; }
.form-grid input, .form-grid select{
  width:100%;
  padding:9px 11px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#fbfcfe;
  font-size:13.5px;
  font-family:inherit;
  color:var(--text);
}
.form-grid input:focus, .form-grid select:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.form-grid input[type=checkbox]{ width:auto; }
.form-grid .check{ display:flex; align-items:center; gap:8px; font-size:13.5px; padding-bottom:9px; }
.form-actions{ display:flex; gap:10px; padding:0 24px 20px; flex-wrap:wrap; }
.btn{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  padding:9px 18px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; }
.btn.ghost{ background:#fff; color:var(--text-muted); border-color:var(--border); }
.btn.small{ padding:5px 12px; font-size:12.5px; }
.form-error{ color:var(--danger); font-size:13px; padding:0 24px 16px; }
.muted{ color:var(--text-muted); }
.pill-off{ font-size:11.5px; font-weight:700; color:#a91e1e; background:#fdecec; padding:2px 8px; border-radius:999px; margin-left:6px; }
.pill-admin{ font-size:11.5px; font-weight:700; color:var(--accent-dark); background:var(--accent-soft); padding:2px 8px; border-radius:999px; margin-left:6px; }

/* ---- страница входа ---- */
body.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}
.login-card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:32px 28px 28px;
}
.login-card h1{ margin:0 0 6px; font-size:22px; }
.login-card p{ margin:0 0 22px; color:var(--text-muted); font-size:13.5px; }
.login-card .field{ margin-bottom:14px; max-width:none; }
.login-card input{
  width:100%;
  padding:11px 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#fbfcfe;
  font-size:15px;
  font-family:inherit;
  color:var(--text);
}
.login-card input:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.login-card button{ width:100%; margin-top:6px; }
.login-card .form-error{ padding:0 0 12px; }