/* =========================================================
   MAIN_PAGE
========================================================= */


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 768px) {

    /* =========================
       HEADER
    ========================= */

    .header {
        height: 64px;
    }

    .header_container {
        padding: 0 15px;
    }

    .logo {
        margin-right: 0;
    }

    .logo img {
        width: 48px;
        height: 48px;
    }

    .menu_button {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        margin-left: auto;
        padding: 0;

        border: none;
        background: transparent;

        color: #555;

        font-size: 26px;
        line-height: 1;

        cursor: pointer;
    }

    .menu_button:hover {
        color: #0B4085;
    }


    /* =========================
       NAVIGATION
    ========================= */

    .navigation {
        display: none;

        position: absolute;

        top: 64px;
        left: 0;
        right: 0;

        width: 100%;

        margin: 0;

        background: #fff;

        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

        z-index: 1001;
    }

    .navigation.open {
        display: block;
    }

    .navigation_list {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 0;
    }

    .navigation_item {
        width: 100%;

        border-bottom: 1px solid #eeeeee;
    }

    .navigation_item:last-child {
        border-bottom: none;
    }

    .navigation_link {
        width: 100%;
        min-height: 48px;

        padding: 12px 20px;

        box-sizing: border-box;

        display: flex;
        align-items: center;

        color: #444;

        font-size: 15px;
    }

    .navigation_link:hover {
        color: #0B4085;
        background: #f5f7fa;
    }

    .navigation_link.active {
        color: #0B4085;
        font-weight: 600;

        background: #f0f5fb;
    }

    .navigation_link.active::after {
        display: none;
    }


    /* =========================
       USER
    ========================= */

    .header_user {
        display: none;
    }

    .header_user.mobile_open {
        display: flex;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        padding: 14px 20px;

        box-sizing: border-box;

        justify-content: space-between;
        align-items: center;

        background: #f8f9fa;

        border-bottom: 1px solid #e5e5e5;

        z-index: 1002;
    }

    .header_user_info {
        align-items: flex-start;
    }

    .header_username {
        font-size: 14px;
    }

    .header_user_role {
        font-size: 12px;
    }

    .header_login,
    .header_logout {
        padding: 8px 12px;
    }


    /* =========================
       MAIN
    ========================= */

    .main {
        margin-top: 64px;
    }

    .main_container {
        width: 100%;

        padding: 24px 15px 30px;

        box-sizing: border-box;
    }


    /* =========================
       PAGE HEADER
    ========================= */

    .page_header {
        margin-bottom: 24px;
    }

    .page_title {
        font-size: 26px;
        line-height: 1.2;
    }

    .page_description {
        margin-top: 6px;

        font-size: 14px;
        line-height: 1.4;
    }


    /* =========================
       STATISTICS
    ========================= */

    .stats_grid {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .start_card {
        min-width: 0;

        padding: 16px;

        box-sizing: border-box;

        border-radius: 10px;
    }

    .stat_title {
        margin: 0;

        font-size: 14px;
        line-height: 1.3;

        font-weight: 500;

        color: #666;
    }

    .stat_value {
        margin: 8px 0 0;

        font-size: 25px;
        line-height: 1.2;

        font-weight: 700;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =========================
       LATEST DEALS
    ========================= */

    .orders {
        margin-top: 30px;
    }

    .section_header {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;

        margin-bottom: 12px;
    }

    .section_title {
        min-width: 0;

        font-size: 19px;
        line-height: 1.3;
    }

    .section_link {
        flex-shrink: 0;

        font-size: 13px;
    }


    /* =========================
       DEAL CARD
    ========================= */

    .orders_list {
        width: 100%;
    }

    .order_item {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        padding: 14px 15px;

        box-sizing: border-box;

        border-radius: 10px;
    }

    .order_info {
        width: 100%;
        min-width: 0;
    }

    .order_number {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order_customer {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order_details {
        width: 100%;

        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 10px;
    }

    .order_status {
        flex-shrink: 0;

        padding: 5px 9px;

        font-size: 12px;
    }

    .order_price {
        flex-shrink: 0;

        font-size: 14px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .main_container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .stats_grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .start_card {
        padding: 15px;
    }

    .stat_value {
        font-size: 24px;
    }

    .section_header {
        align-items: flex-start;
    }

    .section_title {
        font-size: 18px;
    }

    .order_item {
        padding: 13px;
    }
}



/* =========================================================
   CLIENTS — ADAPTIVE
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    /* =========================
       TOOLBAR
    ========================= */

    .clients_toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 20px;
    }


    .client_search_input {
        width: 100%;
        box-sizing: border-box;
    }


    .client_search_input:hover,
    .client_search_input:focus {
        width: 100%;
    }


    .clients_sort {
        width: 100%;
    }


    .clients_sort_select {
        width: 100%;
        box-sizing: border-box;
    }


    .client_add_button {
        width: 100%;
        box-sizing: border-box;
    }


    /* =========================
       CLIENT CARD
    ========================= */

    .client_card {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        padding: 15px;
    }


    .client_info {
        min-width: 0;
    }


    .client_name {
        font-size: 16px;
        line-height: 1.3;
    }


    .client_phone {
        font-size: 14px;
    }


    .client_details {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        width: 100%;
    }


    /* =========================
       MODAL
    ========================= */

    .client_modal_content {
        width: calc(100% - 30px);
        max-height: calc(100vh - 30px);

        overflow-y: auto;

        padding: 20px;
    }


    .client_form_row {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    /* =========================
       CLIENTS PAGE
    ========================= */

    .clients_toolbar {
        gap: 10px;
    }


    .client_search_input {
        width: 100%;
        min-width: 0;

        padding: 11px 12px;

        font-size: 16px;
    }


    .clients_sort_select {
        width: 100%;

        padding: 11px 12px;

        font-size: 16px;
    }


    .client_add_button {
        width: 100%;

        padding: 12px 16px;

        font-size: 15px;
    }


    /* =========================
       CLIENT CARD
    ========================= */

    .client_card {
        padding: 14px;

        gap: 12px;
    }


    .client_name {
        font-size: 16px;
    }


    .client_phone {
        font-size: 14px;
    }


    .client_details {
        flex-direction: column;
        align-items: stretch;

        gap: 10px;
    }


    .client_link {
        font-size: 15px;
    }


    /* =========================
       MODALS
    ========================= */

    .client_modal {
        padding: 15px;

        box-sizing: border-box;
    }


    .client_modal_content {
        width: 100%;
        max-width: none;

        max-height: calc(100vh - 30px);

        padding: 18px;

        border-radius: 10px;
    }


    .client_modal_header {
        margin-bottom: 20px;
    }


    .client_modal_header h2 {
        font-size: 20px;
        line-height: 1.25;
    }


    .client_modal_close {
        font-size: 26px;

        flex-shrink: 0;
    }


    /* =========================
       FORM
    ========================= */

    .client_form {
        gap: 15px;
    }


    .client_form_row {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .client_form_group {
        gap: 6px;
    }


    .client_form_group input,
    .client_form_group textarea {
        font-size: 16px;
    }


    .client_form_actions {
        flex-direction: column-reverse;

        gap: 8px;

        margin-top: 5px;
    }


    .client_form_cancel,
    .client_form_submit {
        width: 100%;

        padding: 12px 16px;

        font-size: 15px;
    }


    /* =========================
       DETAILS
    ========================= */

    .client_details_content {
        width: 100%;
    }


    .client_details_actions {
        display: flex;
        flex-direction: column;

        gap: 8px;

        width: 100%;
    }


    .client_details_actions button {
        width: 100%;
    }


    /* =========================
       EDIT FORM
    ========================= */

    .client_edit_form {
        width: 100%;
    }


    /* =========================
       DELETE MODAL
    ========================= */

    .client_delete_content {
        padding: 18px;
    }


    .client_delete_body {
        font-size: 14px;
        line-height: 1.5;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .main_container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .client_card {
        padding: 12px;
    }


    .client_modal {
        padding: 10px;
    }


    .client_modal_content {
        max-height: calc(100vh - 20px);

        padding: 15px;
    }


    .client_modal_header h2 {
        font-size: 18px;
    }

}



/* =========================================================
   DEALS — TABLET
========================================================= */

@media (max-width: 800px) {

    #dealDetailsModal {
        padding: 16px;
    }

    #dealDetailsModal .deal_details_modal {
        max-height: calc(100vh - 32px);
        border-radius: 16px;
    }

    #dealDetailsModal .deal_modal_header {
        padding: 20px;
    }

    #dealDetailsModal .deal_details_content {
        padding: 20px;
    }

    #dealDetailsModal .deal_details_info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_row {
        grid-template-columns:
            minmax(0, 1fr)
            80px
            120px;

        gap: 12px;
    }
}


/* =========================================================
   DEALS — MOBILE
========================================================= */

@media (max-width: 768px) {

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

    .deals_search,
    .deals_filter,
    .deals_add_button {
        width: 100%;
        box-sizing: border-box;
    }

    .deals_search:focus {
        width: 100%;
    }

    .deals_add_button {
        margin-left: 0;
    }

    .deals_table {
        overflow-x: auto;
    }

    .deal_create_form {
        padding: 15px;
    }

    .deal_create_content {
        max-height: 95vh;
        padding: 20px;
    }

    .deal_details_modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .deal_details_info {
        grid-template-columns: repeat(2, 1fr);
    }

    .deal_details_products .deal_product_row {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .deal_details_products .deal_product_quantity {
        grid-column: 2;
        grid-row: 1;
    }

    .deal_details_products .deal_product_sum {
        grid-column: 1 / -1;
        text-align: left;
    }
}


/* =========================================================
   DEALS — SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .deal_product_modal {
        padding: 15px;
    }

    .deal_product_modal_content {
        padding: 20px;
    }

    .deal_product_actions {
        flex-direction: column;
    }

    .deal_product_actions button {
        width: 100%;
    }
}


@media (max-width: 560px) {

    #dealDetailsModal {
        padding: 8px;
    }

    #dealDetailsModal .deal_details_modal {
        max-height: calc(100vh - 16px);
        border-radius: 14px;
    }

    #dealDetailsModal .deal_modal_header {
        padding: 18px;
    }

    #dealDetailsModal .deal_modal_header h2 {
        font-size: 19px;
    }

    #dealDetailsModal .deal_details_content {
        padding: 18px;
        gap: 20px;
    }

    #dealDetailsModal .deal_details_info {
        grid-template-columns: 1fr;
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_row {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
        padding: 15px 0;
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_name {
        grid-column: 1;
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_quantity {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_sum {
        grid-column: 1 / -1;
        text-align: left;
    }

    #dealDetailsModal .deal_total strong {
        font-size: 19px;
    }
}


@media (max-width: 480px) {

    .deal_details_info {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   АДАПТИВ ТАБЛИЦЫ СДЕЛОК — КАРТОЧКИ
========================================================= */

@media (max-width: 768px) {

    /* Убираем заголовок таблицы */
    .deals_table_header {
        display: none;
    }

    /* Больше не нужна минимальная ширина таблицы */
    .deals_table {
        width: 100%;
        overflow: visible;
    }

    /*
        Строка сделки превращается
        из строки таблицы в карточку
    */
    .deals_table_row {
        display: grid;

        grid-template-columns: 1fr auto;

        gap: 10px 15px;

        min-width: 0;
        width: 100%;

        padding: 16px;

        box-sizing: border-box;

        border-radius: 12px;
    }

    /* Все элементы строки */
    .deals_table_row > div {
        min-width: 0;
    }

    /*
        ID
        Первый элемент строки
    */
    .deals_table_row > div:nth-child(1) {
        grid-column: 1;
        grid-row: 1;

        font-size: 12px;
        color: #888;
    }

    /*
        Статус
        Последний элемент
    */
    .deals_table_row > div:nth-child(7) {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;
    }

    /*
        Название сделки
    */
    .deals_table_row > div:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;

        font-size: 17px;
        font-weight: 600;

        color: #111827;
    }

    /*
        Клиент
    */
    .deals_table_row > div:nth-child(3) {
        grid-column: 1 / -1;

        padding-top: 8px;

        border-top: 1px solid #eee;
    }

    /*
        Менеджер
    */
    .deals_table_row > div:nth-child(4) {
        grid-column: 1 / -1;
    }

    /*
        Склад
    */
    .deals_table_row > div:nth-child(5) {
        grid-column: 1 / -1;
    }

    /*
        Сумма
    */
    .deals_table_row > div:nth-child(6) {
        grid-column: 1 / -1;

        padding-top: 10px;

        border-top: 1px solid #eee;

        font-size: 17px;
        font-weight: 600;
    }

    /*
        Убираем возможное обрезание
        длинных названий
    */
    .deals_table_row > div {
        overflow: visible;
        white-space: normal;
        text-overflow: unset;
    }

    /*
        Статус не должен растягиваться
    */
    .deals_table_row .deal_status {
        justify-self: end;
    }

}

/* =========================================================
   МАЛЕНЬКИЙ ТЕЛЕФОН
========================================================= */

@media (max-width: 480px) {

    .deals_table_row {
        gap: 8px 12px;

        padding: 14px;
    }

    .deals_table_row > div:nth-child(2) {
        font-size: 16px;
    }

    .deals_table_row > div:nth-child(6) {
        font-size: 16px;
    }

}

/* =========================================================
   ПОДПИСИ В МОБИЛЬНЫХ КАРТОЧКАХ СДЕЛОК
========================================================= */

@media (max-width: 768px) {

    /* Клиент */
    .deals_table_row > div:nth-child(3)::before {
        content: "Клиент";
    }

    /* Менеджер */
    .deals_table_row > div:nth-child(4)::before {
        content: "Менеджер";
    }

    /* Склад */
    .deals_table_row > div:nth-child(5)::before {
        content: "Склад";
    }

    /* Сумма */
    .deals_table_row > div:nth-child(6)::before {
        content: "Сумма";
    }


    /* Общий стиль подписей */
    .deals_table_row > div:nth-child(3)::before,
    .deals_table_row > div:nth-child(4)::before,
    .deals_table_row > div:nth-child(5)::before,
    .deals_table_row > div:nth-child(6)::before {

        display: block;

        margin-bottom: 3px;

        font-size: 11px;
        font-weight: 500;

        color: #9ca3af;

        text-transform: uppercase;
        letter-spacing: .03em;
    }
}


@media (max-width: 600px) {

    #dealDetailsDeliveryAddress {
        width: 100%;
        max-width: 100%;

        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #dealDetailsCustomerPhone {
        color: #0B4085;
        text-decoration: underline;
        cursor: pointer;
    }

}

