/*
 * Дополнения web к дизайн-токенам и компонентам макета (static/css/app.css —
 * копия mockup/css/app.css, сверяется в make lint). Здесь — только то, чего
 * нет в макете: off-canvas Bootstrap панели редактирования, индикатор загрузки
 * HTMX, формы входа. Цвета — только переменными app.css.
 */

/* Панель Э-06 — off-canvas Bootstrap справа под шапкой (форма № 1). */
.drawer.offcanvas {
  --bs-offcanvas-width: var(--drawer-w);
  --bs-offcanvas-bg: var(--c-surface);
  top: var(--top-h);
  height: auto;
}
.drawer.offcanvas > #edit-panel-content,
.drawer.offcanvas > #edit-panel-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* HTMX: таблица на время запроса слегка приглушается. */
.htmx-request.registry-table,
.htmx-request .registry-table { opacity: 0.6; transition: opacity 0.15s; }

.inline-form { display: inline; }
.field-errors { list-style: none; margin: 0; padding: 0; color: var(--c-danger); font-size: 12px; }
.alert-box {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px;
  border-radius: var(--radius-sm); background: var(--c-overdue-bg); border: 1px solid var(--c-overdue-border);
  color: var(--c-overdue-text);
}
.bell-list { width: 360px; }
.bell-list .notif-item { margin-bottom: 6px; }
.table-note { padding: 12px 20px; }
.muted-block { padding: 24px; text-align: center; color: var(--c-muted); }

/* Заголовки колонок с сортировкой — ссылки (HTMX). */
.data-table th a.sort-link { color: inherit; text-decoration: none; display: inline-block; }
.data-table th a.sort-link:hover { color: var(--c-primary); }
.page-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.page-btn:hover { text-decoration: none; }
a.kpi { color: inherit; }

/* Колонка «Судовладелец» у ролей РКО (Э-03): таблица формы № 2 шире на одну колонку. */
.fleet-table .c-owner { width: 11%; }

/* --- Промт 3: документы, медиа, заявки -------------------------------------------------------- */

/* Стрелка сортировки перечня документов — стилем по aria-sort: текст заголовка остаётся
   названием колонки (по нему тесты и экранные чтецы находят колонку). */
.doc-table th[aria-sort="ascending"] a.sort-link::after { content: " ▲"; color: var(--c-muted); }
.doc-table th[aria-sort="descending"] a.sort-link::after { content: " ▼"; color: var(--c-muted); }

/* Значок-заглушка вместо миниатюры, пока worker её строит. */
.thumb-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 4 / 3; width: 100%; background: var(--c-surface-2); color: var(--c-muted); font-size: 12px;
}
.thumb-stub .bi { font-size: 26px; }
.media-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-item video { display: block; width: 100%; background: var(--c-media-bg); aspect-ratio: 16 / 9; }
.media-sha { display: block; margin-top: 4px; color: var(--c-muted); word-break: break-all; }
.demo-media { cursor: pointer; }
.demo-media input[type="checkbox"] { margin-right: 6px; vertical-align: middle; }
.media-fieldset { border: 0; padding: 0; margin: 14px 0; }
.media-fieldset legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; }

/* Мультизагрузка медиа: строка на файл с индикатором прогресса. */
.media-upload { margin-top: 16px; }
.upload-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.upload-list li { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 10px; align-items: center; font-size: 13px; }
.upload-list li.error { color: var(--c-overdue-text); }
.upload-list li.done { color: var(--c-ok-text); }
.upload-list .upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-list progress { width: 100%; }

/* Архив ZIP: выпадающая панель с отметкой «Включить видео». */
.zip-pop { right: 0; left: auto; width: 300px; padding: 14px; }

/* Формы и действия Э-08, Э-09, Э-13. */
.form-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.work-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.assign-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.version-form { margin-top: 14px; align-items: end; }
.danger-banner { background: var(--c-overdue-bg); border-color: var(--c-overdue-border); }
.danger-banner .bi { color: var(--c-overdue-text); }

/* --- Промт 4: рабочее место РКО, события, импорт ------------------------------------------ */

/* Бейдж входящих у «Рабочего места»: псевдоэлемент не входит в текст пункта меню. */
.nav-link[data-badge]::after {
  content: attr(data-badge); margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--c-primary-soft); color: var(--c-primary); font-size: 12px; font-weight: 700; text-align: center;
}
.inbox-item { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.inbox-actions { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
.assign-inline { display: inline-flex; gap: 6px; align-items: center; }
.btn-x.small, .select.small { padding: 4px 10px; font-size: 12.5px; min-height: 0; }
.timeline-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.event-form { margin-bottom: 14px; border: 1px solid var(--c-border); }
.event-docs { border: 0; padding: 0; margin: 8px 0; }
.event-docs ul, .event-docs div { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.import-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.import-progress { padding: 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.import-progress progress { width: 100%; }