/*
 * Kruize Booking — общие стили страниц «Состав брони», SVG-picker модалок
 * и связанных с ними шаблонов.
 *
 * Нейминг: BEM с префиксом `kruize-cabin-card__` (компоненты каюты) и
 * `kruize-passenger-list__` (таблица пассажиров внутри).
 *
 * Дизайн-язык вдохновлён «Счёт № 0010-26» из другой системы
 * (Vue 3 + Webpixels CSS / Bootstrap 5) — адаптировано под Sonata Admin
 * (AdminLTE / Bootstrap 3). Принципы:
 *  - Компактные карточки с subtle border-bottom, без тяжёлых шапок;
 *  - Right-aligned totals и badges (text-end / pull-right);
 *  - Subtle borders и muted text для второстепенной информации;
 *  - Цветовые акценты через AdminLTE utility-классы
 *    (text-yellow, text-red, label-success и т.п.).
 *
 * Используется в:
 *   - booking_compose.html.twig
 *   - _booking_compose_cabin_card.html.twig
 *   - passanger_list.html.twig / passanger_list_item.html.twig
 *   - booking_picker_modal_whole.html.twig
 *   - booking_picker_modal_per_place.html.twig
 *
 * Подключение: <link rel="stylesheet"> в standard_layout.html.twig.
 * Файл попадает в /public/bundles/kruizecore/admin/kruize-booking.css
 * командой `php bin/console assets:install --symlink`.
 *
 * Если правки — синхронизируй с .twig (там только классы, никаких inline-стилей).
 */


/* ============================================================================
 * Cabin card (карточка одной каюты)
 *
 * Compose-страница: тонкая нижняя граница, без боковых рамок (одна каюта
 *   на строку, секционный вид).
 * Edit-страница (`booking/edit.html.twig`): полноценная карточка с рамкой
 *   со всех сторон, скруглением и шапкой — чтобы каюты визуально
 *   отделялись друг от друга, а не сливались в общий поток.
 *
 * Поведение управляется модификатором `.kruize-cabin-card--boxed`:
 *   - без модификатора: совместимость с compose-вью (только border-bottom);
 *   - с `--boxed`: полная рамка + шапка на сером фоне + body с padding.
 * ========================================================================== */

.kruize-cabin-card {
    margin-bottom: 1.5em;
    padding: 0 0 1em 0;
    border-bottom: 1px solid #e5e5e5;
}

.kruize-cabin-card:last-child {
    border-bottom: 0;
}

.kruize-cabin-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0;
}

.kruize-cabin-card__title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.kruize-cabin-card__body {
    padding: 0;
}


/* ── Boxed-вариант: полноценная карточка с рамкой ─────────────────── */

