/* =========================================================
   Основные настройки
   ========================================================= */

:root {
    --font-main: "Arial Narrow", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
}

body {
    margin: 0;
    background-color: var(--white);
    color: var(--black);
    font-family: var(--font-main);
    font-size: 16px;
}

button,
input,
select,
textarea {
    font: inherit;
}

main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

main > * {
    margin: 0;
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue-dark);
}

/* Опасные текстовые ссылки: удалить, очистить */
a.red-dark,
a.link-danger {
    color: var(--red-dark);
}

a.red-dark:hover,
a.link-danger:hover {
    color: var(--red);
}


/* =========================================================
   Хлебные крошки
   ========================================================= */

.breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin-left: 6px;
    color: var(--black-light);
}

.breadcrumbs a {
    color: var(--blue);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--blue-dark);
    text-decoration: underline;
}

.breadcrumbs li:last-child {
    color: var(--black);
}


/* =========================================================
   Справочная информация и заголовки
   ========================================================= */

.help-box {
    padding: 10px 12px;
    border: 1px solid var(--gray);
    border-radius: 3px;
    color: var(--gray-dark);
    font-size: calc(1em - 2px);
}

.section-title {
    margin: 0;
    padding-left: 5px;
    border-left: 2px solid var(--green);
    color: var(--black);
    font-size: calc(1em + 1px);
}


/* =========================================================
   Смысловые секции страницы
   ========================================================= */

.page-content section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/*
 * Внутри section расстояние задаёт gap самого контейнера.
 * Внешние margin дочерних элементов здесь не суммируются.
 */
.page-content section > * {
    margin-top: 0;
    margin-bottom: 0;
}

/*
 * Если section находятся внутри одной формы, расстояние между
 * соседними секциями и нижней группой кнопок остаётся 10px.
 */
.page-content form > section + section,
.page-content form > section + .button-group {
    margin-top: 10px;
}


/* =========================================================
   Блоки статусов
   ========================================================= */

.status-blocks {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.status-block {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    padding: 10px 15px;
    border: 1px solid var(--gray);
    border-radius: 3px;
    background-color: var(--white);
    color: var(--black);
    text-align: left;
}

.status-block__name {
    color: var(--black-light);
    font-size: calc(1em - 5px);
}

.status-block__value {
    margin-top: 4px;
    font-size: calc(1em + 5px);
}


/* =========================================================
   Поля ввода, списки и текстовые поля
   ========================================================= */

input,
select,
textarea {
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--gray-dark);
    border-radius: 3px;
    outline: none;
    background-color: var(--white);
    color: var(--black);
    text-align: left;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--black-light);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 2px var(--green-light);
}

input::placeholder,
textarea::placeholder {
    color: var(--gray-dark);
    opacity: 1;
}

select {
    cursor: pointer;
}

textarea {
    display: block;
    min-height: 100px;
    resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
    border-color: var(--gray);
    background-color: var(--gray-light);
    color: var(--gray-dark);
    cursor: not-allowed;
}

input[type="file"] {
    padding: 4px;
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    background-color: var(--gray);
    color: var(--black);
    font: inherit;
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--green);
    color: var(--white);
}


/* =========================================================
   Структура форм
   ========================================================= */

.form-field {
    margin-bottom: 10px;
}

/* Заголовок раздела, расположенный прямо внутри формы */
.page-content form > .section-title {
    margin-bottom: 10px;
}

.form-field > input,
.form-field > select,
.form-field > textarea,
.form-field > .form-field__hint {
    width: 100%;
}

.form-field > label {
    display: block;
    margin-bottom: 5px;
    color: var(--black);
    font-weight: bold;
}

.form-field__hint {
    margin-top: 5px;
    color: var(--black-light);
    font-size: calc(1em - 2px);
}