/* =========================================================
   КНОПКИ ДЕЙСТВИЙ СДЕЛКИ — МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */

@media (max-width: 768px) {

    .deal_actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;

        width: 100%;
        margin-left: 0;
    }

    #dealStatusAction,
    #dealDeleteAction {
        width: 100%;
        box-sizing: border-box;

        padding: 10px 12px;

        text-align: center;
    }

}

@media (max-width: 560px) {

    #dealDetailsModal .deal_modal_header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    #dealDetailsModal .deal_actions_bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #dealDetailsModal #dealDetailsTitle {
        font-size: 19px;
    }

    #dealDetailsModal .deal_details_status {
        align-self: flex-start;
    }

    #dealDetailsModal .deal_actions {
        display: flex;
        flex-direction: column;
        gap: 8px;

        width: 100%;
        margin-left: 0;
    }

    #dealDetailsModal #dealStatusAction,
    #dealDetailsModal #dealDeleteAction {
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
        text-align: center;
    }

    #dealDetailsModal .deal_modal_close {
        position: absolute;
        top: 18px;
        right: 18px;
    }
}

@media (max-width: 600px) {

    #dealDetailsModal .deal_actions_bar {
        flex-wrap: wrap;
        gap: 12px;
    }

    #dealDetailsModal #dealDetailsTitle {
        width: auto;
    }

    #dealDetailsModal .deal_details_status {
        order: 2;
    }

    #dealDetailsModal .deal_actions {
        order: 3;

        width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 8px;
        margin-left: 0;
    }

    #dealDetailsModal .deal_status_action {
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
    }

    #dealDetailsModal #dealStatusAction {
        justify-self: start;
    }

    #dealDetailsModal #dealDeleteAction {
        justify-self: center;
    }

}