.kruize-cabin-card--boxed {
    margin-bottom: 1.5em;
    padding: 0;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* Сбрасываем «section-style» правила, чтобы они не конфликтовали с boxed.
   Для boxed-варианта последняя карточка тоже сохраняет нижнюю границу. */
.kruize-cabin-card--boxed,
.kruize-cabin-card--boxed:last-child {
    border-bottom: 1px solid #d8d8d8;
    padding: 0;
}

.kruize-cabin-card--boxed > .kruize-cabin-card__header {
    padding: 10px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.kruize-cabin-card--boxed > .kruize-cabin-card__body {
    padding: 12px 14px;
}


/* ── Delete-row: одиночная кнопка «Удалить» (когда bookingCabins == 1) ── */

.kruize-cabin-card__delete-row {
    text-align: right;
    margin-bottom: 0.5em;
}

.kruize-cabin-card__delete-row form {
    display: inline;
    margin: 0;
}


/* ── Book-form: «Подтвердить бронь» справа внизу ───────────────── */

.kruize-cabin-card__book-form {
    text-align: right;
    margin-top: 0.75em;
}


/* ============================================================================
 * Sub-bookings (список «бронирований в этой каюте» с per-BC delete)
 * Серый «вторичный» блок: показывается когда bookingCabins|length > 1.
 * Внутри — компактный list-like список.
 * ========================================================================== */

.kruize-cabin-card__sub-bookings {
    margin-bottom: 1em;
    padding: 0.5em 0.75em;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #eee;
}

.kruize-cabin-card__sub-bookings-header {
    font-size: 0.85em;
    margin-bottom: 0.4em;
    color: #888;
}

.kruize-cabin-card__sub-bookings-list {
    margin: 0;
    padding-left: 1.2em;
    list-style: none;
}

.kruize-cabin-card__sub-booking-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25em;
}

.kruize-cabin-card__sub-booking-item form {
    display: inline;
    margin: 0;
}

.kruize-cabin-card__sub-booking-remove {
    padding: 0 0.4em;
}


/* ============================================================================
 * Passenger list (таблица внутри карточки каюты)
 * Компактная, без тяжёлых borders. Place-less «доп.» пассажиры
 * визуально отделены лёгким background.
 * ========================================================================== */

.kruize-passenger-list {
    margin-bottom: 0.5em;
}

.kruize-passenger-list__col-place {
    width: 5em;
}

.kruize-passenger-list__col-tourist {
    /* ширина авто — основное пространство */
}

.kruize-passenger-list__col-actions {
    width: 6em;
    text-align: right;
}

.kruize-passenger-list__row {
    /* обычный ряд */
}

.kruize-passenger-list__row--extra {
    background: #fcfcfc;
}

.kruize-passenger-list__row form {
    margin: 0;
}

.kruize-passenger-list__row form .btn {
    margin-top: 0.25em;
}

.kruize-passenger-list__row-actions {
    text-align: right;
    vertical-align: middle;
}

.kruize-passenger-list__separator {
    background: #fafafa;
}

.kruize-passenger-list__separator-cell {
    padding: 0.4em 0.5em;
    font-size: 0.85em;
    color: #888;
}


/* ============================================================================
 * Extra-tourist block (счётчик «X из N» + кнопка «+ Добавить туриста»)
 * Расположен внизу каюты, перед кнопкой «Подтвердить бронь».
 * ========================================================================== */

.kruize-cabin-card__extra-tourist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5em;
    padding: 0.5em 0;
    border-top: 1px dashed #eee;
}

.kruize-cabin-card__extra-tourist form {
    margin: 0;
}


/* ============================================================================
 * Picker modal (booking_picker_modal_whole / per_place)
 * Контент, рендерящийся внутри VueSvgPicker-модалки. Не использует
 * Bootstrap modal-* / data-dismiss (см. docblock шаблонов).
 * ========================================================================== */

.kruize-picker-modal__details {
    margin-bottom: 0;
}

.kruize-picker-modal__details--per-place {
    margin-bottom: 1em;
}

.kruize-picker-modal__alert {
    margin-top: 1em;
}

.kruize-picker-modal__actions {
    margin-top: 1em;
    text-align: right;
}


/* ── places-list: flex-сетка кнопок-мест ─────────────────────────── */

.kruize-picker-modal__places {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1em;
}

.kruize-picker-modal__places--busy {
    margin-bottom: 0;
}