/* Просмотр логотипа бренда на светлом и тёмном фоне */
.brand-image-previews {
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.brand-image-preview {
    flex: 0 0 auto;
    padding: 10px;
    text-decoration: none;
}

.brand-image-preview--black {
    background-color: var(--black);
}

.brand-image-preview img {
    display: block;
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
}

.brand-image-preview:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.button-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.button-group.center {
    justify-content: center;
}

.message-error {
    margin-bottom: 15px;
    padding: 10px 12px;
    border: 1px solid var(--red);
    border-radius: 3px;
    background-color: var(--red-light);
    color: var(--red-dark);
}


/* =========================================================
   Кнопки
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--gray-dark);
    border-radius: 3px;
    background-color: var(--gray-light);
    color: var(--black);
    font-size: calc(1em - 2px);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover {
    border-color: var(--green-dark);
    background-color: var(--green-dark);
    color: var(--white);
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--green-light);
    outline-offset: 2px;
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.button.disabled {
    border-color: var(--gray);
    background-color: var(--gray-light);
    color: var(--gray-dark);
    cursor: not-allowed;
}

.market-interchange-action-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.market-interchange-action-cell > button.table-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 22px;
    padding: 0;
    line-height: 1;
}

.market-interchange-link {
    line-height: 1;
}

.market-interchange-link--found {
    background: #f4c542;
    border-color: #c99d1d;
}

.market-interchange-link--found:hover,
.market-interchange-link--found:focus-visible {
    background: #e8b82e;
    border-color: #b58a13;
}

.market-interchange-link--linked {
    background: #69c779;
    border-color: #48a85a;
}

.market-interchange-link--linked:hover,
.market-interchange-link--linked:focus-visible {
    background: #57b969;
    border-color: #3d954d;
}


.market-interchange-link--create {
    background: #eeeeee;
    border-color: #aaaaaa;
    font-weight: 700;
}

.market-interchange-link--create:hover,
.market-interchange-link--create:focus-visible {
    background: #dddddd;
    border-color: #888888;
}

.market-interchange-create-type {
    font-weight: 700;
}


/* Зелёная кнопка */

button.payment,
.button--success {
    border-color: var(--green);
    background-color: var(--green);
    color: var(--white);
}

button.payment:hover,
.button--success:hover {
    border-color: var(--green-dark);
    background-color: var(--green-dark);
    color: var(--white);
}


/* Красная кнопка */

button.paymentcancel,
.button--danger {
    border-color: var(--red-dark);
    background-color: var(--red-dark);
    color: var(--white);
}

button.paymentcancel:hover,
.button--danger:hover {
    border-color: var(--red);
    background-color: var(--red);
    color: var(--white);
}


/* =========================================================
   Специальные поля
   ========================================================= */

input.payment {
    text-align: center;
}

input.labelred,
select.labelred,
textarea.labelred {
    border-color: var(--red);
    background-color: var(--red-light);
    color: var(--red-dark);
}

.labelred::placeholder {
    color: var(--red);
}

input.labelred:focus,
select.labelred:focus,
textarea.labelred:focus {
    border-color: var(--red-dark);
    box-shadow: 0 0 0 2px var(--red-light);
}


/* =========================================================
   Элементы в одну строку
   ========================================================= */

.responsive-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
}

.responsive-row > * {
    min-width: 0;
    margin: 0;
}

/* Одинаковая высота полей, списков и кнопок в строке */
.responsive-row > input:not([type="hidden"]),
.responsive-row > select,
.responsive-row > button,
.responsive-row > .button {
    height: 34px;
}

/* Вертикальное центрирование текста в кнопках строки */
.responsive-row > button,
.responsive-row > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

/* Элемент занимает всё свободное место в строке */
.responsive-row > .responsive-row__fill {
    flex: 1 1 auto;
    width: auto;
}


/* =========================================================
   Процентная ширина элементов
   ========================================================= */

