/* Кабинет сотрудников: рабочий интерфейс, плотнее публичной части. */

.cab {
  --fs-md: 1rem;
  --control-h: 46px;
  font-size: var(--fs-sm);
  background: var(--c-bg);
}
.cab .input, .cab .select, .cab .textarea { font-size: 1rem; }
.cab .textarea { min-height: 160px; }
.cab .textarea--short { min-height: 84px; }
.cab .field__label { font-size: 0.875rem; margin-bottom: 6px; }
.cab .field__hint { font-size: 0.875rem; }
.cab .btn { min-height: 40px; font-size: 0.9375rem; }
.cab .btn--lg { min-height: 48px; padding: 0 var(--s-6); }

.cab-boot { min-height: 100vh; display: flex; gap: var(--s-3); align-items: center; justify-content: center; color: var(--c-text-2); }

/* ---------- Каркас ---------- */
.cab-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.cab-side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: #10203f; color: #d9e1ef;
}
.cab-side .flag-rule { grid-template-rows: repeat(3, 2px); }
.cab-side__brand { padding: var(--s-5) var(--s-5) var(--s-4); display: grid; gap: 2px; line-height: 1.25; }
.cab-side__name { font-weight: 700; color: #fff; font-size: 1rem; }
.cab-side__sub { font-size: var(--fs-xs); color: #9fb0cc; }
.cab-nav { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); }
.cab-nav__label { padding: var(--s-4) var(--s-3) var(--s-1); font-size: 0.75rem; font-weight: 600; color: #8597b7; letter-spacing: 0.02em; }
.cab-nav a {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  min-height: 42px; padding: 0 var(--s-3); border-radius: var(--r-sm);
  color: #d9e1ef; text-decoration: none; font-weight: 500;
}
.cab-nav a svg { width: 20px; height: 20px; opacity: 0.85; }
.cab-nav a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.cab-nav a[aria-current='page'] { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; }
.cab-nav a[aria-current='page']::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #7fa6ef; }
.cab-nav a:focus-visible { outline: 2px solid #9ebcff; outline-offset: -2px; }
.cab-side__foot { margin-top: auto; padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid rgba(255, 255, 255, 0.1); display: grid; gap: var(--s-3); }
.cab-user { display: grid; gap: 2px; line-height: 1.3; }
.cab-user__name { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.cab-user__role { font-size: var(--fs-xs); color: #9fb0cc; }
.cab-side .btn { --btn-bg: transparent; --btn-fg: #d9e1ef; --btn-border: rgba(255, 255, 255, 0.25); justify-content: flex-start; }
.cab-side .btn:hover { --btn-bg: rgba(255, 255, 255, 0.08); --btn-fg: #fff; }

.cab-topbar { display: none; }
.cab-main { min-width: 0; padding: var(--s-6) var(--s-7) var(--s-9); }
.cab-main:focus { outline: none; }

@media (max-width: 899px) {
  .cab-shell { grid-template-columns: 1fr; }
  .cab-side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 60; transform: translateX(-100%); transition: transform var(--dur) var(--ease); visibility: hidden; }
  .cab-shell.nav-open .cab-side { transform: none; visibility: visible; box-shadow: var(--shadow-pop); }
  .cab-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(16, 22, 34, 0.45); }
  .cab-topbar {
    display: flex; align-items: center; gap: var(--s-3); position: sticky; top: 0; z-index: 40;
    min-height: 56px; padding: 0 var(--s-3); padding-top: env(safe-area-inset-top);
    background: #10203f; color: #fff;
  }
  .cab-topbar__menu { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: #fff; border-radius: var(--r-sm); cursor: pointer; }
  .cab-topbar__menu svg { width: 24px; height: 24px; }
  .cab-topbar__menu:focus-visible { outline: 2px solid #9ebcff; }
  .cab-topbar__title { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cab-main { padding: var(--s-5) var(--s-4) var(--s-8); }
}

/* ---------- Заголовок страницы ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.page-head__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.page-head__title:focus { outline: none; }
.page-head__sub { margin-top: 4px; color: var(--c-text-3); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumb { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--s-2); font-weight: 600; font-size: 0.875rem; text-decoration: none; min-height: 32px; }
.crumb svg { width: 18px; height: 18px; }

.panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.panel + .panel { margin-top: var(--s-4); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line); }
.panel__title { font-size: 1rem; font-weight: 700; }
.panel__body { padding: var(--s-5); }

/* ---------- Фильтры ---------- */
.filters { display: grid; gap: var(--s-3); padding: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: end; }
.filters .field__label { font-size: 0.8125rem; color: var(--c-text-2); margin-bottom: 4px; }
.filters .input, .filters .select { min-height: 40px; font-size: 0.9375rem; border-width: 1px; border-radius: var(--r-sm); }
.filters .select { background-position: right 10px center; padding-right: 36px; }
.filters__search { grid-column: span 2; }
.filters__search .input { padding-left: 38px; }
.filters__search-box { position: relative; }
.filters__search-box svg { position: absolute; left: 11px; top: 10px; width: 20px; height: 20px; color: var(--c-text-3); pointer-events: none; }
.filters__period { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); grid-column: span 2; }
.filters__actions { display: flex; gap: var(--s-2); align-items: center; }
@media (max-width: 560px) { .filters__search, .filters__period { grid-column: 1 / -1; } }
.filters-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line); }
.filters-bar__count { color: var(--c-text-2); }
.filters-bar__count strong { color: var(--c-text); font-variant-numeric: tabular-nums; }

/* ---------- Таблица ---------- */
.tbl-wrap { overflow-x: auto; border-top: 1px solid var(--c-line); }
.tbl-wrap:focus-visible { outline-offset: -3px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tbl th {
  position: sticky; top: 0; text-align: left; white-space: nowrap;
  padding: 10px var(--s-3); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
  font-size: 0.8125rem; font-weight: 600; color: var(--c-text-3);
}
.tbl td { padding: 11px var(--s-3); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; transition: background-color var(--dur) var(--ease); }
.tbl tbody tr:hover { background: #f6f8fc; }
.tbl tbody tr:focus-within { background: var(--c-primary-soft); }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--s-5); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--s-5); }
.tbl .c-id { white-space: nowrap; color: var(--c-text-3); font-variant-numeric: tabular-nums; width: 1%; }
.tbl .c-date { white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; }
.tbl .c-name a { color: var(--c-text); font-weight: 600; text-decoration: none; }
.tbl .c-name a:hover { color: var(--c-primary); text-decoration: underline; }
.tbl .c-name a:focus-visible { outline: none; }
.tbl .c-preview { color: var(--c-text-2); max-width: 36ch; font-size: 0.875rem; }
.tbl .c-muted { color: var(--c-text-3); }
.tbl .c-nowrap { white-space: nowrap; }
.src { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.875rem; color: var(--c-text-2); }
.src svg { width: 16px; height: 16px; flex: none; color: var(--c-text-3); }

/* Компактное представление записей на узких экранах */
@media (max-width: 760px) {
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: auto; }
  .tbl tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); }
  .tbl td { padding: 0; border: 0; }
  .tbl td:first-child, .tbl td:last-child { padding: 0; }
  .tbl td[data-label]::before { content: attr(data-label) ': '; color: var(--c-text-3); font-size: 0.8125rem; }
  .tbl .c-name { grid-column: 1 / 2; grid-row: 1; font-size: 1rem; }
  .tbl .c-status { grid-column: 2; grid-row: 1; text-align: right; }
  .tbl .c-status::before, .tbl .c-name::before { display: none; }
  .tbl td:not(.c-name):not(.c-status) { grid-column: 1 / -1; font-size: 0.875rem; }
  .tbl .c-preview { max-width: none; }
  .tbl .c-id, .tbl .c-date { width: auto; }
}

.list-foot { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line); }
.table-loading { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); }
.table-loading .skeleton { height: 18px; }