.kruize-picker-modal__place-option {
    cursor: pointer;
    padding: 0.5em 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.kruize-picker-modal__place-option input[type="radio"] {
    margin-right: 0.5em;
}

.kruize-picker-modal__place-option--busy {
    padding: 0.5em 1em;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    color: #999;
    text-decoration: line-through;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
}

.kruize-picker-modal__place-option--busy .fa-ban {
    margin-left: 0.4em;
}

.kruize-picker-modal__busy-header {
    margin-top: 1em;
}


/* ============================================================================
 * Compose form actions (общий паттерн «submit справа»)
 * Используется в {@see booking_compose.html.twig} для inline-форм
 * (bookableItem selector, save-meta). В Sonata AdminLTE Bootstrap 3
 * для .form-inline нет встроенного right-align, поэтому — отдельный
 * класс.
 * ========================================================================== */

.kruize-form-actions {
    text-align: right;
    margin-top: 0.5em;
}

.kruize-form-inline--bottom {
    margin-bottom: 1em;
}

.kruize-form-inline__group {
    /* группа label + input + button */
}

.kruize-form-inline__label {
    margin-right: 0.5em;
}

.kruize-form-inline__input {
    width: 18em;
}

.kruize-form-inline__hint {
    margin-left: 0.5em;
}

.kruize-form-inline__submit {
    margin-left: 0.5em;
}

.kruize-booking-details {
    margin-bottom: 0;
}


/* ============================================================================
 * Price fieldset (planned / modified / final) — ТЗ 2026-08-13
 * Inline-компактный fieldset из 3 ячеек: read-only + edit-form + read-only.
 * Используется и на уровне пассажира, и на уровне каюты.
 * ========================================================================== */

.kruize-price-fieldset {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    padding: 0;
    border: 0;
}

.kruize-price-fieldset--cabin {
    margin-top: 0.4em;
    font-size: 1.05em;
    padding: 0.4em 0.5em;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #eee;
}

.kruize-price-fieldset__cell {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    white-space: nowrap;
}

.kruize-price-fieldset__cell--readonly {
    color: #333;
}

.kruize-price-fieldset__cell--readonly small {
    margin-right: 0.2em;
}

.kruize-price-fieldset__cell--readonly strong {
    color: #333;
    font-weight: 600;
}

.kruize-price-fieldset__cell--override strong {
    color: #a94442; /* danger — override активен */
}

.kruize-price-fieldset__cell--override .fa-lock {
    color: #a94442;
    font-size: 0.85em;
}

.kruize-price-fieldset__cell--modified {
    margin: 0;
}

.kruize-price-fieldset__cell--modified form {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    margin: 0;
}

.kruize-price-fieldset__input {
    width: 6em;
    padding: 1px 4px;
    height: auto;
    line-height: 1.4;
    font-size: 0.95em;
}


/* ── Cabin price section (обёртка вокруг price-fieldset) ──────────── */

.kruize-cabin-card__cabin-price {
    text-align: right;
    margin-top: 0.4em;
}


/* ── Cabin-level discounts (ТЗ 2026-08-13 ред. #5) ───────────────── */

.kruize-cabin-discounts {
    margin-top: 0.6em;
    padding-top: 0.4em;
    border-top: 1px dashed #eee;
}

.kruize-cabin-discounts__header {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 0.3em;
}

.kruize-cabin-discounts__empty {
    display: block;
    font-size: 0.85em;
    margin-top: 0.3em;
}

/* Cabin-уровень: тот же ul, но без подзаголовка и компактнее */
.kruize-discounts-list--cabin {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

.kruize-discount-add-form--cabin {
    margin-top: 0.3em;
}


/* ── Discounts list (per passenger) ─────────────────────────────────── */

.kruize-discounts-list {
    list-style: none;
    margin: 0.3em 0 0;
    padding: 0;
    font-size: 0.85em;
}

.kruize-discounts-list__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-right: 0.5em;
    padding: 1px 4px;
    background: #d9edf7; /* info-light */
    border-radius: 3px;
}

.kruize-discounts-list__category {
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    background: transparent !important; /* override .label background */
    color: #31708f; /* info-text */
    padding: 0;
}

.kruize-discounts-list__amount {
    color: #31708f;
    font-weight: 600;
}

.kruize-discounts-list__remove-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.kruize-discounts-list__remove-form .btn {
    padding: 0 0.2em;
    font-size: 0.9em;
}


/* ── Discount add form (per passenger) ──────────────────────────────── */

.kruize-discount-add-form {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin: 0.3em 0 0;
}

.kruize-discount-add-form__amount,
.kruize-discount-add-form__percent {
    width: 5em;
    padding: 1px 4px;
    height: auto;
    line-height: 1.4;
    font-size: 0.85em;
}

.kruize-discount-add-form__category {
    padding: 1px 4px;
    height: auto;
    line-height: 1.4;
    font-size: 0.85em;
}


/* ============================================================================
 * Passenger info — read-only карточка пассажира внутри
 * `box-body.passenger-info` (booking/edit.html.twig::sonata_post_fieldsets).
 *
 *   .kruize-passenger-info
 *     .kruize-passenger-info__header         (ФИО)
 *     .kruize-passenger-info__section        (группа полей — может быть N)
 *       .kruize-passenger-info__section-title
 *       .kruize-passenger-info__grid
 *         .kruize-passenger-info__field[--span-2]
 *           .kruize-passenger-info__label
 *           .kruize-passenger-info__value
 *     .kruize-passenger-info__note           (callout-комментарий)
 *
 * BEM, в тон существующему `kruize-cabin-card__*`. Сетка: 2 колонки на lg+,
 * 1 на xs. Соседствует с AdminLTE-овским `box` / `box-body`, поэтому собственных
 * тяжёлых границ не рисуем — опираемся на parent.
 * ========================================================================== */

.kruize-passenger-info {
    margin: 0;
    padding: 4px 0 0;
}

/* ── Header: ФИО ─────────────────────────────────────────────────── */

.kruize-passenger-info__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e5e5e5;
}