/* =========================================================
   СОЗДАНИЕ СДЕЛКИ — МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */

@media (max-width: 768px) {

    .deal_create_form {
        padding: 10px;
        align-items: flex-start;

        overflow-y: auto;
    }

    .deal_create_form .deal_modal_content {
        width: 100%;
        max-width: none;

        max-height: none;

        margin: 10px 0;

        padding: 20px;

        border-radius: 12px;
    }

    /* Две колонки превращаем в одну */

    .deal_form_grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Заголовок */

    .deal_create_form .deal_modal_header {
        margin-bottom: 20px;
    }

    .deal_create_form .deal_modal_header h2 {
        font-size: 20px;
    }

    .deal_create_form .deal_modal_header p {
        font-size: 13px;
    }

    /* Поля */

    .deal_form_group {
        margin-bottom: 15px;
    }

    /* Товары */

    .deal_products {
        margin-top: 20px;
    }

    .deal_products_list {
        padding: 10px;
    }

    /* Кнопки */

    .deal_form_actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .deal_form_actions button {
        width: 100%;
        box-sizing: border-box;
    }
}


/* =========================================================
   АДАПТИВ СКЛАДА
========================================================= */

@media (max-width: 768px) {

    .warehouse_header {
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
    }

    .warehouse_title {
        font-size: 26px;
    }

    .warehouse_add_button {
        padding: 9px 14px;
    }

    .warehouse_controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .warehouse_search {
        max-width: none;
    }

    .warehouse_search:hover,
    .warehouse_search:focus {
        max-width: none;
    }

    .warehouse_filter {
        width: 100%;
    }

    /* Убираем поведение таблицы */
    .warehouse_table_wrapper {
        overflow: visible;
        border: none;
        background: transparent;
    }

    /* Заголовок таблицы на телефоне не нужен */
    .warehouse_table_header {
        display: none;
    }

    .warehouse_table_body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Строка товара превращается в карточку */
    .warehouse_table_body .warehouse_table {
        display: grid;

        grid-template-columns: 1fr 1fr;

        min-width: 0;
        min-height: 0;

        padding: 16px;

        background: #fff;

        border: 1px solid #e5e5e5;
        border-radius: 10px;

        box-sizing: border-box;

        gap: 10px 15px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .warehouse_table_body .warehouse_table:hover {
        background: #fff;
    }

    /* ID */
    .warehouse_table_body .warehouse_table > div:nth-child(1) {
        grid-column: 1 / -1;

        font-size: 12px;
        color: #999;
    }

    /* Товар */
    .warehouse_table_body .warehouse_table > div:nth-child(2) {
        grid-column: 1 / -1;

        font-size: 17px;
        font-weight: 600;
        color: #222;
    }

    /* Склад */
    .warehouse_table_body .warehouse_table > div:nth-child(3) {
        font-size: 14px;
        color: #666;
    }

    /* Остаток */
    .warehouse_table_body .warehouse_table > div:nth-child(4) {
        text-align: right;

        font-size: 14px;
        font-weight: 600;
    }

    /* Цена */
    .warehouse_table_body .warehouse_table > div:nth-child(5) {
        grid-column: 1 / -1;

        padding-top: 8px;

        border-top: 1px solid #eee;

        font-size: 16px;
        font-weight: 600;
    }

    .warehouse_empty {
        padding: 30px 15px;
    }
}


@media (max-width: 768px) {

    /* Попап */
    .warehouse_modal {
        padding: 10px;
        align-items: flex-end;
    }

    .warehouse_modal_content {
        width: 100%;
        max-width: none;
        max-height: 92vh;

        padding: 18px;

        border-radius: 16px 16px 0 0;

        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.18);
    }

    /* Заголовок */
    .warehouse_modal_header {
        margin-bottom: 20px;
        gap: 10px;
    }

    .warehouse_modal_header h2 {
        font-size: 20px;
    }

    .warehouse_modal_close {
        width: 32px;
        height: 32px;
        font-size: 27px;
    }

    /* Информация о товаре */
    .warehouse_modal_body {
        gap: 10px;
    }

    .warehouse_modal_row {
        flex-direction: column;
        align-items: flex-start;

        gap: 4px;
        padding-bottom: 10px;
    }

    .warehouse_modal_row span {
        font-size: 13px;
        color: #888;
    }

    .warehouse_modal_row strong {
        width: 100%;

        text-align: left;

        font-size: 15px;
        color: #222;

        word-break: break-word;
    }

    /* Поля редактирования */
    .warehouse_modal_edit_form {
        gap: 12px;
    }

    .warehouse_modal_field {
        gap: 5px;
    }

    .warehouse_modal_field label {
        font-size: 13px;
    }

    .warehouse_modal_field input,
    .warehouse_modal_field select,
    .warehouse_modal_field textarea {
        font-size: 16px;
    }

    .warehouse_modal_field input,
    .warehouse_modal_field select {
        min-height: 42px;
    }

    .warehouse_modal_field textarea {
        min-height: 90px;
        max-height: 140px;
    }

    /* Кнопки */
    .warehouse_modal_actions {
        flex-direction: column;
        gap: 8px;

        margin-top: 20px;
    }

    .warehouse_modal_actions button {
        width: 100%;
        min-height: 44px;
    }
}



