/* Компоненты интерфейса. Размеры, цвета и отступы — из макета
   design/«Актив - паспорт оборудования.dc.html», классы повторяют его
   инлайновые стили. Всё строится на токенах из tokens.css. */

@import url("/static/css/fonts.css");
@import url("/static/css/tokens.css");

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -0.005em; margin: 0; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* ── Каркас ────────────────────────────────────────────────────────────── */

.shell {
  max-width: var(--content-max);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  gap: var(--gap-shell);
  padding: var(--gap-shell);
  background: var(--sand);
  align-items: stretch;
}

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: var(--gap-shell);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 18px;
  text-decoration: none;
  color: var(--color-text);
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__mark {
  width: 28px; height: 28px;
  border-radius: var(--pill);
  background: var(--color-accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.sidebar__name { font-size: 17px; font-weight: 700; }

.nav-item {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--pill);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
}
.nav-item:hover { text-decoration: none; background: rgba(255, 255, 255, .55); }
.nav-item--on {
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  color: var(--color-text);
}
.nav-item__count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.nav-item__badge {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  background: var(--color-accent-100); color: var(--color-accent-800);
  padding: 2px 8px; border-radius: var(--pill);
}
.sidebar__foot {
  margin-top: auto;
  padding: 14px 10px 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
}

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-panel); }

/* ── Панели ────────────────────────────────────────────────────────────── */

.panel {
  background: var(--card);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px;
}
.panel--list { padding: 24px 26px 26px; }
.panel--tight { padding: 20px 22px; }
.panel--accent { background: var(--color-accent-100); }

.panel-head { display: flex; align-items: flex-end; gap: 20px; }
.panel-head__actions { margin-left: auto; display: flex; gap: 8px; }
.panel-title {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel-title--accent { color: var(--color-accent-800); font-weight: 700; }
.panel-title--ok { color: var(--ok); font-weight: 700; }
.panel-title--warn { color: var(--warn); font-weight: 700; }
.panel-title--bad { color: var(--bad); font-weight: 700; }

.crumbs { font-size: 13px; color: var(--ink-2); }
.crumbs a { color: inherit; }
.h-page { font-size: 24px; }
.h-device { font-size: 28px; margin: 6px 0 0; }
.h-section { font-size: 18px; }
.sub { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }

.section-label {
  margin-top: 18px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-panel);
  align-items: start;
}
.cols-main { display: grid; grid-template-columns: 1fr 360px; gap: var(--gap-panel); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--gap-panel); }

/* Пары «лейбл — значение»: лейбл слева серым, значение справа */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin-top: 14px; font-size: 13.5px; }
.kv dt, .kv__k { color: var(--ink-2); margin: 0; }
.kv dd, .kv__v { text-align: right; margin: 0; }
.kv--accent .kv__k { color: var(--color-accent-800); }

/* ── Кнопки ────────────────────────────────────────────────────────────── */

.btn {
  height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: var(--pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn--dark { background: var(--color-text); color: #fff; }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--bad { background: var(--bad); color: #fff; }
.btn--light { background: var(--card); color: var(--color-text); }
.btn--wide { width: 100%; height: 46px; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 13px; }

/* ── Поиск ─────────────────────────────────────────────────────────────── */

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--pill);
  background: var(--color-bg);
}
.search--active { border: 2px solid var(--color-accent); }
.search__icon { flex: none; color: var(--ink-3); }
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--color-text);
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; }
.search__hint { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: none; }
.search__count { margin-left: auto; font-size: 13px; color: var(--ink-2); flex: none; }
.hit { background: var(--color-accent-200); color: var(--color-accent-800); padding: 1px 4px; border-radius: 5px; }

