/* Поверх pico — только то, чего в нём нет: бейджи статусов, панель прогресса,
   плотные таблицы и моноширинные DSN. */

:root {
  --dbs-ok: #2e7d32;
  --dbs-wait: #8d6e00;
  --dbs-idle: #4a5568;
  --dbs-err: #b3261e;
  --dbs-done: #1565c0;
}

.brand { font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.muted { color: var(--pico-muted-color); }
.err { color: #ff8a80; white-space: pre-wrap; }

.badge {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 1rem;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
}
.badge-ok   { background: var(--dbs-ok); }
.badge-wait { background: var(--dbs-wait); }
.badge-idle { background: var(--dbs-idle); }
.badge-err  { background: var(--dbs-err); }
.badge-done { background: var(--dbs-done); }

article > header { display: flex; align-items: center; gap: .75rem; }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row > button, .row > a[role=button] { margin-bottom: 0; width: auto; }

label.inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
input.narrow { width: 10rem; margin: 0; }

/* Таблицы в админке — про плотность, а не про воздух. */
table { font-size: .92rem; }
td, th { padding: .45rem .6rem; vertical-align: middle; }
td progress { margin: .2rem 0; height: .4rem; }

.dsn { font-size: .8rem; word-break: break-all; }
button.copy {
  width: auto; margin: 0 0 0 .4rem; padding: .1rem .5rem;
  font-size: .72rem; vertical-align: middle;
}

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.kv dt { color: var(--pico-muted-color); }
dl.kv dd { margin: 0; }

.secret {
  border: 1px solid var(--dbs-wait);
  border-radius: var(--pico-border-radius);
  padding: .6rem .8rem;
  margin-bottom: .8rem;
}

.job-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .5rem 0; }
.stats > div { min-width: 7rem; }
.stats span { font-size: .8rem; }

pre.logs, pre.err {
  max-height: 26rem; overflow: auto; font-size: .78rem; line-height: 1.35;
}

/* Тосты ошибок: показываются в #errors и убираются крестиком. */
.toast {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-left: 4px solid var(--dbs-err);
  background: var(--pico-card-background-color);
  padding: .6rem .8rem; margin-bottom: 1rem; white-space: pre-wrap;
}
.toast button.close { width: auto; margin: 0; padding: 0 .5rem; background: none; border: none; }
button.danger { background: var(--dbs-err); border-color: var(--dbs-err); }

/* Выход стоит в шапке рядом с подписью: у pico форма — блок, а кнопка в ней
   растягивается на всю ширину, поэтому обе ужимаем по содержимому. */
.inline-form { margin: 0; }
.inline-form button { width: auto; padding: 0.25rem 0.75rem; margin: 0; font-size: 0.8rem; }