/*
 * Журнал действий по записи: кто открывал, кто создал, кто и что поменял.
 *
 * Блок один на карточку заказа и карточку товара, поэтому оформление здесь, а
 * не в стилях конкретной страницы.
 */
.alog {
    margin: 0;
    padding: 0;
}

.alog__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.alog__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #5a6673;
}

.alog__count {
    padding: 2px 8px;
    border-radius: 9px;
    background: #eef2f6;
    color: #5a6673;
    font-size: .74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.alog__table { margin-bottom: 8px; font-size: .84rem; }
.alog__table th { font-weight: 600; color: #6c757d; white-space: nowrap; }
.alog__col-when { width: 150px; }
.alog__col-who { width: 190px; }
.alog__col-what { width: 130px; }
.alog__when { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Действие: слово-метка, чтобы «изменил» отличалось от «открыл» без чтения. */
.alog__action {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: #eef2f6;
    color: #4a5561;
    font-size: .76rem;
    white-space: nowrap;
}

.alog__action--update,
.alog__action--update_by { background: #e5eef8; color: #1f5b9e; }
.alog__action--create { background: #e4f2ea; color: #1f7a4d; }
.alog__action--delete,
.alog__action--delete_by { background: #fbe9ea; color: #b4232b; }

/* Разница «было — стало». Значения бывают длинными (снимки строк целиком),
   поэтому переносим по словам, а не растягиваем таблицу. */
.alog__changes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.alog__changes > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 1px 0;
    line-height: 1.4;
}

.alog__field {
    min-width: 120px;
    color: #6c757d;
    font-size: .78rem;
}

.alog__old {
    color: #8a3f43;
    text-decoration: line-through;
    word-break: break-word;
}

.alog__new { color: #1f7a4d; word-break: break-word; }
.alog__arrow { font-size: .62rem; color: #98a2ad; }
.alog__empty { color: #98a2ad; }

.alog__pager {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.alog__page {
    font-size: .8rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.alog__note {
    margin: 0;
    font-size: .76rem;
    line-height: 1.35;
    color: #7a8087;
}

/* Переключатель «показать открытия»: их семь из десяти записей, и по умолчанию
   они скрыты — иначе изменений за ними не видно. */
.alog__switch {
    font-size: .78rem;
    color: #6c757d;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alog__switch:hover { color: #2f3a45; }
.alog__switch.is-on { color: #1f5b9e; }

.alog__none {
    margin: 0 0 8px;
    font-size: .84rem;
    color: #98a2ad;
}

/* Правки корзины — отдельной таблицей над общим журналом. */
.alog__product { font-weight: 500; }
.alog__basket-nums { display: inline-block; margin-left: 8px; font-size: .8rem; color: #6c757d; }
.alog__action--basket_add { background: #e4f2ea; color: #1f7a4d; }
.alog__action--basket_change { background: #e5eef8; color: #1f5b9e; }
.alog__action--basket_remove { background: #fbe9ea; color: #b4232b; }
.alog__action--create_row { background: #e4f2ea; color: #1f7a4d; }
.alog__action--sent_block_toggle { background: #fbf0dc; color: #8a5a12; }

/* Пустой журнал: сообщение вместо пустой рамки вкладки. */
.alog__none--empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 0;
    color: #6c757d;
}