.per3   { width: 3%; }
.per5   { width: 5%; }
.per6   { width: 6%; }
.per7   { width: 7%; }
.per10  { width: 10%; }
.per15  { width: 15%; }
.per20  { width: 20%; }
.per25  { width: 25%; }
.per30  { width: 30%; }
.per35  { width: 35%; }
.per40  { width: 40%; }
.per45  { width: 45%; }
.per50  { width: 50%; }
.per55  { width: 55%; }
.per60  { width: 60%; }
.per65  { width: 65%; }
.per70  { width: 70%; }
.per75  { width: 75%; }
.per80  { width: 80%; }
.per85  { width: 85%; }
.per90  { width: 90%; }
.per95  { width: 95%; }
.per100 { width: 100%; }

.responsive-row > :is(
    .per5,
    .per10,
    .per15,
    .per20,
    .per25,
    .per30,
    .per35,
    .per40,
    .per45,
    .per50,
    .per55,
    .per60,
    .per65,
    .per70,
    .per75,
    .per80,
    .per85,
    .per90,
    .per95,
    .per100
) {
    flex-shrink: 1;
}


/* =========================================================
   Вспомогательные классы
   ========================================================= */

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

/* =========================================================
   Пагинация
   ========================================================= */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0 0;
    padding: 0;
    font-size: 14px;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;

    border: 1px solid var(--gray);
    border-right: 0;

    background-color: var(--white);
    color: var(--blue);

    text-decoration: none;
}

.pagination a:first-child,
.pagination span:first-child {
    border-radius: 3px 0 0 3px;
}

.pagination a:last-child,
.pagination span:last-child {
    border-right: 1px solid var(--gray);
    border-radius: 0 3px 3px 0;
}

.pagination a:hover {
    background-color: var(--gray-light);
    color: var(--blue-dark);
}

.pagination span.active {
    background-color: var(--gray-light);
    color: var(--black-dark);
    font-weight: bold;
}

.pagination span.disabled {
    background-color: var(--gray-light);
    color: var(--gray-dark);
}

/* Мобильная пагинация по умолчанию скрыта */
.pagination--mobile {
    display: none;
}

.responsive-row input,
.responsive-row select,
.responsive-row button {
    box-sizing: border-box;
}

.responsive-row input,
.responsive-row select {
    padding: 0 10px;
}

.responsive-row select {
    padding-right: 30px;
}



/* =========================================================
   Ручная загрузка прайса
   ========================================================= */

.price-upload-dialog {
    width: 320px;
    max-width: calc(100% - 20px);
    margin: auto;
    padding: 20px;
    border: 1px solid var(--gray-dark);
    border-radius: 3px;
    background-color: var(--white);
    color: var(--black);
}

.price-upload-dialog::backdrop {
    background-color: transparent;
}

.price-upload-dialog__title {
    margin: 0 0 15px;
    color: var(--black);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}

.price-upload-dialog__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.price-upload-dialog__file {
    display: block;
    width: 100%;
    height: auto;
    min-height: 42px;
    padding: 3px 4px;
    border-radius: 3px;
    font-size: calc(1em - 2px);
    line-height: normal;
}

.price-upload-dialog__file::file-selector-button {
    height: 34px;
    margin: 0 10px 0 0;
    padding: 0 12px;
    border: 0;
    border-radius: 3px;
    background-color: var(--gray-light);
    color: var(--black);
    font: inherit;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.price-upload-dialog__file::file-selector-button:hover {
    background-color: var(--green-dark);
    color: var(--white);
}

.price-upload-dialog__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 175px;
    min-height: 34px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.price-upload-dialog > .price-upload-dialog__button {
    display: flex;
}

.equipment-card {
    padding: 10px 12px;
    border: 1px solid var(--gray);
    border-radius: 3px;
    background-color: var(--gray);
    color: var(--black);
    font-size: 1em;
}

/* Группа чекбоксов */
.checkbox-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 15px;
}

.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