/* ── Фильтры-пилюли ────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--color-bg);
  padding: 5px 13px;
  border-radius: var(--pill);
  text-decoration: none;
}
.chip:hover { text-decoration: none; filter: brightness(.97); }
.chip--on { background: var(--color-text); color: var(--color-bg); font-weight: 700; }

/* ── Бейджи статуса ────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--color-bg);
  color: var(--ink-2);
}
.badge__dot { width: 6px; height: 6px; border-radius: var(--pill); background: currentColor; flex: none; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn); color: #fff; }
.badge--warn-soft { background: var(--warn-bg); color: var(--warn); }
.badge--bad { background: var(--bad); color: #fff; }
.badge--accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.badge--quiet { background: var(--color-bg); color: var(--ink-2); }
.badge--plain { font-weight: 400; }

/* Коды типов: сетевое зелёное, кассовое синее, прочее серое */
.tcode {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 0;
  border-radius: var(--pill);
  text-align: center;
  background: var(--color-bg);
  color: var(--ink-2);
  display: block;
}
.tcode--net { background: var(--color-accent-2-100); color: var(--ok); }
.tcode--pos { background: var(--color-accent-100); color: var(--color-accent-800); }
.tcode--warn { background: var(--warn); color: #fff; }
.tcode--bad { background: var(--bad); color: #fff; }

/* ── Строки списков ────────────────────────────────────────────────────── */

.rows { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.row {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  border-radius: var(--r);
  font-size: 13.5px;
  text-decoration: none;
  color: inherit;
}
.row:hover { text-decoration: none; }
.rows .row:nth-child(odd) { background: var(--color-bg); }
.row--warn, .rows .row--warn:nth-child(odd) { background: var(--warn-bg); }
.row--bad, .rows .row--bad:nth-child(odd) { background: var(--bad-bg); }
.row--off { opacity: .62; }
.row--off .row__name { text-decoration: line-through; }
.row > * { min-width: 0; }
.row .badge { justify-self: start; }
.row__name { font-weight: 700; }
.row__name a { color: var(--color-text); text-decoration: none; }
.row__sub { font-size: 12.5px; color: var(--ink-2); }

.row--device { grid-template-columns: 46px minmax(190px, 1.3fr) 124px 162px 144px 96px minmax(180px, 1fr); }
.row--object { grid-template-columns: 1fr 84px 144px 128px 320px; padding: 13px 14px; }
.row--hit { grid-template-columns: 1fr 280px 220px 150px; padding: 14px; }
.row--deadline { grid-template-columns: 140px 104px 1fr 300px 176px; padding: 14px 18px; gap: 18px; }

.table-head {
  display: grid;
  gap: 18px;
  padding: 20px 14px 8px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* ── Индикатор срока ───────────────────────────────────────────────────── */

.term { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--ok-bg); }
.term__head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ok); }
.term__date { margin-left: auto; font-family: var(--mono); font-size: 12.5px; font-weight: 400; }
.term__bar { display: flex; gap: 4px; margin-top: 9px; }
.term__seg { height: 6px; flex: 1; border-radius: var(--pill); background: var(--color-accent-2-300); }
.term__seg--on { background: var(--color-accent-2-500); }
.term__note { margin-top: 7px; font-size: 12.5px; color: var(--ok); }

.term--warn { background: var(--warn-bg); }
.term--warn .term__head, .term--warn .term__note { color: var(--warn); }
.term--warn .term__seg { background: var(--warn-track); }
.term--warn .term__seg--on { background: var(--warn); }

.term--bad { background: var(--bad); color: #fff; }
.term--bad .term__head, .term--bad .term__note { color: #fff; }
.term--bad .term__seg, .term--bad .term__seg--on { background: #fff; }

/* ── Баннер просроченного ФН ───────────────────────────────────────────── */

.alarm {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-radius: var(--r-panel);
  background: var(--bad);
  color: #fff;
}
.alarm__mark {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #fff;
  padding: 5px 10px;
  border-radius: var(--pill);
  flex: none;
}
.alarm__title { font-size: 17px; font-weight: 700; }
.alarm__text { font-size: 13.5px; margin-top: 3px; opacity: .92; }
.alarm .btn { margin-left: auto; flex: none; height: 42px; background: #fff; color: var(--bad); }

/* ── Лента истории ─────────────────────────────────────────────────────── */

.feed { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }

.event { padding: 16px 18px; border-radius: var(--r); background: var(--color-bg); }
.event__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.event__type { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--pill); background: var(--color-accent-100); color: var(--color-accent-800); }
.event__type--ok { background: var(--ok-bg); color: var(--ok); }
.event__type--warn { background: var(--warn-bg); color: var(--warn); }
.event__type--quiet { background: var(--card); color: var(--ink-2); font-weight: 400; }
.event__date { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.event__cost { margin-left: auto; font-family: var(--mono); font-size: 14.5px; font-weight: 500; }
.event__title { margin-top: 10px; font-size: 16px; font-weight: 700; }
.event__text { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); max-width: 720px; text-wrap: pretty; }
.event__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.event__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.event__file { font-size: 12.5px; background: var(--card); color: var(--ink-2); padding: 5px 12px; border-radius: var(--pill); text-decoration: none; }

.event-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: var(--r);
  font-size: 13.5px;
}
.feed .event-line:nth-child(even) { background: var(--color-bg); }
.event-line__date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); width: 86px; flex: none; }
.event-line__type { font-size: 12px; color: var(--ink-2); background: var(--color-bg); padding: 3px 10px; border-radius: var(--pill); flex: none; }
.feed .event-line:nth-child(even) .event-line__type { background: var(--card); }
.event-line__who { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }

.fold {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r);
  background: var(--sand);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.fold__year { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); width: 86px; flex: none; }