/* ---------- Форма регистрации (оператор) ---------- */
.reg { display: grid; gap: var(--s-4); }
.reg-sec { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5) var(--s-5); container-type: inline-size; }
.reg-sec__title { font-size: 0.9375rem; font-weight: 700; margin-bottom: var(--s-3); display: flex; gap: var(--s-2); align-items: baseline; }
.reg-sec__num { color: var(--c-primary); font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.reg-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 520px) { .reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reg-grid > .field--wide { grid-column: 1 / -1; } }
@container (min-width: 820px) { .reg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reg-foot {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: 0 -6px 18px rgba(20, 28, 45, 0.06);
}
.reg-foot__state { color: var(--c-text-3); font-size: 0.875rem; display: flex; align-items: center; gap: var(--s-2); }
.reg-foot__state.is-dirty { color: var(--c-warning); }
.reg-foot__state.is-dirty::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #b98500; }
.reg-foot__btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.kbd { font-size: 0.75rem; color: var(--c-text-3); border: 1px solid var(--c-line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--c-surface-2); font-family: inherit; }

/* ---------- Подробный просмотр ---------- */
.detail { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 1100px) { .detail { grid-template-columns: minmax(0, 1fr) 340px; } }
.detail__side { display: grid; gap: var(--s-4); }
@media (min-width: 1100px) { .detail__side { position: sticky; top: var(--s-5); } }
.dgroup { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-line); }
.dgroup:first-child { border-top: 0; }
.dgroup__title { font-size: 0.8125rem; font-weight: 700; color: var(--c-text-3); margin-bottom: var(--s-3); }
.dgroup .kv { grid-template-columns: minmax(130px, 200px) 1fr; font-size: 0.9375rem; }
.dgroup .kv dt { font-size: 0.875rem; }
.dtext { white-space: pre-wrap; font-size: 1rem; line-height: 1.6; max-width: 75ch; }
.edit-grid { display: grid; gap: var(--s-4); container-type: inline-size; }
.edit-grid > .reg-grid { container-type: normal; }