@media (max-width: 600px) {
    .price-upload-dialog {
        width: calc(100% - 20px);
        padding: 15px;
    }

    .price-upload-dialog__button {
        width: 100%;
    }
}

/* =========================================================
   Кнопки с большим текстом
   ========================================================= */

.button--large {
    font-size: 1em;
}

.status-block > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   Мобильная версия
   ========================================================= */

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    main {
        padding: 10px;
    }

    .status-blocks {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .status-block {
        flex: 0 0 calc((100% - 20px) / 3);
        width: calc((100% - 20px) / 3);
        max-width: calc((100% - 20px) / 3);
        padding: 8px 10px;
    }

    .status-block__value {
        font-size: 1em;
    }

    .responsive-row {
        align-items: stretch;
        flex-direction: column;
    }

    .responsive-row > input:not([type="hidden"]),
    .responsive-row > select,
    .responsive-row > textarea,
    .responsive-row > button,
    .responsive-row > .button,
    .responsive-row > .form-field,
    .responsive-row > .responsive-row__fill {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    /* Добавление и редактирование товарных позиций заказа */
    #buy-container {
        gap: 8px;
    }

    #buy-container > .buy-item {
        flex-flow: row wrap;
        align-items: stretch;
        gap: 8px;
        padding: 8px;
        border: 1px solid var(--black-light);
        border-radius: 3px;
        background-color: var(--gray-light);
        font-size: 13px;
    }

    #buy-container > .buy-item > input,
    #buy-container > .buy-item > select,
    #buy-container > .buy-item > button {
        height: 28px;
        padding: 0 8px;
    }

    #buy-container > .buy-item > .buy_date,
    #buy-container > .buy-item > .buy_invoice,
    #buy-container > .buy-item > .buy_status,
    #buy-container > .buy-item > .buy_cargo {
        flex: 0 0 calc(50% - 4px);
        width: calc(50% - 4px);
        max-width: calc(50% - 4px);
    }

    #buy-container > .buy-item > .buy_product_name {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    #buy-container > .buy-item > .buy_price,
    #buy-container > .buy-item > .buy_price_summ {
        flex: 0 0 calc(40% - 6.4px);
        width: calc(40% - 6.4px);
        max-width: calc(40% - 6.4px);
    }

    #buy-container > .buy-item > .buy_quantity {
        flex: 0 0 calc(20% - 3.2px);
        width: calc(20% - 3.2px);
        max-width: calc(20% - 3.2px);
    }

    #buy-container > .buy-item > .buy_comment {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }

    #buy-container > .buy-item > .remove-item {
        flex: 0 0 28px;
        width: 28px;
        max-width: 28px;
    }

    .page-content:has(#buy-container) > .button-group,
    #sale-form > .button-group,
    #order-edit-form > .button-group {
        align-items: stretch;
        flex-flow: row wrap;
        gap: 10px;
    }

    .page-content:has(#buy-container) > .button-group > *,
    #sale-form > .button-group > *,
    #order-edit-form > .button-group > * {
        flex: 0 0 calc(50% - 5px);
        width: calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    .page-content:has(#buy-container) > .button-group > :last-child:nth-child(odd),
    #sale-form > .button-group > :last-child:nth-child(odd),
    #order-edit-form > .button-group > :last-child:nth-child(odd) {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
    }

    .form-field {
        width: 100%;
    }

    .button-group {
        align-items: stretch;
        flex-direction: column;
    }

    .button-group > button,
    .button-group > .button,
    .button-group > input[type="button"],
    .button-group > input[type="submit"],
    .button-group > input[type="reset"] {
        width: 100%;
    }
	
/* =========================================================
   Мобильная пагинация
   ========================================================= */	
		
	.pagination--desktop {
        display: none;
    }

    .pagination--mobile {
        display: flex;
        flex-wrap: nowrap;
    }

    .pagination--mobile a,
    .pagination--mobile span {
        min-width: 32px;
        min-height: 32px;
        padding: 6px 8px;
    }
}