.fold__text { color: var(--ink-2); }
.fold__action { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--color-accent-700); }

/* ── Доступ ────────────────────────────────────────────────────────────── */

.vault-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--color-bg);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.vault-note svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.secret {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--color-accent-100);
  font-family: var(--mono);
  font-size: 15px;
  color: var(--color-accent-800);
  word-break: break-all;
}

/* ── Схема связей ──────────────────────────────────────────────────────── */

.ports { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.port {
  display: grid;
  grid-template-columns: 40px 1fr 120px;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--pill);
  font-size: 13.5px;
}
.ports .port:nth-child(odd) { background: var(--color-bg); }
.port--free { color: var(--ink-3); }
.port__n { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

.pair {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--color-bg);
}
.pair__arrow { font-family: var(--mono); color: var(--ink-3); }
.pair__name { font-size: 14px; font-weight: 700; }
.pair__sub { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

.tree { margin-top: 12px; font-family: var(--mono); font-size: 13px; line-height: 2; }
.tree a { color: var(--color-text); text-decoration: none; }
.tree a:hover { text-decoration: underline; }

/* ── Формы ─────────────────────────────────────────────────────────────── */

.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 14px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.field { min-width: 0; }
.field label, .label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }

/* Ловим поля по исключению, а не по списку типов: у <input> без атрибута
   type браузер подразумевает text, а селектор input[type="text"] мимо него
   проходит — поля оставались некрашеными. */
.input,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
select {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--pill);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
}
select { padding: 0 14px; }
textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px 16px;
  border: 0;
  border-radius: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  resize: vertical;
}
.input:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.input--mono, .mono-input { font-family: var(--mono); }
.field__hint { margin-top: 7px; font-size: 12.5px; color: var(--ink-2); }
.field__error { margin-top: 7px; font-size: 12.5px; color: var(--bad); font-weight: 700; }

/* Блок, который появляется по типу устройства */
.type-block { margin-top: 20px; padding: 18px 20px; border-radius: var(--r); background: var(--color-accent-100); }
.type-block--sw { background: var(--color-accent-2-100); }

