/*
  Мотивация — компактный мобильный вид (до 767px), все страницы.
  Временный оверрайд поверх сборки portal:prod-22, подключается из index.html.
  Правила вне @layer, поэтому перебивают утилиты Tailwind v4 без !important.
  При переносе в исходники заменить на классы в компонентах Vue.
*/

/* Заголовок раздела уже в верхней панели — крупный h2 страницы не дублируем */
main h2.text-2xl {
  display: none;
}

@media (max-width: 767px) {
  /* ── Шапка: меню, раздел и имя в одной строке (основное — в theme.css) ── */
  header.sticky {
    padding: 8px 8px 8px 4px;
  }
  .mz-page-title {
    font-size: 18px;
    line-height: 24px;
  }
  header.sticky h1 {
    font-size: 12px;
    line-height: 16px;
  }
  /* «Выйти» — только иконка; текст остаётся в DOM для скринридера */
  header.sticky > div > :last-child > button {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }

  /* ── Каркас страницы ──────────────────────────────────────────────────── */
  main {
    padding: 12px;
    overflow-x: clip;
  }
  main .space-y-6 > :not(:last-child) {
    margin-block-end: 12px;
  }
  main .text-xl.font-black {
    font-size: 16px;
    line-height: 22px;
  }
  main .text-lg.font-black {
    font-size: 15px;
  }
  main .p-5,
  main .p-6 {
    padding: 12px;
  }
  main .text-xs.text-slate-400 {
    color: var(--color-slate-500);
  }

  /* ── Кнопки и поля — плотнее, но не меньше 40px по высоте ─────────────── */
  main button.py-3 {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  main button.px-4,
  main button.px-5 {
    padding-left: 12px;
    padding-right: 12px;
  }
  main :is(input, select).py-3 {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  main .flex-wrap.gap-3 {
    gap: 8px;
  }

  /* ── Формы: короткие поля по два в ряд, длинные — во всю ширину ────────── */
  main .grid:has(> label + label) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  main .grid:has(> label + label) > label:has(input:not([type="date"]):not([type="number"])),
  main .grid:has(> label + label) > label:has(select),
  main .grid:has(> label + label) > label:has(textarea) {
    grid-column: 1 / -1;
  }
  main .grid:has(> label + label) > button {
    align-self: end;
    min-height: 42px;
  }
  main label.space-y-1 > * + * {
    margin-top: 4px;
  }
  main label > span.uppercase {
    font-size: 11px;
  }

  /* ── Переключатель месяца — во всю ширину ─────────────────────────────── */
  main .flex.items-center.gap-2:has(> .min-w-48) {
    width: 100%;
  }
  main .min-w-48 {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--mz-border, #e7ebf2);
  }
  main .flex.items-center.gap-2:has(> .min-w-48) > button {
    min-width: 44px;
    padding: 9px 14px;
  }

  /* ── Карточки показателей — сетка 2×N без иконок ──────────────────────── */
  main .grid:has(> .rounded-3xl > .flex.items-center.gap-4.p-5) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  main .rounded-3xl:has(> .flex.items-center.gap-4.p-5) {
    min-width: 0;
  }
  main .rounded-3xl > .flex.items-center.gap-4.p-5 {
    padding: 10px 12px;
    gap: 0;
  }
  main .rounded-3xl > .flex.items-center.gap-4.p-5 > :first-child {
    display: none;
  }
  main .rounded-3xl > .flex.items-center.gap-4.p-5 .text-sm {
    font-size: 12px;
    line-height: 1.3;
  }
  main .rounded-3xl > .flex.items-center.gap-4.p-5 .text-2xl {
    font-size: clamp(15px, 4.8vw, 19px);
    line-height: 1.25;
    white-space: nowrap;
  }
  main .rounded-3xl > .flex.items-center.gap-4.p-5 .text-xs {
    font-size: 11px;
    line-height: 1.3;
  }

  /* ── Таблицы → карточки (подписи полей ставит ui.js в data-label) ─────── */
  main .rounded-3xl:has(table) {
    overflow: visible;
    background: transparent;
    border: 0;
  }
  main .overflow-x-auto:has(> table) {
    overflow: visible;
  }
  main table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  main table thead {
    display: none;
  }
  main table tbody {
    display: grid;
    gap: 8px;
  }
  /* карточка строки: поля в две колонки, подпись над значением */
  main table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--mz-border, #e7ebf2);
    border-radius: 12px;
    background: #fff;
  }
  main table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }
  main table td > * {
    min-width: 0;
  }
  main table td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--color-slate-500);
  }
  main table td:not([data-label])::before,
  main table td[data-label=""]::before {
    display: none;
  }
  /* первая колонка — заголовок карточки; составные ячейки — во всю ширину */
  main table td:first-child,
  main table td:has(> div:not(.flex)) {
    grid-column: 1 / -1;
  }
  main table td:first-child {
    font-size: 15px;
    font-weight: 600;
  }
  main table td:first-child::before {
    display: none;
  }
  /* действия — внизу карточки, справа */
  main table td.mz-td-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--mz-border, #e7ebf2);
  }
  main table td.mz-td-actions::before {
    display: none;
  }
  /* одна-две кнопки — в правый верхний угол карточки, без отдельной полосы */
  main table tr {
    position: relative;
  }
  main table tr:has(> td.mz-few) > td:first-child {
    display: flex;
    align-items: center;
    padding-right: 88px;
    min-height: 36px;
  }
  main table td.mz-td-actions.mz-few button {
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
  }
  main table td.mz-td-actions.mz-few {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0;
    border: 0;
    gap: 6px;
  }
  main table td.mz-td-actions button {
    min-width: 40px;
    min-height: 40px;
  }
  /* товары: название / «код · категория» / Цена | Свой % | Итог % | Мотивация */
  main table[data-mz="products"] tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 8px;
    padding: 10px 12px;
  }
  main table[data-mz="products"] td:nth-child(2),
  main table[data-mz="products"] td:nth-child(3) {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  main table[data-mz="products"] td:nth-child(2)::before,
  main table[data-mz="products"] td:nth-child(3)::before {
    display: none;
  }
  main table[data-mz="products"] td:nth-child(2) {
    grid-column: 1;
  }
  main table[data-mz="products"] td:nth-child(3) {
    grid-column: 2 / -1;
  }
  main table[data-mz="products"] td:nth-child(3)::after {
    content: none;
  }
  main table[data-mz="products"] td:nth-child(5) {
    display: none;
  }
  main table[data-mz="products"] td:nth-child(n + 4) {
    margin-top: 6px;
    font-size: 14px;
  }
  main table[data-mz="products"] td:nth-child(n + 4)::before {
    font-size: 11px;
    line-height: 14px;
  }
  main table[data-mz="products"] td button.px-2 {
    padding: 0;
    font-size: 14px;
  }
  main table[data-mz="products"] td.mz-td-actions {
    margin-top: 0;
  }

  /* строки-редакторы (категории): название | % | удалить — одной линией */
  main table tr:has(> td:first-child > input) {
    grid-template-columns: minmax(0, 1fr) 76px auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }
  main table tr:has(> td:first-child > input) > td {
    grid-column: auto;
  }
  main table tr:has(> td:first-child > input) > td::before {
    display: none;
  }
  main table tr:has(> td:first-child > input) > td:first-child {
    padding-right: 0;
    min-height: 0;
  }
  main table tr:has(> td:first-child > input) > td.mz-td-actions {
    position: static;
    padding: 0;
    border: 0;
  }
  main table tr:has(> td:first-child > input) input {
    padding: 9px 10px;
  }

  /* сотрудники: ФИО | ✎
                  логин · роль [статус] | В архив / Вернуть
     кнопки становятся ячейками сетки карточки (display: contents);
     стрелки сортировки скрыты в theme.css */
  main table[data-mz="employees"] tr {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 6px;
    padding: 8px 8px 8px 12px;
  }
  main table[data-mz="employees"] td::before {
    display: none;
  }
  main table[data-mz="employees"] td:first-child {
    grid-column: 1 / 4;
    grid-row: 1;
    font-size: 15px;
    line-height: 20px;
  }
  main table[data-mz="employees"] td:nth-child(2) {
    grid-row: 2;
    font-size: 13px;
    color: var(--color-slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  main table[data-mz="employees"] td:nth-child(4),
  main table[data-mz="employees"] td:nth-child(5) {
    grid-row: 2;
    justify-self: start;
  }
  main table[data-mz="employees"] td:nth-child(4) > span,
  main table[data-mz="employees"] td:nth-child(5) > span {
    padding: 1px 8px;
    font-size: 12px;
    line-height: 18px;
  }
  /* пароль показываем, только когда он есть (после сброса) */
  main table[data-mz="employees"] td:nth-child(3) {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  main table[data-mz="employees"] td:nth-child(3):has(> span:empty),
  /* «Активен» — норма, не выводим; в архиве роль уже «Архив» */
  main table[data-mz="employees"] td:nth-child(5):has(> .bg-emerald-100),
  main table[data-mz="employees"] tr:has(> td:nth-child(4) > .bg-slate-100) > td:nth-child(5) {
    display: none;
  }
  main table[data-mz="employees"] td.mz-td-actions,
  main table[data-mz="employees"] td.mz-td-actions > div {
    display: contents;
  }
  main table[data-mz="employees"] td.mz-td-actions button {
    grid-row: 1;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    display: inline-grid;
    place-items: center;
  }
  main table[data-mz="employees"] td.mz-td-actions button:nth-child(3) {
    grid-column: 4;
    justify-self: end;
  }
  main table[data-mz="employees"] td.mz-td-actions button:nth-child(4) {
    grid-row: 2;
    grid-column: 4;
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }

  /* архив сотрудников: без пояснения, кнопка поменьше */
  main .rounded-3xl:has(table[data-mz="employees"]) button.flex-1 > p,
  main .rounded-3xl:has(> div > button.flex-1 > h3) button.flex-1 > p {
    display: none;
  }
  main .rounded-3xl:has(> div > button.flex-1 > h3) {
    padding: 12px;
  }
  main .rounded-3xl:has(> div > button.flex-1 > h3) h3 {
    font-size: 16px;
  }
  main .rounded-3xl:has(> div > button.flex-1 > h3) button:not(.flex-1) {
    padding: 8px 12px;
  }

  /* строка «нет данных» */
  main table td[colspan] {
    grid-column: 1 / -1;
    text-align: center;
  }

  /* ── Продажи: импорт — дата и кнопка в одну строку ───────────────────── */
  main .space-y-5 > :first-child:has(input[type="date"]) > div {
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;
  }
  main .space-y-5 > :first-child:has(input[type="date"]) label {
    flex: 1;
    min-width: 0;
    gap: 6px;
    font-size: 13px;
  }
  main .space-y-5 > :first-child:has(input[type="date"]) label > input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 6px 10px;
  }
  main .space-y-5 > :first-child:has(input[type="date"]) button {
    flex: none;
    min-height: 40px;
    padding: 0 12px;
    gap: 6px;
    font-size: 0;
  }
  main .space-y-5 > :first-child:has(input[type="date"]) button::after {
    content: "Загрузить";
    font-size: 14px;
  }
  main .space-y-5 > :first-child:has(input[type="date"]) > div > span {
    flex-basis: 100%;
    font-size: 12px;
  }

  /* блок неразобранных: без длинного пояснения, плотный список */
  main .rounded-3xl:has([data-mz-claim]) > .p-5 > p.mb-4 {
    display: none;
  }
  main .rounded-3xl:has([data-mz-claim]) > .p-5 > .mb-1 {
    margin-bottom: 8px;
  }
  main .rounded-3xl:has([data-mz-claim]) .space-y-2 {
    display: grid;
    gap: 8px;
  }
  main .rounded-3xl:has([data-mz-claim]) .space-y-2 > * + * {
    margin-top: 0;
  }

  /* карточка: «товар — награда» / «сумма — время» / продавец + Привязать */
  main [data-mz-claim="admin"] {
    padding: 10px 12px;
  }
  main [data-mz-claim="admin"] > [data-mz-title] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 8px;
  }
  main [data-mz-claim="admin"] > [data-mz-title]::before {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  main [data-mz-claim="admin"] > [data-mz-title]::after {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }
  main [data-mz-claim="admin"] > [data-mz-title] > :first-child {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  main [data-mz-claim="admin"] > [data-mz-title] > :last-child:not(:first-child) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    font-size: 12px;
  }
  /* журнал продаж: дата / продавец / товар / Сумма | База | Итого */
  main table[data-mz="sales"] tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 8px;
  }
  main table[data-mz="sales"] td:nth-child(2),
  main table[data-mz="sales"] td:nth-child(3) {
    grid-column: 1 / -1;
    font-size: 13px;
  }
  main table[data-mz="sales"] td:nth-child(2)::before,
  main table[data-mz="sales"] td:nth-child(3)::before {
    display: none;
  }
  main table[data-mz="sales"] td:nth-child(2) {
    color: var(--color-slate-600);
  }
  main table[data-mz="sales"] td:nth-child(3) .mt-1 {
    display: none;
  }
  main table[data-mz="sales"] td:nth-child(4) {
    display: none;
  }
  main table[data-mz="sales"] td:nth-child(n + 5):not(.mz-td-actions) {
    margin-top: 6px;
  }
  main table[data-mz="sales"] td:nth-child(n + 5)::before {
    font-size: 11px;
    line-height: 14px;
  }

  /* ── Неразобранные продажи: сумма сверху, продавец и кнопка в одну строку ─ */
  main .grid.rounded-2xl.bg-slate-50:has(> select) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
  }
  main .grid.rounded-2xl.bg-slate-50:has(> select) > :first-child {
    grid-column: 1 / -1;
  }
  main .grid.rounded-2xl.bg-slate-50:has(> select) > select {
    min-width: 0;
    min-height: 40px;
  }
  main .grid.rounded-2xl.bg-slate-50:has(> select) > button {
    min-height: 40px;
    padding: 0 14px;
  }
  /* фильтры журнала — в одну строку */
  main .flex.flex-wrap.items-end.gap-3 > label {
    flex: 1;
    min-width: 0;
  }
  main .flex.flex-wrap.items-end.gap-3 > label > select {
    width: 100%;
  }

  /* ── График смен: сотрудник → статусы → календарь → итоги → заготовки ── */
  main .space-y-5:has(.min-w-\[700px\]) {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  main .space-y-5:has(.min-w-\[700px\]) > * {
    margin: 0;
  }
  /* карточку настроек «раскрываем», чтобы расставить её части вокруг календаря */
  main .space-y-5:has(.min-w-\[700px\]) > .rounded-3xl:not(:has(.min-w-\[700px\])),
  main .space-y-5:has(.min-w-\[700px\]) > .rounded-3xl:not(:has(.min-w-\[700px\])) > div,
  main .space-y-5:has(.min-w-\[700px\]) > .rounded-3xl:not(:has(.min-w-\[700px\])) > div > .grid:not(.md\:grid-cols-5) {
    display: contents;
  }
  /* заголовок с описанием не нужен — он в шапке; месяц во всю ширину */
  main .space-y-5:has(.min-w-\[700px\]) > :first-child { order: 1; }
  main .space-y-5:has(.min-w-\[700px\]) > :first-child > div:first-child {
    display: none;
  }
  main .space-y-5:has(.min-w-\[700px\]) label:has(> select) { order: 2; }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) { order: 3; }
  main .space-y-5:has(.min-w-\[700px\]) > .rounded-3xl:has(.min-w-\[700px\]) { order: 4; }
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 { order: 5; }
  main .space-y-5:has(.min-w-\[700px\]) .rounded-3xl > div > .flex.flex-wrap.gap-2 { order: 6; }

  main .space-y-5:has(.min-w-\[700px\]) label:has(> select) > span {
    display: none;
  }

  /* статусы — строка чипов с цветной точкой (легенда календаря) */
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .mb-1 {
    display: none;
  }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .flex,
  main .space-y-5:has(.min-w-\[700px\]) .rounded-3xl > div > .flex.flex-wrap.gap-2 {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    margin: 0 -12px;
    padding: 0 12px 2px;
    scrollbar-width: none;
  }
  main .space-y-5:has(.min-w-\[700px\]) .flex.flex-wrap.gap-2::-webkit-scrollbar {
    display: none;
  }
  main .space-y-5:has(.min-w-\[700px\]) .flex.flex-wrap.gap-2 > button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .flex > button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mz-dot);
  }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .flex > button:nth-child(1),
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > :nth-child(1) { --mz-dot: #10b981; }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .flex > button:nth-child(2),
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > :nth-child(2) { --mz-dot: #a3adbf; }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .flex > button:nth-child(3),
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > :nth-child(3) { --mz-dot: #e5484d; }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .flex > button:nth-child(4),
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > :nth-child(4) { --mz-dot: #f59e0b; }
  main .space-y-5:has(.min-w-\[700px\]) div:has(> .mb-1 + .flex) > .flex > button:nth-child(5),
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > :nth-child(5) { --mz-dot: #3268e8; }

  /* заготовки — небольшие кнопки, «Очистить месяц» — красным */
  main .space-y-5:has(.min-w-\[700px\]) .rounded-3xl > div > .flex.flex-wrap.gap-2 > button {
    min-height: 34px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-slate-600);
  }
  main .space-y-5:has(.min-w-\[700px\]) .rounded-3xl > div > .flex.flex-wrap.gap-2 > button:nth-child(3) {
    color: #bd4449;
    border-color: #f1c9cb;
  }

  /* итоги месяца — одна-две строки «● Смен 13» вместо пяти карточек */
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
    border: 1px solid var(--mz-border, #e7ebf2);
    border-radius: 12px;
    background: #fff;
  }
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > .rounded-3xl {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
  }
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > .rounded-3xl::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mz-dot);
  }
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > .rounded-3xl > .flex {
    padding: 0;
  }
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 > .rounded-3xl > .flex > div:last-child {
    display: flex;
    align-items: baseline;
    gap: 5px;
  }
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 .text-sm {
    font-size: 13px;
    color: var(--color-slate-600);
  }
  main .space-y-5:has(.min-w-\[700px\]) .md\:grid-cols-5 .text-2xl {
    font-size: 14px;
    line-height: 20px;
  }

  /* ── Календарь смен — 7 колонок без прокрутки ────────────────────────── */
  main .min-w-\[700px\] div.min-h-24 {
    min-height: 54px;
    border-radius: 8px;
    background: transparent;
  }
  main .overflow-x-auto:has(> .min-w-\[700px\]) {
    overflow: visible;
    padding: 8px;
  }
  main .min-w-\[700px\] {
    min-width: 0;
  }
  main .min-w-\[700px\] .grid-cols-7 {
    gap: 4px;
  }
  main .min-w-\[700px\] > .grid-cols-7:first-child {
    margin-bottom: 6px;
    font-size: 11px;
  }
  main .min-w-\[700px\] button.min-h-24 {
    min-height: 54px;
    padding: 4px;
    border-radius: 8px;
    text-align: center;
  }
  main .min-w-\[700px\] button.min-h-24:hover {
    transform: none;
  }
  main .min-w-\[700px\] button.min-h-24 > .flex-col {
    align-items: center;
    gap: 2px;
  }
  main .min-w-\[700px\] button.min-h-24 .text-lg {
    font-size: 14px;
    line-height: 18px;
  }
  /* статус — цветная точка вместо надписи; надпись остаётся для скринридера */
  main .min-w-\[700px\] button.min-h-24 .rounded-full {
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    filter: saturate(2.2) brightness(0.85);
  }
  main .min-w-\[700px\] button.min-h-24 > .mt-2 {
    margin-top: 2px;
  }
  /* «На смене: N» → только число; имена скрываем */
  main .min-w-\[700px\] button.min-h-24 > .mt-2 > div:first-child {
    font-size: 0;
  }
  main .min-w-\[700px\] button.min-h-24 > .mt-2 > div:first-child b {
    font-size: 11px;
    line-height: 14px;
  }
  main .min-w-\[700px\] button.min-h-24 > .mt-2 > .truncate {
    display: none;
  }

  /* ── Дашборд ─────────────────────────────────────────────────────────── */
  /* месяц и план — две плотные строки во всю ширину */
  .space-y-6:has(> .xl\:grid-cols-5) > :first-child > * {
    width: 100%;
    max-width: none;
  }
  .space-y-6:has(> .xl\:grid-cols-5) > :first-child label {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) > :first-child label > span {
    flex: none;
    font-size: 11px;
    line-height: 1.2;
    max-width: 90px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) > :first-child label > input {
    margin: 0;
  }
  /* пары: План | Осталось, Факт | Мотивация, Возвраты | Средний чек */
  .space-y-6 > .xl\:grid-cols-5 > :nth-child(1) { order: 1; }
  .space-y-6 > .xl\:grid-cols-5 > :nth-child(6) { order: 2; }
  .space-y-6 > .xl\:grid-cols-5 > :nth-child(2) { order: 3; }
  .space-y-6 > .xl\:grid-cols-5 > :nth-child(4) { order: 4; }
  .space-y-6 > .xl\:grid-cols-5 > :nth-child(3) { order: 5; }
  .space-y-6 > .xl\:grid-cols-5 > :nth-child(5) { order: 6; }
  /* график и строки продавцов — плотнее */
  .space-y-6:has(> .xl\:grid-cols-5) > .rounded-3xl h2 + p {
    display: none;
  }
  .space-y-6:has(> .xl\:grid-cols-5) > .rounded-3xl .overflow-x-auto {
    padding: 8px;
    border-radius: 8px;
  }
  /* продавцы: «Имя · N смен · %» / «Факт … План [ ]» / полоса / детали */
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 {
    display: grid;
    gap: 8px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > * + * {
    margin-top: 0;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl {
    padding: 10px 12px;
    border-radius: 10px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name badge pct"
      "fact plan plan";
    gap: 6px 8px;
    align-items: center;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(1) {
    grid-area: name;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(2) {
    grid-area: badge;
    padding: 2px 8px;
    font-size: 12px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(3) {
    grid-area: plan;
    justify-self: end;
    gap: 6px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(3) > span {
    font-size: 12px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(3) > input {
    width: 112px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    text-align: right;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(3) > button {
    min-height: 36px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(4) {
    grid-area: fact;
    font-size: 13px;
    color: var(--color-slate-600);
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(4) b {
    font-size: 14px;
    color: var(--mz-fg, #233047);
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .grid > :nth-child(5) {
    grid-area: pct;
    min-width: 40px;
    text-align: right;
    font-size: 15px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .mt-3 {
    height: 6px;
    margin-top: 8px;
  }
  .space-y-6:has(> .xl\:grid-cols-5) .space-y-3 > .rounded-2xl > .text-xs {
    margin-top: 6px;
    font-size: 11px;
    line-height: 16px;
  }
}