/* app/static/css/bootstrap-compat.css
 *
 * В проекте рассогласованы версии Bootstrap: CSS — 4.5.2, JS-бандл — 5.1.3.
 * Шаблоны написаны вперемешку на обеих: BS5-утилиты (me-*, ms-*, d-grid,
 * btn-close, form-label — суммарно ~120 использований) в BS4-стилях просто
 * отсутствуют, поэтому отступы не применяются и элементы слипаются — самый
 * заметный случай — иконка вплотную к тексту на кнопках вида
 * «<i class="fas fa-sign-in-alt me-2"></i>Войти».
 *
 * Этот файл добавляет НЕДОСТАЮЩИЕ классы, ничего не переопределяя: он не
 * меняет поведение существующих BS4-стилей и снимается сразу после
 * полноценного перехода на Bootstrap 5 (см. UI_UX_AUDIT.md, п. «Версии
 * Bootstrap»).
 */

/* --- Логические отступы BS5 (start/end) для горизонтального режима письма --- */
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }

/* --- Подписи полей (в BS4 класса .form-label нет) --- */
.form-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* --- Кнопки в столбец: .d-grid + .gap-* --- */
.d-grid { display: grid !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.d-grid > .btn { width: 100%; }

/* --- Скрытый доступный текст BS5. В Bootstrap 4 этого класса нет. --- */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Крестик закрытия BS5 (в BS4 это .close) --- */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #000;
    background: transparent
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 010-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
        center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    cursor: pointer;
}
.btn-close:hover { opacity: 0.75; }
.btn-close:focus-visible { outline: 2px solid #2d6cdf; outline-offset: 2px; opacity: 1; }

/* --- Лист согласований: компактные icon-only действия. --- */
.approval-page .approval-toolbar-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
}

.approval-page .action-column {
    width: 102px;
    min-width: 102px;
}

.approval-page .action-column .btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.approval-page .approval-status-cell select[name="status"]:not(:disabled) {
    cursor: pointer;
}

/* DataTables 1.11 stores sort markers as header background images.  The
 * approval page used the `background:` shorthand on every TH; that reset
 * background-repeat/background-position, while the active asc/desc image is
 * `!important` in DataTables.  Result: the active marker tiled across the whole
 * "Дата обновления" header and looked like all column arrows had moved there.
 * Restore the complete DataTables background contract after approval_list.css. */
.approval-page #approvalTable thead th.sorting,
.approval-page #approvalTable thead th.sorting_asc,
.approval-page #approvalTable thead th.sorting_desc,
.approval-page #approvalTable thead th.sorting_asc_disabled,
.approval-page #approvalTable thead th.sorting_desc_disabled {
    background-repeat: no-repeat !important;
    background-position: calc(100% - 6px) center !important;
    padding-right: 24px !important;
}

.approval-page #approvalTable thead th.sorting {
    background-image: url("../images/sort_both.png") !important;
}

.approval-page #approvalTable thead th.sorting_asc {
    background-image: url("../images/sort_asc.png") !important;
}

.approval-page #approvalTable thead th.sorting_desc {
    background-image: url("../images/sort_desc.png") !important;
}

.approval-page #approvalTable thead th.sorting_asc_disabled {
    background-image: url("../images/sort_asc_disabled.png") !important;
}

.approval-page #approvalTable thead th.sorting_desc_disabled {
    background-image: url("../images/sort_desc_disabled.png") !important;
}

/* Вложения — такая же icon-only кнопка, как действия строки. Текст label
 * остаётся в DOM как доступное имя; font-size:0 скрывает только визуальную
 * подпись. */
.approval-page .approval-file-picker {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    margin-bottom: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.approval-page .approval-file-picker::before {
    content: "\f0c6";
    font-family: "Font Awesome 5 Free";
    font-size: .875rem;
    font-weight: 900;
    line-height: 1;
}

.approval-page .approval-files-cell {
    min-width: 112px;
    max-width: 150px;
}

.approval-page .file-input-filename {
    max-width: 136px;
}