/* Выбор одного из нескольких — пилюли вместо радиокнопок */
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick label {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin: 0;
  border-radius: var(--pill);
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--color-bg);
  cursor: pointer;
}
.pick input:checked + label { background: var(--color-text); color: #fff; font-weight: 700; }
.pick input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.type-block .pick label { background: var(--card); }

.form-nav { display: flex; flex-direction: column; gap: 3px; }
.form-nav a {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--pill);
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
}
.form-nav a:first-child { background: var(--color-bg); font-weight: 700; color: var(--color-text); }
.form-nav__note { padding: 12px 14px 4px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* ── Сообщения и пустые состояния ──────────────────────────────────────── */

.notice { padding: 20px; border-radius: var(--r); background: var(--color-bg); margin-top: 16px; }
.notice__title { font-size: 15.5px; font-weight: 700; }
.notice__text { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; max-width: 520px; text-wrap: pretty; }
.notice__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.notice--bad { background: var(--bad-bg); }
.notice--bad .notice__title { color: var(--bad); }
.notice--warn { background: var(--warn-bg); }
.notice--warn .notice__title { color: var(--warn); }

.flash { margin-bottom: var(--gap-panel); }

/* ── Модальное окно ────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(16, 24, 40, .55);
}
.modal__box {
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--card);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
}
.modal__head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; }
.modal__close {
  margin-left: auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--pill);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
}
.modal__body { padding: 0 24px 20px; }
.modal__foot { display: flex; align-items: center; gap: 10px; padding: 0 24px 22px; }
.modal__foot .actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Вход ──────────────────────────────────────────────────────────────── */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login__box { width: min(420px, 100%); }
.login__brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; }

/* ── Телефон ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .row--device { grid-template-columns: 44px 1fr 140px 150px; }
  .row--device > :nth-child(n + 5) { display: none; }
  .row--object { grid-template-columns: 1fr 84px 1fr; }
  .row--object > :nth-child(n + 4):nth-child(-n + 4) { display: none; }
  .row--hit { grid-template-columns: 1fr 240px; }
  .row--hit > :nth-child(n + 3) { display: none; }
  .cols-main { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .shell {
    flex-direction: column;
    padding: 12px;
    border-radius: 0;
    background: var(--color-bg);
    gap: 10px;
  }
  .sidebar {
    width: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 0;
    overflow-x: auto;
  }
  .sidebar__brand { padding: 0 8px 0 4px; }
  .sidebar__foot { display: none; }
  .nav-item { flex: none; }

  .panel { border-radius: var(--r-mobile); padding: 16px 18px; }
  .panel--list { padding: 16px 18px; }
  .cols-3 { grid-template-columns: 1fr; }
  .form-grid, .form-grid--2 { grid-template-columns: 1fr; }

  /* Строки-цели 56px, один блок за раз. Подложка светлее белой панели —
     иначе строки сливаются в одно полотно. */
  .row, .row--device, .row--object, .row--hit, .row--deadline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 56px;
    padding: 14px 16px;
    background: var(--color-bg);
    border-radius: var(--r-mobile);
  }
  .rows .row:nth-child(odd) { background: var(--color-bg); }
  .rows { gap: 6px; }
  .table-head { display: none; }

  .search { height: 52px; background: var(--card); box-shadow: var(--shadow-sm); }
  .input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select { height: 52px; font-size: 16px; }
  textarea { font-size: 16px; }
  .pick label { height: 48px; font-size: 14px; }
  .btn { height: 48px; font-size: 14.5px; }
  .btn--wide { height: 56px; }
  .panel-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .panel-head__actions { margin-left: 0; }
  .modal { padding: 0; place-items: end stretch; }
  .modal__box { max-height: 94vh; border-radius: 26px 26px 0 0; }
}

/* ── Добавлено после разбора живых экранов ─────────────────────────────── */

/* Шапка панели: заголовок слева, действие справа, без «ступенек» */
.panel-bar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel-bar .link-add { margin-left: auto; }

.link-add { font-size: 12.5px; color: var(--color-accent-700); text-decoration: none; }
.link-add:hover { text-decoration: underline; }

.kv--tight { margin-top: 10px; gap: 7px 14px; }

/* Доступ: несколько записей на одной панели должны читаться как список,
   а не как стена одинаковых кнопок. */