.kruize-passenger-info__name {
    font-size: 1.05em;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kruize-passenger-info__name > i.fa {
    color: #3c8dbc; /* AdminLTE primary */
    margin-right: 6px;
}

/* ── Section (группа полей) ──────────────────────────────────────── */

.kruize-passenger-info__section {
    margin: 0 0 14px;
}

.kruize-passenger-info__section-title {
    margin: 0 0 8px;
    padding: 0 0 4px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #777;
    border-bottom: 1px solid #f0f0f0;
}

.kruize-passenger-info__section-title > i.fa {
    margin-right: 6px;
    color: #999;
}

/* ── Grid: 3 колонки на lg+, 1 на xs ────────────────────────────── */

.kruize-passenger-info__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.kruize-passenger-info__field {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.kruize-passenger-info__field--span-2 {
    /* 2 из 3 колонок (66.66%) */
    flex: 0 0 66.6666%;
    max-width: 66.6666%;
}

.kruize-passenger-info__field--span-3 {
    /* Все 3 колонки (100%) */
    flex: 0 0 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    .kruize-passenger-info__field,
    .kruize-passenger-info__field--span-2,
    .kruize-passenger-info__field--span-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Label / Value ───────────────────────────────────────────────── */

.kruize-passenger-info__label {
    font-size: 0.75em;
    color: #999;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kruize-passenger-info__value {
    font-size: 0.95em;
    color: #333;
    word-break: break-word;
}

.kruize-passenger-info__value a {
    color: #3c8dbc;
    text-decoration: none;
}

.kruize-passenger-info__value a:hover,
.kruize-passenger-info__value a:focus {
    text-decoration: underline;
    color: #2a6c95;
}

.kruize-passenger-info__empty {
    color: #bbb;
    font-style: italic;
}

/* ── Note callout (комментарий к пассажиру / документу) ──────────── */

.kruize-passenger-info__note {
    display: flex;
    gap: 10px;
    margin: 4px 0 14px;
    padding: 8px 12px;
    background: #fffbea;
    border-left: 3px solid #f0ad4e;
    border-radius: 2px;
}

.kruize-passenger-info__note > i.fa {
    color: #f0ad4e;
    font-size: 1.1em;
    flex: 0 0 auto;
    line-height: 1.4;
}

.kruize-passenger-info__note > div {
    flex: 1 1 auto;
    min-width: 0;
}


/* ============================================================================
 * Cabin card: actions in header (booking/edit.html.twig)
 * Кнопки «Развернуть / Свернуть / Аннулировать» — disabled placeholder'ы,
 * в edit-вью эти actions не реализованы. Для compose-вью используется свой
 * набор кнопок, см. `.kruize-cabin-card__book-form` / `__delete-row` выше.
 * ========================================================================== */

.kruize-cabin-card__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.kruize-cabin-card__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* ── Cabin card: обёртка списка пассажиров ─────────────────────── */

.kruize-cabin-card__passengers {
    margin: 14px 0 8px;
}


/* ── Cabin card: empty state (нет кают в брони) ────────────────── */

.kruize-cabin-card__empty {
    margin: 1em 0;
    padding: 0.5em 0;
}


/* ── Cabin card: «+ Добавить доп. туриста» (если seatsExtra > 0) ── */

.kruize-cabin-card__extra-tourist {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e5e5e5;
}

.kruize-cabin-card__extra-tourist .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* ============================================================================
 * Passenger card (read-only карточка пассажира внутри `kruize-cabin-card__passengers`).
 * Soft border, шапка и подвал на сером фоне, тело — белое. Не конфликтует с
 * AdminLTE `.box` (внутри compose-вью пассажир рендерится строкой таблицы
 * `.kruize-passenger-list__row`, а здесь — отдельной карточкой).
 *
 *   .kruize-passenger-card
 *     .kruize-passenger-card__header
 *       .kruize-passenger-card__place
 *         .kruize-passenger-card__place-badge[--main|--extra]
 *       .kruize-passenger-card__actions
 *     .kruize-passenger-card__body
 *     .kruize-passenger-card__footer
 * ========================================================================== */

.kruize-passenger-card {
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.kruize-passenger-card:last-child {
    margin-bottom: 0;
}

/* ── Header (бейдж места + действия) ───────────────────────────── */

.kruize-passenger-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f8f8;
    border-bottom: 1px solid #eaeaea;
}

.kruize-passenger-card__place {
    flex: 1 1 auto;
    min-width: 0;
}

.kruize-passenger-card__place-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 3px;
    color: #fff;
}

.kruize-passenger-card__place-badge--main {
    background: #3c8dbc; /* AdminLTE primary */
}

.kruize-passenger-card__place-badge--extra {
    background: #f0ad4e; /* AdminLTE warning */
}

.kruize-passenger-card__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.kruize-passenger-card__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Body (цена + passenger-info) ──────────────────────────────── */

.kruize-passenger-card__body {
    padding: 12px;
}

/* ── Footer (добавить скидку / скидочную карту) ────────────────── */

.kruize-passenger-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f8f8;
    border-top: 1px solid #eaeaea;
}

.kruize-passenger-card__footer .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* На узких экранах header/footer — стек, чтобы бейдж и кнопки не
   сжимались и не вылезали за края. */
@media (max-width: 540px) {
    .kruize-passenger-card__header,
    .kruize-passenger-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .kruize-passenger-card__actions {
        width: 100%;
    }
}


/* ============================================================================
 * Status legend (ТЗ 2026-09-08, рефактор на 2D base × sub)
 *
 * HTML-легенда в bookable_item_list.html.twig: каждый swatch — это
 * `<span class="vbb-status-legend__swatch" data-context-status="..."
 * data-context-sub-status="...">` с inline-стилями для базового
 * layout (размер, рамка, радиус). Цвет фона swatch'а — через 2
 * data-атрибута, по аналогии с SCSS-палитрой в
 * assets/components/vue-svg-picker-v2.vue.
 *
 * Палитра согласована с vue-svg-picker-v2.vue: те же 10 hex-значений
 * для 10 валидных (base, sub) комбинаций. Источник истины — PHP-enum
 * {@see BookableCabinMatrixBaseStatus} ×
 * {@see BookableCabinMatrixSubStatus} (см. тж. комментарий в
 * bookable_item_list.html.twig).
 * ========================================================================== */

/* Дефолт: легенда появляется под основным list'ом, плавный inline-flex
   layout уже задан в твиге через style="...". Этот блок — только
   цвета для swatch'ей; layout не дублируем. */
.vbb-status-legend__swatch {
    background: #c0c0c8;  /* fallback, если ни одно правило не сработает */
}

/* ── available (можно бронировать) ─────────────────────────────────────── */

*[data-context-status="available"][data-context-sub-status="default"] {
    background: #00a65a;        /* success — свободна */
}
*[data-context-status="available"][data-context-sub-status="only_current"] {
    background: #6ec06e;        /* чуть светлее success — intent own */
}

/* ── block (нельзя бронировать) ────────────────────────────────────────── */

.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="only_current"] {
    background: #f0ad4e;        /* warning — tour own */
}
.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="from_another"] {
    background: #f0ad4e;        /* warning — intent на другом rowId */
}
.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="system"] {
    background: #a94442;        /* danger — system-лок */
}
.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="paid"] {
    background: #117346;        /* dark green — paid/completed */
}
.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="booked"] {
    background: #dd4b39;        /* red — pending/confirmed */
}
.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="partial"] {
    background: #f39c12;        /* orange — частично */
}
.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="unavailable"] {
    background: #999;
}
.vbb-status-legend__swatch[data-context-status="block"][data-context-sub-status="default"] {
    background: #999;            /* legacy generic block */
}