/* =========================================================
   АДАПТИВ ПОЛЬЗОВАТЕЛИ
========================================================= */

@media (max-width: 768px) {

    .users_page {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Заголовок страницы */

    .users_header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        margin-bottom: 20px;
    }

    .users_title {
        font-size: 26px;
    }

    .users_add_button {
        width: 100%;
        min-height: 44px;
    }

    /* Поиск */

    .users_controls {
        margin-bottom: 20px;
    }

    .users_search {
        width: 100%;
        max-width: none;
        min-height: 44px;
        font-size: 16px;
    }

    .users_search:hover,
    .users_search:focus {
        max-width: none;
    }

    /* Убираем горизонтальный скролл */

    .users_table_wrapper {
        overflow: visible;
        border: none;
        background: transparent;
    }

    /* Заголовок таблицы на телефоне не нужен */

    .users_table_header {
        display: none;
    }

    /* Список пользователей */

    .users_table_body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Карточка пользователя */

    .users_table_body .users_table {
        display: grid;

        grid-template-columns: 1fr 1fr;

        min-width: 0;
        min-height: 0;

        width: 100%;

        padding: 16px;

        box-sizing: border-box;

        border: 1px solid #ddd;
        border-radius: 12px;

        background: #fff;

        gap: 12px 20px;

        cursor: pointer;

        box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    }

    .users_table_body .users_table:hover {
        background: #fff;
    }

    .users_table_body .users_table:last-child {
        border-bottom: 1px solid #ddd;
    }

    /* Ячейки */

    .users_table_body .users_table > div {
        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ID */

    .users_table_body .users_table > div:nth-child(1) {
        color: #999;
        font-size: 12px;
    }

    /* Пользователь */

    .users_table_body .users_table > div:nth-child(2) {
        font-size: 16px;
        font-weight: 600;

        color: #222;
    }

    /* Email */

    .users_table_body .users_table > div:nth-child(3) {
        font-size: 14px;
        color: #666;

        grid-column: 1 / -1;
    }

    /* Роль */

    .users_table_body .users_table > div:nth-child(4) {
        font-size: 14px;
        font-weight: 500;
    }

    /* Склад */

    .users_table_body .users_table > div:nth-child(5) {
        font-size: 14px;
        color: #666;

        text-align: right;
    }

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

    .users_pagination {
        margin-top: 20px;
        flex-wrap: wrap;
    }

    /* Пустой список */

    .users_empty {
        padding: 30px 15px;
    }

    /* Модальное окно */

    .users_modal {
        padding: 10px;

        align-items: flex-end;
    }

    .users_modal_content {
        width: 100%;
        max-width: none;

        max-height: 92vh;

        padding: 18px;

        border-radius: 16px 16px 0 0;

        box-shadow:
            0 -5px 30px rgba(0, 0, 0, .18);
    }

    /* Заголовок модалки */

    .users_modal_header {
        margin-bottom: 20px;
        gap: 10px;
    }

    .users_modal_header h2 {
        font-size: 20px;
    }

    .users_modal_close {
        width: 32px;
        height: 32px;

        font-size: 27px;
    }

    /* Информация о пользователе */

    .users_modal_body {
        gap: 10px;
    }

    .users_modal_row {
        flex-direction: column;
        align-items: flex-start;

        gap: 4px;

        padding-bottom: 10px;
    }

    .users_modal_row span {
        font-size: 13px;
        color: #888;
    }

    .users_modal_row strong {
        width: 100%;

        text-align: left;

        font-size: 15px;

        word-break: break-word;
    }

    /* Форма редактирования */

    .users_modal_edit_form {
        gap: 12px;
    }

    .users_modal_field {
        gap: 5px;
    }

    .users_modal_field label {
        font-size: 13px;
    }

    .users_modal_field input,
    .users_modal_field select {
        min-height: 44px;

        font-size: 16px;
    }

    /* Кнопки модалки */

    .users_modal_actions {
        flex-direction: column;

        gap: 8px;

        margin-top: 20px;
    }

    .users_modal_actions button {
        width: 100%;

        min-height: 44px;
    }

    .users_table_body .users_table > div {
    min-width: 0;
}

.users_table_body .users_table > div {
    min-width: 0;
}

/* ID */
.users_table_body .users_table > div:nth-child(1)::before {
    content: "ID";
}
.users_table_body .users_table > div:nth-child(1) {
    grid-column: 1 / -1;

    font-size: 12px;
    color: #777;
}

/* Пользователь */
.users_table_body .users_table > div:nth-child(2)::before {
    content: "Пользователь: ";
}
.users_table_body .users_table > div:nth-child(2) {
    grid-column: 1 / -1;

    min-width: 0;

    font-size: 17px;
    font-weight: 600;

    color: #222;

    text-align: left;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Email */
.users_table_body .users_table > div:nth-child(3)::before {
    content: "Email: ";
}
.users_table_body .users_table > div:nth-child(3) {
    grid-column: 1 / -1;

    min-width: 0;

    overflow-wrap: anywhere;
}

/* Роль */
.users_table_body .users_table > div:nth-child(4)::before {
    content: "Роль: ";
}
.users_table_body .users_table > div:nth-child(4) {
    grid-column: 1;
    display: inline-flex;
    align-items: flex-start;
    width: fit-content;
    border-radius: 20px;
    color: #007bff;
    font-size: 12px;
    font-weight: 600;
}
.users_table_body .users_table > div:nth-child(4)::before {
    display: none;
}

/* Склад */
.users_table_body .users_table > div:nth-child(5)::before {
    content: "Склад: ";
}
.users_table_body .users_table > div:nth-child(5) {
    grid-column: 1 / -1;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;

    text-align: left;
}
.users_table_body .users_table > div:first-child {
    color: #777;
    font-size: 13px;
}
.users_table_body .users_table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 18px;
    box-sizing: border-box;
}
.users_table_body .users_table > div {
    min-width: 0;
    overflow-wrap: anywhere;
}
}

@media (max-width: 768px) {

    .users_table_wrapper {
        overflow-x: hidden;
    }

    .users_table_header {
        display: none;
    }

    .users_table_body .users_table {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;

        padding: 18px;

        gap: 10px;

        box-sizing: border-box;
    }

    .users_table_body .users_table > div {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* ID */
    .users_table_body .users_table > div:nth-child(1) {
        font-size: 12px;
        color: #777;
    }

    /* Пользователь */
    .users_table_body .users_table > div:nth-child(2) {
        font-size: 17px;
        font-weight: 600;

        color: #222;

        text-align: left;
    }

    /* Email */
    .users_table_body .users_table > div:nth-child(3) {
        color: #555;
    }

    /* Роль */
    .users_table_body .users_table > div:nth-child(4) {
        width: fit-content;
        align-self: flex-start;
        border-radius: 6px;
        font-size: 13px;
    }

    /* Склад */
    .users_table_body .users_table > div:nth-child(5) {
        width: 100%;
        min-width: 0;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        color: #333;
    }
}

@media (max-width: 600px) {

    .create_user_overlay {
        padding: 12px;
    }

    .create_user_modal {
        max-height: 90vh;

        padding: 20px;

        border-radius: 12px;
    }

    .create_user_header {
        margin-bottom: 20px;
    }

    .create_user_header h2 {
        font-size: 20px;
    }

    .create_user_actions {
        flex-direction: column-reverse;

        width: 100%;
    }

    .create_user_actions button {
        width: 100%;
    }
}


/* =========================================================
   DEALS — ФИНАЛЬНЫЙ АДАПТИВ
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    /* =========================
       TOOLBAR
    ========================= */

    .deals_toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;

        margin-bottom: 20px;
    }

    .deals_search,
    .deals_filter,
    .deals_add_button {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .deals_search:hover,
    .deals_search:focus {
        width: 100%;
    }

    .deals_add_button {
        margin-left: 0;
    }


    /* =========================
       DEALS TABLE → CARDS
    ========================= */

    .deals_table {
        width: 100%;
        overflow: visible;
    }

    .deals_table_header {
        display: none;
    }

    .deals_list {
        width: 100%;
        gap: 10px;
    }

    .deals_table_row {
        display: grid;

        grid-template-columns: 1fr auto;

        width: 100%;
        min-width: 0;

        gap: 10px 15px;

        padding: 16px;

        box-sizing: border-box;

        border-radius: 12px;
    }

    .deals_table_row > div {
        min-width: 0;

        overflow: visible;

        white-space: normal;
        text-overflow: unset;
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* ID */

    .deals_table_row > div:nth-child(1) {
        grid-column: 1;
        grid-row: 1;

        font-size: 12px;
        color: #888;
    }


    /* STATUS */

    .deals_table_row > div:nth-child(7) {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;
    }

    .deals_table_row .deal_status {
        justify-self: end;
    }


    /* DEAL NAME */

    .deals_table_row > div:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;

        font-size: 17px;
        font-weight: 600;

        color: #111827;
    }


    /* CLIENT */

    .deals_table_row > div:nth-child(3) {
        grid-column: 1 / -1;

        padding-top: 8px;

        border-top: 1px solid #eee;
    }

    .deals_table_row > div:nth-child(3)::before {
        content: "Клиент";
    }


    /* MANAGER */

    .deals_table_row > div:nth-child(4) {
        grid-column: 1 / -1;
    }

    .deals_table_row > div:nth-child(4)::before {
        content: "Менеджер";
    }


    /* WAREHOUSE */

    .deals_table_row > div:nth-child(5) {
        grid-column: 1 / -1;
    }

    .deals_table_row > div:nth-child(5)::before {
        content: "Склад";
    }


    /* TOTAL */

    .deals_table_row > div:nth-child(6) {
        grid-column: 1 / -1;

        padding-top: 10px;

        border-top: 1px solid #eee;

        font-size: 17px;
        font-weight: 600;
    }

    .deals_table_row > div:nth-child(6)::before {
        content: "Сумма";
    }


    /* LABELS */

    .deals_table_row > div:nth-child(3)::before,
    .deals_table_row > div:nth-child(4)::before,
    .deals_table_row > div:nth-child(5)::before,
    .deals_table_row > div:nth-child(6)::before {

        display: block;

        margin-bottom: 3px;

        font-size: 11px;
        font-weight: 500;

        color: #9ca3af;

        text-transform: uppercase;
        letter-spacing: .03em;
    }


    /* =========================
       DEAL DETAILS MODAL
    ========================= */

    #dealDetailsModal {
        padding: 16px;
    }

    #dealDetailsModal .deal_details_modal {
        width: 100%;

        max-height: calc(100vh - 32px);

        border-radius: 16px;
    }

    #dealDetailsModal .deal_modal_header {
        padding: 20px;
    }

    #dealDetailsModal .deal_details_content {
        padding: 20px;
    }


    /* =========================
       DETAILS INFO
    ========================= */

    #dealDetailsModal .deal_details_info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* =========================
       HEADER ACTIONS
    ========================= */

    #dealDetailsModal .deal_modal_header {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 15px;
    }

    #dealDetailsModal .deal_actions_bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        gap: 10px;
    }

    #dealDetailsModal #dealDetailsTitle {
        width: 100%;

        padding-right: 45px;

        box-sizing: border-box;

        font-size: 20px;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    #dealDetailsModal .deal_details_status {
        align-self: flex-start;
    }


    /* =========================
       ACTION BUTTONS
    ========================= */

    #dealDetailsModal .deal_actions {
        display: flex;
        flex-direction: column;

        width: 100%;

        margin-left: 0;

        gap: 8px;
    }

    #dealDetailsModal .deal_actions button {
        width: 100%;
        min-height: 42px;

        box-sizing: border-box;

        text-align: center;
    }


    /* =========================
       CLOSE BUTTON
    ========================= */

    #dealDetailsModal .deal_modal_close {
        position: absolute;

        top: 18px;
        right: 18px;

        z-index: 2;
    }


    /* =========================
       PRODUCTS
    ========================= */

    #dealDetailsModal #dealDetailsProducts .deal_product_row {
        grid-template-columns:
            minmax(0, 1fr)
            80px
            120px;

        gap: 12px;
    }


    /* =========================
       CREATE DEAL MODAL
    ========================= */

    .deal_create_form {
        padding: 10px;

        align-items: flex-start;

        overflow-y: auto;
    }

    .deal_create_form .deal_modal_content {
        width: 100%;
        max-width: none;

        max-height: none;

        margin: 10px 0;

        padding: 20px;

        border-radius: 12px;
    }

    .deal_form_grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .deal_create_form .deal_modal_header {
        margin-bottom: 20px;
    }

    .deal_create_form .deal_modal_header h2 {
        font-size: 20px;
    }

    .deal_create_form .deal_modal_header p {
        font-size: 13px;
    }

    .deal_form_group {
        margin-bottom: 15px;
    }

    .deal_products {
        margin-top: 20px;
    }

    .deal_products_list {
        padding: 10px;
    }

    .deal_form_actions {
        flex-direction: column-reverse;

        gap: 8px;
    }

    .deal_form_actions button {
        width: 100%;

        box-sizing: border-box;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    /* =========================
       TOOLBAR
    ========================= */

    .deals_toolbar {
        gap: 10px;
    }

    .deals_search,
    .deals_filter {
        padding: 11px 12px;

        font-size: 16px;
    }

    .deals_add_button {
        padding: 12px 16px;

        font-size: 15px;
    }


    /* =========================
       DEAL CARD
    ========================= */

    .deals_table_row {
        padding: 14px;

        gap: 8px 12px;
    }

    .deals_table_row > div:nth-child(2) {
        font-size: 16px;
    }

    .deals_table_row > div:nth-child(6) {
        font-size: 16px;
    }


    /* =========================
       DETAILS MODAL
    ========================= */

    #dealDetailsModal {
        padding: 8px;
    }

    #dealDetailsModal .deal_details_modal {
        max-height: calc(100vh - 16px);

        border-radius: 14px;
    }

    #dealDetailsModal .deal_modal_header {
        padding: 18px;
    }

    #dealDetailsModal .deal_details_content {
        padding: 18px;

        gap: 20px;
    }

    #dealDetailsModal #dealDetailsTitle {
        font-size: 19px;
    }


    /* =========================
       INFO
    ========================= */

    #dealDetailsModal .deal_details_info {
        grid-template-columns: 1fr;
    }


    /* =========================
       ACTIONS
    ========================= */

    #dealDetailsModal .deal_actions {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 8px;
    }

    #dealDetailsModal .deal_actions button {
        width: 100%;

        min-height: 42px;
    }


    /* =========================
       PRODUCTS
    ========================= */

    #dealDetailsModal #dealDetailsProducts .deal_product_row {
        grid-template-columns: 1fr auto;

        gap: 8px 12px;

        padding: 15px 0;
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_name {
        grid-column: 1;
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_quantity {
        grid-column: 2;
        grid-row: 1;

        text-align: right;
    }

    #dealDetailsModal #dealDetailsProducts .deal_product_sum {
        grid-column: 1 / -1;

        text-align: left;
    }

    #dealDetailsModal .deal_total strong {
        font-size: 19px;
    }


    /* =========================
       PRODUCT MODAL
    ========================= */

    .deal_product_modal {
        padding: 15px;
    }

    .deal_product_modal_content {
        padding: 20px;
    }

    .deal_product_actions {
        flex-direction: column;

        gap: 8px;
    }

    .deal_product_actions button {
        width: 100%;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .deals_table_row {
        padding: 13px;
    }

    #dealDetailsModal .deal_modal_header {
        padding: 16px;
    }

    #dealDetailsModal .deal_details_content {
        padding: 16px;
    }

    #dealDetailsModal #dealDetailsTitle {
        font-size: 18px;
    }

    #dealDetailsModal .deal_modal_close {
        top: 16px;
        right: 16px;
    }

    #dealDetailsModal .deal_details_info {
        gap: 10px;
    }

    #dealDetailsModal .deal_total {
        gap: 10px;
    }

    #dealDetailsModal .deal_total strong {
        font-size: 18px;
    }
}


/* =========================================================
   EXTREMELY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .deals_table_row {
        padding: 12px;
    }

    #dealDetailsModal .deal_details_content {
        padding: 14px;
    }

    #dealDetailsModal .deal_modal_header {
        padding: 14px;
    }

    #dealDetailsModal #dealDetailsTitle {
        font-size: 17px;
    }
}

@media (max-width: 768px) {

    #dealDetailsModal .deal_actions button,
    #dealDetailsModal .deal_edit_action {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 42px;

        box-sizing: border-box;
        text-align: center;
    }
}