.cred + .cred { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cred__head { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cred__name { font-size: 14px; font-weight: 700; }
.cred__head .link-add { margin-left: auto; }
.cred .btn--wide { height: 40px; margin-top: 10px; }
.cred .vault-note { margin-top: 10px; padding: 10px 12px; font-size: 12.5px; }

/* Связи и порты — строки одной высоты с кнопкой удаления в конце */
.link-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 12px; }
.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--pill);
  background: var(--color-bg);
  font-size: 13.5px;
  text-decoration: none;
  color: var(--color-text);
}
.link-row a { color: var(--color-text); text-decoration: none; }
.link-row .mono { margin-left: auto; font-size: 12px; }
.link-row form { display: flex; }

.port--forward { grid-template-columns: 64px 1fr 28px; }
.port--forward form { display: flex; }

.icon-btn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { background: var(--card); color: var(--bad); }

/* Раскрывашка «добавить» — не должна выглядеть как основной элемент */
.adder { margin-top: 12px; }
.adder > summary {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--pill);
  background: var(--color-bg);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.adder > summary::-webkit-details-marker { display: none; }
.adder[open] > summary { background: var(--color-text); color: #fff; font-weight: 700; }
.adder .field { margin-top: 10px; }
.adder .btn { margin-top: 12px; }

/* Итог по деньгам внутри панели закупки — чтобы не заводить отдельную панель */
.total { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.total__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.total__value { display: block; font-size: 26px; font-weight: 700; margin-top: 6px; }
.total__note { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

/* «Править» у записи журнала не мозолит глаза, но всегда доступна с клавиатуры */
.event__edit { opacity: 0; transition: opacity .12s; }
.event:hover .event__edit,
.event__edit:focus-within { opacity: 1; }

/* Схема связей: колонка портов и кассовые пары, как в макете */
.wiring { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; margin-top: 16px; }
.wiring__title { font-size: 12.5px; color: var(--ink-2); }
.pairs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pair__note { font-size: 13px; color: var(--ink-2); padding: 0 4px; }

@media (max-width: 1100px) {
  .wiring { grid-template-columns: 1fr; gap: 16px; }
}

.sidebar__user { font-weight: 700; color: var(--ink-2); }
.sidebar__links { margin-top: 6px; }
.sidebar__links a { color: var(--ink-2); text-decoration: none; }
.sidebar__links a:hover { text-decoration: underline; }
.sidebar__version { margin-top: 6px; font-size: 11px; color: var(--ink-3); }

.port__what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* «Требует внимания»: строка = бейдж плюс пояснение под ним. Текст обязан
   оставаться внутри панели, поэтому список, а не свободные span'ы. */
.attention { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.attention li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.attention__sub { font-size: 12.5px; color: var(--ink-2); }

/* Место установки не должно переноситься на вторую строку — сокращаем */
.row--device > :last-child,
.row__place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Подпись порта бывает длинной: «ether5 (PoE)», «port 12» */
.port { grid-template-columns: 86px 1fr 120px; }
.port__n { white-space: nowrap; }

/* Экран сроков: строка целиком кликабельна, кнопка — только у ФН */
.row--deadline { grid-template-columns: 118px 92px minmax(220px, 1fr) minmax(200px, 280px) auto; }
.deadline__date { font-size: 14.5px; }
.deadline__where { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Свёрнутые блоки «дальше» и «истекло раньше» */
.fold-block { margin-top: 18px; }
.fold-block > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r);
  background: var(--sand);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.fold-block > summary::-webkit-details-marker { display: none; }
.fold-block > summary::after { content: "раскрыть"; margin-left: auto; font-weight: 700; color: var(--color-accent-700); }
.fold-block[open] > summary::after { content: "свернуть"; }

@media (max-width: 1100px) {
  .row--deadline { grid-template-columns: 110px 88px 1fr; }
  .row--deadline > :nth-child(n + 4) { display: none; }
}

/* Поле поиска само по себе пилюля — вторая рамка от общего правила лишняя */
.search input:focus,
.search input:not([type="checkbox"]):not([type="radio"]):focus { outline: none; }

/* ── Телефон: нижнее меню и кнопки в один столбец ──────────────────────── */

.tabbar { display: none; }

@media (max-width: 900px) {
  /* Сайдбар слева на 390px превращался в ленту с полосой прокрутки */
  .sidebar { display: none; }
  /* Таббар висит поверх: 56 px высоты плюс отступы снизу и запас */
  .shell { padding-bottom: 104px; }

  .tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 40;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: var(--pill);
    background: var(--card);
    box-shadow: var(--shadow-md);
  }
  .tabbar__item {
    flex: 1;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--pill);
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
  }
  .tabbar__item--on { background: var(--color-text); color: #fff; font-weight: 700; }
  .tabbar__item:hover { text-decoration: none; }

  /* Кнопки шапки: главное действие во всю ширину, остальные пополам */
  .panel-head__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .panel-head__actions .btn { width: 100%; }
  .panel-head__actions .btn--dark { grid-column: 1 / -1; }

  /* Порты и связи: без фиксированных колонок, иначе текст обрезается */
  .port, .port--forward { grid-template-columns: 70px 1fr auto; }
  .port__what { white-space: normal; }
  .wiring { grid-template-columns: 1fr; }

  /* Экран сроков: дата и остаток над содержанием.
     `display: block`, а не `revert`: последний возвращает элементам inline,
     и название объекта с width:100% просто исчезало. */
  .row--deadline { display: flex; flex-wrap: wrap; align-items: center; }
  /* Селектор должен быть НЕ МЕНЕЕ специфичным, чем скрывающее правило для
     широких экранов (`> :nth-child(n + 4)`), иначе оно продолжает выигрывать
     независимо от порядка в файле. */
  .row--deadline > :nth-child(n + 1) { display: block; }
  .deadline__where { width: 100%; font-weight: 400; color: var(--ink-2); }
}

.field--wide { grid-column: 1 / -1; }
.form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Файлы: системная кнопка выглядит чужеродной, прячем её за пилюлю */
.filebox { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--color-bg); }
.filebox input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filebox label { margin: 0; cursor: pointer; }
.filebox__hint { font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 900px) {
  .form-foot { flex-direction: column-reverse; }
  .form-foot .btn { width: 100%; }
}

/* Мета-строка объекта нужна только на телефоне, где колонки схлопнуты */
.row__meta { display: none; }

@media (max-width: 900px) {
  .row__meta { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
  .row--object > :nth-child(2),
  .row--object > :nth-child(3),
  .row--object > :nth-child(4) { display: none; }
  .row--object { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.port__desc { display: block; font-size: 12px; color: var(--ink-2); }
.port--forward .port__what { white-space: normal; overflow: visible; text-overflow: clip; }

/* ── Статистика ────────────────────────────────────────────────────────── */

.bars { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.bar__head { display: flex; align-items: baseline; gap: 10px; }
.bar__label { font-size: 13.5px; font-weight: 700; }
.bar__value { margin-left: auto; font-size: 13.5px; }
.bar__track { height: 8px; margin-top: 6px; border-radius: var(--pill); background: var(--color-bg); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: var(--pill); background: var(--color-accent); }
.bar__sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }

.months { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px; overflow-x: auto; }
.month { flex: 1; min-width: 54px; text-align: center; }
.month__bar { height: 96px; display: flex; align-items: flex-end; }
.month__bar span { width: 100%; border-radius: 6px 6px 0 0; background: var(--color-accent-200); min-height: 2px; }
.month__label { margin-top: 6px; font-size: 11px; color: var(--ink-2); }
.month__value { font-size: 11px; color: var(--ink-3); }

.row--subscription { grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 1fr) 140px 160px 70px; }

@media (max-width: 900px) {
  .row--subscription { display: flex; flex-wrap: wrap; }
  .months { gap: 6px; }
  .month { min-width: 44px; }
}

/* Быстрые типы записи на карточке устройства */
.quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.quick__label { font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 900px) {
  .quick { width: 100%; }
}