.meta-list { display: grid; gap: var(--s-3); }
.meta-list > div { display: grid; gap: 2px; }
.meta-list dt { font-size: 0.8125rem; color: var(--c-text-3); }
.meta-list dd { margin: 0; font-weight: 500; }

.status-pick { display: grid; gap: var(--s-2); }
.status-pick label { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-sm); cursor: pointer; }
.status-pick label:hover { border-color: var(--c-input-border); }
.status-pick input { width: 18px; height: 18px; accent-color: var(--c-primary); margin: 0; }
.status-pick label:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.status-pick label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.status-note { font-size: 0.8125rem; color: var(--c-text-3); }

.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 var(--s-4) var(--s-5); border-left: 2px solid var(--c-line); margin-left: 5px; }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-input-border); }
.timeline li.is-comment::before { border-color: var(--c-primary); background: var(--c-primary-soft); }
.timeline li.is-status::before { border-color: var(--c-success); }
.timeline__head { font-size: 0.8125rem; color: var(--c-text-3); }
.timeline__what { font-weight: 600; margin-top: 1px; }
.timeline__body { margin-top: 4px; font-size: 0.875rem; color: var(--c-text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline__change { display: grid; gap: 2px; margin-top: 4px; font-size: 0.8125rem; }
.timeline__change del { color: var(--c-danger); text-decoration-thickness: 1px; }
.timeline__change ins { color: var(--c-success); text-decoration: none; }

/* ---------- Вход ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6) var(--s-4); }
.login__card { width: min(420px, 100%); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.login__body { padding: var(--s-7) var(--s-6) var(--s-6); display: grid; gap: var(--s-4); }
@media (min-width: 480px) { .login__body { padding: var(--s-8) var(--s-8) var(--s-7); } }
.login__brand { display: grid; gap: 2px; margin-bottom: var(--s-2); }
.login__name { font-weight: 700; font-size: 1.0625rem; }
.login__sub { color: var(--c-text-3); font-size: 0.875rem; }
.login__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.login__foot { padding: var(--s-4) var(--s-6); background: var(--c-surface-2); border-top: 1px solid var(--c-line); font-size: 0.8125rem; color: var(--c-text-3); }
@media (min-width: 480px) { .login__foot { padding-inline: var(--s-8); } }
.pass-box { position: relative; }
.pass-box .input { padding-right: 52px; }
.pass-box__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--c-text-2); border-radius: var(--r-sm); cursor: pointer; }
.pass-box__toggle:hover { background: var(--c-surface-2); }
.pass-box__toggle:focus-visible { outline: 2px solid var(--c-primary); }
.pass-box__toggle svg { width: 20px; height: 20px; }

/* ---------- Операторы ---------- */
.secret {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--c-surface-2); border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm);
  font-size: 1.125rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.row-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
.row-actions .btn { min-height: 34px; }
.tbl--static tbody tr { cursor: default; }
.tbl--static tbody tr:hover { background: transparent; }
@media (max-width: 760px) {
  .tbl--static .row-actions { justify-content: flex-start; margin-top: var(--s-2); }
}

/* Отсутствие доступа / ошибки */
.state-box { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.login__brand .flag-rule { width: 48px; margin-bottom: var(--s-3); }
.tbl .c-name { min-width: 170px; }
.status-pick fieldset, fieldset.status-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.table-loading .skeleton:nth-child(3n+2) { width: 82%; }
.table-loading .skeleton:nth-child(3n) { width: 64%; }
.detail__side > .panel + .panel, .detail > div > .panel + .panel { margin-top: 0; }
.tbl--static td { vertical-align: middle; }
@media (min-width: 761px) { .tbl--static .row-actions { flex-wrap: nowrap; } }
.dialog__text { display: grid; gap: var(--s-2); }
.dialog .secret { margin-top: var(--s-2); }

@media (max-width: 599px) {
  .dgroup .kv { grid-template-columns: minmax(0, 1fr); }
  .dgroup .kv dd { margin-bottom: var(--s-3); }
}

/* Compact problem fields in the operator form. */
.reg-sec--problem { padding: var(--s-4); }
.reg-sec--problem .reg-grid { gap: var(--s-3) var(--s-4); }
.reg-sec--problem .input { min-height: 44px; }
.reg-sec--problem .textarea { min-height: 76px; }