/* Шапка админки.

   Раньше она была свёрстана двумя колонками по половине ширины, и на телефоне
   пункты меню сминались в кашу: «Карты магазина» разрывалось посреди фразы,
   потому что переносу ничто не мешало, а половины экрана на пять ссылок не
   хватало. Здесь флекс и запрет переноса внутри пунктов; на узком экране
   меню уходит под название и занимает всю ширину. */

/* Тёмный логотипа и полоса его огня снизу — как у витрины, одна палитра
   (переменные --brand-* в site.css). */
.adm-header {
    background: var(--brand-ink);
    border-bottom: 3px solid var(--brand-ember);
    padding: 12px 0;
}

.adm-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
}

.adm-brand {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.adm-brand:hover,
.adm-brand:focus {
    color: #fff;
    text-decoration: none;
}

.adm-brand__section {
    font-weight: normal;
    opacity: .7;
}

.adm-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 18px;
}

/* Ключевое: пункт из двух слов не должен разрываться. */
.adm-nav a,
.adm-nav__user {
    color: #fff;
    white-space: nowrap;
}

.adm-nav a:hover,
.adm-nav a:focus {
    color: #fff;
    text-decoration: underline;
}

.adm-nav__user {
    opacity: .75;
}

@media (max-width: 767px) {
    .adm-header__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .adm-nav {
        justify-content: flex-start;
        width: 100%;
        /* На телефоне по ссылке попадают пальцем, а не курсором. */
        gap: 12px 18px;
    }

    .adm-nav a {
        padding: 4px 0;
    }
}

/* Таблицы разделов на телефоне шире экрана (у «Карт магазина» шесть колонок).
   Пусть прокручиваются внутри себя, а не растягивают страницу: горизонтальная
   прокрутка всего документа — худший из вариантов, при ней уезжает и шапка. */
.adm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.adm-table-wrap > table {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .adm-table-wrap > table {
        white-space: nowrap;
    }
}

/* Таблица, которая на телефоне превращается в карточки.

   Прокручивать её внутри себя мало: у «Тестов» шесть колонок, в одной из них
   текст ошибки с адресом, и при `white-space: nowrap` он растягивает таблицу
   до 2500 px — шесть с половиной экранов свайпа ради одной строки. Поэтому
   ниже 768 px строка становится карточкой, а заголовки колонок подставляются
   из `data-label` — их иначе не видно, шапка скрыта.

   Включается классом, а не для всех таблиц: у узких (хосты окружения) прокрутка
   как раз уместнее, там колонки короткие и их видно рядом. */
@media (max-width: 767px) {
    .adm-cards,
    .adm-cards tbody,
    .adm-cards tr,
    .adm-cards td {
        display: block;
        width: auto;
    }

    .adm-cards thead {
        display: none;
    }

    .adm-cards tr {
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 12px;
        padding: 8px 10px;
    }

    /* Полосатость строк тут только мешает: карточки и так разделены рамкой. */
    .table-striped.adm-cards > tbody > tr:nth-of-type(odd) {
        background: transparent;
    }

    .adm-cards td {
        border: 0;
        padding: 4px 0;
        /* Перебивает общий nowrap для прокручиваемых таблиц. */
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .adm-cards td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: #888;
    }

    /* Пустая ячейка (например, колонка кнопок у чужой строки) карточку не
       раздувает и подпись не показывает. */
    .adm-cards td:empty {
        display: none;
    }
}

/* Кнопки админки. `btn-default` — класс Bootstrap 3, в подключённом Bootstrap 4
   его нет, и кнопки рисовались системным серым браузера — третий цвет рядом с
   палитрой логотипа. Здесь нейтральная кнопка с акцентом на наведении; главное
   действие остаётся `btn-primary` (site.css), удаление — `btn-danger`. */
.btn-default {
    color: var(--brand-ink);
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus {
    color: var(--brand-accent);
    background-color: #fff;
    border-color: var(--brand-accent);
}