.global-loader {
    display: none;
}

/* Десктопная версия для уведомлений - скрываем мобильный dropdown, показываем бейджики (по умолчанию) */
section#notifications .nav-filter .mobile-filter-dropdown {
    display: none;
}

section#notifications .nav-filter .desktop-filter-block {
    display: flex;
}

/* Десктопная версия транспорта - показываем карточки */
section#transport .content.list.desktop-list {
    display: flex;
    flex-direction: column;
}

/* Мобильная версия транспорта - скрываем таблицу на десктопе */
section#transport .mobile-list-content {
    display: none;
}

section#invoices .desktop-list,
section#upd .desktop-list {
    display: table;
}

section#invoices .mobile-list-content,
section#upd .mobile-list-content {
    display: none;
}

header nav {
    position: relative;
    z-index: 1;
    height: 100%;
    display: none;
    align-items: center;
}

header nav::after {
    content: "";
    display: block;
    clear: both;
}

.toggle-wrap {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.toggle-bar,
.toggle-bar::before,
.toggle-bar::after,
.toggle-wrap.active .toggle-bar,
.toggle-wrap.active .toggle-bar::before,
.toggle-wrap.active .toggle-bar::after {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.toggle-bar {
    width: 27px;
    position: relative;
    border-top: 2px solid #303030;
    display: block;
}

.toggle-bar::before,
.toggle-bar::after {
    content: "";
    display: block;
    background: #303030;
    height: 2px;
    width: 27px;
    position: absolute;
    top: -10px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform-origin: 8%;
    -webkit-transform-origin: 8%;
    transform-origin: 8%;
}

.toggle-bar::after {
    top: 6px;
}

.toggle-wrap.active .toggle-bar {
    border-top: 2px solid transparent;
}

.toggle-wrap.active .toggle-bar::before {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.toggle-wrap.active .toggle-bar::after {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media screen and (max-width: 1440px) {
    /* ---- BASIC ---- */

    .nav-filter .-block {
        flex-wrap: wrap;
        height: auto;
        margin-right: 0;
        width: 100%;
    }

    .nav-filter .-block .-item {
        width: calc(25% - 4px);
        height: 40px;
        justify-content: center;
    }

    .nav-filter .-search .input {
        width: 100%;
    }

    /* ---- USERS ---- */

    section#transport .content.list .block .item img,
    section#users .content .block.driver .item img {
        width: 60px;
        height: 60px;
    }
}

@media screen and (max-width: 1024px) {
    /* ---- BASIC ---- */

    /* ---- ANALITICS ---- */
    
    #analitics .nav-info-blocks {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    #analitics .nav-info-blocks .info-block {
        width: calc(50% - 5px);
        margin-right: 0;
    }
    
    #analitics .nav-info-blocks .info-block:nth-child(3) {
        width: 100%;
    }
    
    #analitics .nav-info-blocks .info-block span {
        font-size: 22px;
    }

    /* ---- SUPPORT CHATS ---- */
    
    #support-chats .content .chats-list {
        width: calc(40% - 12px);
    }

    #support-chats .content .main {
        width: calc(60% - 12px);
    }

    #support-chats .content .chats-list .list .item {
        height: 70px;
        min-height: 70px;
    }

    #support-chats .content .chats-list .list .item img {
        height: 50px;
        width: 50px;
    }

    #support-chats .content .chats-list .list .item .info .name {
        font-size: 16px;
    }

    #support-chats .content .main .c-overlay .c-header {
        height: 80px;
        padding: 15px;
    }

    #support-chats .content .main .c-overlay .c-header img {
        height: 45px;
        width: 45px;
    }

    #support-chats .content .main .c-overlay .c-header .-name {
        font-size: 16px;
    }

    /* ---- REGULAR CHATS ---- */
    
    #chats .content .chats-list {
        width: calc(40% - 12px);
    }

    #chats .content .main {
        width: calc(60% - 12px);
    }

    #chats .content .chats-list .list .item {
        height: 70px;
        min-height: 70px;
    }

    #chats .content .chats-list .list .item img {
        height: 50px;
        width: 50px;
    }

    #chats .content .chats-list .list .item .info .name {
        font-size: 16px;
    }

    #chats .content .main .c-overlay .c-header {
        height: 80px;
        padding: 15px;
    }

    #chats .content .main .c-overlay .c-header img {
        height: 45px;
        width: 45px;
    }

    #chats .content .main .c-overlay .c-header .-name {
        font-size: 16px;
    }

    .input.datepicker .-icon-date,
    .input.password .-show-password,
    .input.datepicker .-icon-date svg,
    .input.password .-show-password svg {
        height: 24px;
        width: 24px;
    }

    .select .-base .-title {
        font-size: var(--text-small);
    }

    .btn {
        font-size: 18px;
        border-radius: 12px;
        padding: 16px 30px;
    }

    .btn.small {
        height: 50px;
        border-radius: 10px;
        padding: 12px 20px;
    }

    .modals .modal .-header .-close svg {
        height: 16px;
        width: 16px;
    }

    .accordion .-acc-header .-acc-action svg {
        height: 16px;
        width: 10px;
    }

    section .breadcrumb .prev svg {
        height: 22px;
        width: 22px;
    }

    section .breadcrumb .title {
        font-size: 22px;
    }

    section .content .block .title {
        font-size: 18px;
    }

    input,
    textarea,
    .select,
    .input label,
    .select label {
        font-size: var(--text-small);
    }

    .modals .modal {
        width: 520px;
    }

    .modals .modal .-header {
        font-size: 20px;
        padding-bottom: 8px;
        padding-top: 15px;
    }

    .modals .modal .-main {
        padding: 0 20px;
    }

    .modals .modal .-header {
        width: calc(100% - 40px);
        margin-bottom: 12px;
    }

    .modals .modal .-main .-block-text {
        padding: 5px 16px;
    }

    .modals .modal .-main .-block-text span,
    .modals .modal .-main .-table-content .-text,
    .modals .modal .-main .-subject {
        font-size: var(--text-small);
    }

    .modals .modal .-main .-table-content {
        margin-bottom: 0;
    }

    .modals .modal .-action {
        padding: 20px;
    }

    /* ---- TRANSPORT ---- */

    .modals .modal.add-driver,
    .modals .modal.add-transport {
        width: 460px;
    }

    section#transport .content .block .inputs .input,
    section#drivers .content .block .inputs .input,
    section#transport .content .block .inputs .select,
    section#drivers .content .block .inputs .select {
        width: calc(50% - 12px);
    }

    section#transport .save .text,
    section#drivers .save .text {
        width: 60%;
        font-size: var(--text-small);
    }

    section#transport .save .btn,
    section#drivers .save .btn {
        height: 56px;
        font-size: var(--text-small);
    }

    section#transport .content.list .block,
    section#users .content .block.driver {
        margin-bottom: 10px;
        padding: 20px;
    }

    section#transport .content.list .block .action .added::before,
    section#transport .content.list .block .action .added::after,
    section#users .content .block.driver .action .added::before,
    section#users .content .block.driver .action .added::after {
        height: 50px;
    }

    section#transport .content.list .block .item,
    section#users .content .block.driver .item,
    section#transport .content.list .block .added,
    section#users .content .block.driver .added,
    section#transport .content.list .block .action div,
    section#users .content .block.driver .action div,
    .modal.add-driver .transport,
    .modal.add-transport .driver,
    .modal.add-driver .driver .add-action,
    .modal.add-transport .transport .add-action,
    .modal.add-driver .driver,
    .modal.add-transport .transport {
        font-size: var(--text-small);
    }

    section#transport .content.list .block .item img,
    section#users .content .block.driver .item img,
    section#transport .content.list .block .added img,
    section#users .content .block.driver .added img {
        height: 36px !important;
        width: 36px !important;
        margin-right: 12px;
    }

    section#transport .content.list .block .action .added svg,
    section#users .content .block.driver .action .added svg {
        height: 16px;
        width: 16px;
    }

    section#transport .-status p,
    section#users .-status p {
        font-size: 12px;
    }

    section#transport .-status,
    section#users .-status {
        padding: 7px 12px;
        border-radius: 8px;
    }

    section#transport .content.list .block .action .added,
    section#users .content .block.driver .action .added {
        padding: 0 16px;
        margin: 0 16px;
        width: 280px;
    }

    .modal.add-driver .transport img,
    .modal.add-transport .driver img,
    .modal.add-driver .driver .info img,
    .modal.add-transport .transport .info img {
        height: 40px;
        width: 40px;
        margin-right: 12px;
    }

    .modal.add-driver .driver .info p,
    .modal.add-transport .transport .info p,
    section#transport .content.list .block .item p,
    section#users .content .block.driver .item .name {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 200px;
    }

    section#users .content .block.accordion:nth-child(1) .item p {
        width: auto;
    }

    .modal.user-info .-main .transport-info {
        font-size: var(--text-small);
    }

    .modal.user-info .-main .transport-info .transport img {
        height: 42px;
        width: 42px;
        margin-right: 12px;
    }

    .modals .modal .-main .-subject-alt.small,
    .modals .modal .-action .-subject-alt.small {
        font-size: 12px;
    }

    section#cabinet .content .block .company-info .-photo {
        height: 140px;
        width: 150px;
        min-width: 150px;
        margin-right: 15px;
    }
}

@media (max-width: 768px) {
    section {
        height: 100dvh;
    }

    /* ---- FLASH MESSAGES (ALERTS) ---- */
    .alert {
        position: fixed !important;
        top: 20px !important;
        left: 15px !important;
        right: 15px !important;
        z-index: 100000 !important;
        max-width: calc(100% - 30px) !important;
        width: auto !important;
        margin: 0 !important;
        padding: 15px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }

    .alert.alert-success {
        background: #46BC44 !important;
        color: white !important;
    }

    .alert.alert-error {
        background: #EA1D37 !important;
        color: white !important;
    }

    /* ---- ANALITICS ---- */
    
    #analitics .nav-info-blocks {
        flex-direction: column;
        gap: 15px;
    }
    
    #analitics .nav-info-blocks .info-block {
        width: 100%;
        margin-right: 0;
        text-align: center;
        padding: 15px;
        background: var(--white-gray);
        border-radius: 12px;
    }
    
    #analitics .nav-info-blocks .info-block span {
        font-size: 18px;
    }
    
    #analitics .nav-info-blocks .info-block p {
        font-size: 14px;
        margin-bottom: 5px;
    }

    /* ---- NOTIFICATIONS MOBILE ---- */
    
    /* Мобильный dropdown для фильтров уведомлений */
    section#notifications .nav-filter .mobile-filter-dropdown {
        display: block !important;
        margin-bottom: 12px;
        width: 100% !important;
    }
    
    section#notifications .nav-filter .mobile-dropdown-header {
        width: 100% !important;
    }
    
    section#notifications .nav-filter .mobile-dropdown-content {
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    section#notifications .nav-filter .desktop-filter-block {
        display: none !important;
    }
    
    section#notifications .nav-filter .mobile-dropdown-content.open {
        max-height: 500px;
    }
    
    section#notifications .nav-filter .mobile-dropdown-arrow.open {
        transform: rotate(180deg);
    }
    
    section#notifications .nav-filter .mobile-filter-item.active {
        background-color: #F6F6F8;
    }
    
    section#notifications .nav-filter .mobile-filter-item:hover {
        background-color: #F6F6F8;
    }
    
    /* Кнопка "Отметить все прочитанными" в мобильной версии */
    section#notifications .btn.small {
        height: 40px !important;
        font-size: 12px !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        white-space: nowrap;
    }
    
    header {
        width: calc(100% - 40px);
        height: 68px;
        padding: 0;
        left: 20px;
        border-radius: 16px;
        transition: border var(--transition);
        z-index: 99999;
    }

    section#transport .content .block .inputs .input,
    section#drivers .content .block .inputs .input,
    section#transport .content .block .inputs .select,
    section#drivers .content .block .inputs .select {
        width: calc(100% - 12px);
    }

    section#transport .breadcrumb .btn {
        font-size: 12px;
        padding: 10px;
        height: 40px;
    }

    section#transport .photos-transport .-block-content {
        width: 100% !important;
    }

    section#transport .photos-transport,
    section#transport .save,
    section#drivers .save {
        flex-wrap: wrap;
    }

    .nav-filter .-block .-item {
        width: calc(50% - 4px);
    }

    .btn.small {
        border-radius: 12px;
    }

    section#users .content .block.accordion:first-child .block.driver .item p {
        transform: translateY(-11px);
    }

    section#users .content .block.accordion:first-child .block.driver .action .added {
        transform: translateY(8px);
    }

    /* Мобильный dropdown для фильтров уведомлений - показываем только на мобильных */
    section#notifications .nav-filter .mobile-filter-dropdown {
        display: block !important;
        width: 100% !important;
    }
    
    section#notifications .nav-filter .mobile-dropdown-header {
        width: 100% !important;
    }
    
    section#notifications .nav-filter .mobile-dropdown-content {
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    section#notifications .nav-filter .desktop-filter-block {
        display: none !important;
    }
    
    section#notifications .nav-filter .mobile-dropdown-content.open {
        max-height: 500px;
    }
    
    section#notifications .nav-filter .mobile-dropdown-arrow.open {
        transform: rotate(180deg);
    }
    
    section#notifications .nav-filter .mobile-filter-item.active {
        background-color: #F6F6F8;
    }
    
    section#notifications .nav-filter .mobile-filter-item:hover {
        background-color: #F6F6F8;
    }
    
    /* Кнопка "Отметить все прочитанными" в мобильной версии */
    section#notifications .btn.small {
        height: 40px !important;
        font-size: 12px !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        white-space: nowrap;
    }

    header {
        background: 0;
    }

    header::before {
        content: '';
        position: fixed;
        backdrop-filter: blur(3px);
        -moz-backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        background: rgba(61, 60, 99, 0.12);
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
    }

    header.mobile-menu-active::before {
        opacity: 1;
        visibility: visible;
    }

    header.mobile-menu-active .menu:not(.more) {
        border: 1px solid #efefef;
        border-bottom: 0;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    header .menu .item .link .notification {
        right: auto;
        left: 30px;
    }

    header .menu {
        flex-direction: row;
        justify-content: space-between;
        max-width: 100%;
        padding: 10px;
    }

    header .menu:not(.more) {
        border: 1px solid var(--white);
        border-bottom: 0;
        border-radius: 16px;
    }

    header .menu .user {
        height: 100%;
        width: 250px;
        min-width: 60px;
        margin-bottom: 0;
    }

    header .menu .user img {
        height: 50px;
        width: 50px;
    }

    header .menu .user .info {
        left: 60px !important;
    }

    header .menu .user .info .name {
        font-size: 16px;
        max-width: 190px;
    }

    header .menu .user .info .tel {
        font-size: 14px;
    }

    header .menu .item .link p,
    header .menu .user .info {
        opacity: 1;
        visibility: visible;
    }

    header .menu .nav,
    header .menu .settings {
        display: none;
    }

    header nav {
        display: flex;
    }

    header .menu:not(.more) .nav,
    header .menu .settings {
        position: fixed;
        background-color: var(--white);
        width: calc(100% - 40px);
        right: 20px;
        top: 88px;
        padding: 10px;
        border: 1px solid #EFEFEF;
        border-top: 0;
    }
    
    /* Разделитель меню - скрываем в мобильной версии, так как все пункты в одном списке */
    header .menu-divider {
        display: none;
    }

    header .menu .nav {
        border-top: 0;
    }

    header .menu.more {
        z-index: 1;
        top: -1000px;
        left: 70px;
        padding: 0;
        background: 0;
        height: auto;
        position: fixed;
    }

    .nav-filter .-block .-item {
        font-size: 12px;
    }

    section .content .block .title {
        margin-bottom: 12px;
        font-size: var(--text-small);
    }

    header .menu .settings {
        top: 340px;
        border-top: 0;
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 16px;
        padding-bottom: 20px;
    }

    section .breadcrumb .prev {
        height: 25px;
        width: 25px;
    }

    section#users .block {
        padding: 10px;
    }

    section .breadcrumb .prev svg {
        height: 20px;
        width: 20px;
    }

    section#cabinet .driver-cabinet .input {
        width: 100%;
    }
    
    /* Оптимизация блока driver-cabinet для мобильной версии */
    section .content .block.driver-cabinet {
        padding: 20px 16px;
        box-sizing: border-box;
    }
    
    section .content .block.driver-cabinet .title {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    section .content .block.driver-cabinet .inputs {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    section .content .block.driver-cabinet .inputs .input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 16px !important;
    }
    
    section .content .block.driver-cabinet .inputs .input:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Кнопка "Обновить" в поле местоположения */
    section .content .block.driver-cabinet .input .update-location-btn {
        font-size: 12px;
        padding: 6px 12px;
        min-height: 32px;
        height: 32px;
    }
    
    section .content .block.driver-cabinet .input input[readonly] {
        padding-right: 100px;
    }
    
    /* Отступы между секциями */
    section .content .block.driver-cabinet .title + .inputs {
        margin-top: 0;
    }
    
    section .content .block.driver-cabinet .inputs + .title {
        margin-top: 24px;
    }

    header .menu:not(.more) .nav::before,
    header .menu .settings::before {
        content: '';
        height: calc(100% - 20px);
        width: calc(100% - 20px);
        background: var(--white-gray-dark);
        position: absolute;
        top: 0;
        left: 10px;
    }

    header .menu .nav::before {
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
    }
    

    header .menu .settings::before {
        top: 0;
        height: calc(100% - 10px);
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 16px;
    }

    header .menu .item {
        width: calc(100% - 20px);
        margin: 0 auto;
    }

    header .menu .item.active,
    header .menu .item:hover {
        background-color: var(--white);
    }

    header .menu .item.selected {
        border-radius: 16px;
    }

    section {
        padding-left: 0;
        padding-top: 0;
    }

    .btn:hover {
        opacity: 1;
    }

    .btn:active {
        opacity: .7;
    }

    section .breadcrumb {
        padding-top: 100px;
        position: relative;
        width: 100%;
    }

    section .content {
        top: 30px;
    }

    header .menu .item::after {
        display: none;
    }

    header .menu .item[data-menu-id]::before {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.99958 5.75023C4.76491 5.75023 4.53025 5.66039 4.3515 5.48164L0.684828 1.81498C0.326412 1.45656 0.326412 0.877229 0.684828 0.518812C1.04324 0.160396 1.62258 0.160396 1.98099 0.518812L5.01058 3.54839L8.02916 0.633394C8.39491 0.282311 8.97333 0.292394 9.32533 0.656311C9.67733 1.02023 9.66725 1.60139 9.30333 1.95248L5.63666 5.49264C5.45791 5.66498 5.22875 5.75023 4.99958 5.75023Z' fill='%237C7B99'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 13px;
        top: auto;
        right: 20px;
        opacity: 1;
        transform: rotate(var(--rotate-degrees, 0deg));
        transition: transform var(--transition);
    }

    .modals .modal {
        width: 100% !important;
        max-width: 100%;
        height: auto;
        /* Изменяем на auto, так как высота будет управляться JS */
        max-height: calc(100% - 40px);
        /* Максимальная высота с отступом */
        display: none;
        flex-direction: column;
        align-items: center;
        background-color: var(--white);
        border-radius: 20px 20px 0 0;
        /* Закругляем только верхние углы */
        overflow: hidden;
        transform: translateY(0);
        transition: transform var(--transition), opacity var(--transition), height var(--transition);
        position: fixed;
        bottom: 0;
        left: 0;
        transform: translateY(50%);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    }

    .modals .modal form {
        width: 100%;
    }

    .modal .-header {
        width: 100%;
        padding: 15px;
        text-align: center;
        cursor: grab;
        user-select: none;
        touch-action: none;
    }
    .modal .-header:active {
        cursor: grabbing;
    }

    /* Индикатор шторки (как в iOS) */
    .modal .-header::before {
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background: #ccc;
        border-radius: 3px;
        margin: 0 auto 10px;
        position: absolute;
        top: 20px;
        left: auto;
    }

    .modals {
        width: 100% !important;
        padding: 0 !important;
        right: 0 !important;
        top: 0;
        height: 100% !important;
        z-index: 99;
        align-items: end !important;
    }

    .modals .modal {
        width: 100% !important;
        border-radius: 12px !important;

        /* position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60vh;
        background: white;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
        pointer-events: auto;
        overflow-y: auto;
        touch-action: none;
        will-change: transform; */
    }

    .modals .modal .-header {
        padding-top: 40px !important;
        justify-content: center;
    }

    .modals .modal .-header .-close {
        display: none;
    }

    /* При открытой модалке блокируем прокрутку страницы под ней */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Модалки реквизитов и карты: прокрутка внутри окна, а не страницы */
    .modals .modal.bank-account-edit.show,
    .modals .modal.bank-card-edit.show {
        max-height: 90vh;
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
    }
    .modals .modal.bank-account-edit.show .-main,
    .modals .modal.bank-card-edit.show .-main {
        flex: 1;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Модалки карты и реквизитов: заголовок слева, крестик справа (не по центру) */
    .modals .modal.bank-card-edit .-header,
    .modals .modal.bank-account-edit .-header {
        justify-content: space-between !important;
        text-align: left;
    }
    .modals .modal.bank-card-edit .-header .-title,
    .modals .modal.bank-account-edit .-header .-title {
        text-align: left;
    }
    
    /* Показываем кнопку закрытия для модального окна транспорта на мобильных */
    .modals .modal.transport-info .-header .-close.mobile-close,
    .modals .modal.add-driver .-header .-close.mobile-close,
    .modals .modal.bank-card-edit .-header .-close.mobile-close,
    .modals .modal.bank-account-edit .-header .-close.mobile-close,
    .modals .modal.users-create .-header .-close.mobile-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 5px;
        margin-left: auto;
        margin-right: 0;
        position: relative;
        z-index: 10;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    
    .modals .modal.transport-info .-header .-close.mobile-close svg,
    .modals .modal.add-driver .-header .-close.mobile-close svg,
    .modals .modal.bank-card-edit .-header .-close.mobile-close svg,
    .modals .modal.bank-account-edit .-header .-close.mobile-close svg,
    .modals .modal.users-create .-header .-close.mobile-close svg {
        width: 18px;
        height: 18px;
        pointer-events: none;
    }
    
    .modals .modal.transport-info .-header .-close.mobile-close:hover svg path,
    .modals .modal.transport-info .-header .-close.mobile-close:active svg path,
    .modals .modal.add-driver .-header .-close.mobile-close:hover svg path,
    .modals .modal.add-driver .-header .-close.mobile-close:active svg path,
    .modals .modal.bank-card-edit .-header .-close.mobile-close:hover svg path,
    .modals .modal.bank-card-edit .-header .-close.mobile-close:active svg path,
    .modals .modal.bank-account-edit .-header .-close.mobile-close:hover svg path,
    .modals .modal.bank-account-edit .-header .-close.mobile-close:active svg path,
    .modals .modal.users-create .-header .-close.mobile-close:hover svg path,
    .modals .modal.users-create .-header .-close.mobile-close:active svg path {
        stroke: var(--blue-pastel);
    }
    
    /* Стрелка "назад" для модалки добавления сотрудника на мобильных */
    .modals .modal.users-create .-header .-back.mobile-back {
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 5px;
        margin-right: 12px;
        position: relative;
        z-index: 10;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        flex-shrink: 0;
    }
    
    .modals .modal.users-create .-header .-back.mobile-back svg {
        width: 24px;
        height: 24px;
        pointer-events: none;
    }
    
    .modals .modal.users-create .-header .-back.mobile-back:hover svg path,
    .modals .modal.users-create .-header .-back.mobile-back:active svg path {
        stroke: var(--blue-pastel);
    }
    
    /* Разрешаем клики по кнопкам в header транспорта и модалок карты/реквизитов */
    .modals .modal.transport-info .-header .transport-edit-btn,
    .modals .modal.transport-info .-header .-close.mobile-close,
    .modals .modal.add-driver .-header .-close.mobile-close,
    .modals .modal.bank-card-edit .-header .-close.mobile-close,
    .modals .modal.bank-account-edit .-header .-close.mobile-close,
    .modals .modal.users-create .-header .-back.mobile-back,
    .modals .modal.users-create .-header .-close.mobile-close {
        touch-action: manipulation;
    }
    
    /* Настройка header для модалки добавления сотрудника на мобильных */
    .modals .modal.users-create .-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .modals .modal.users-create .-header .-title {
        flex: 1;
        text-align: left;
        margin: 0;
    }
    
    /* Обеспечиваем кликабельность кнопки редактирования транспорта */
    .modals .modal.transport-info .-header .transport-edit-btn {
        position: relative;
        z-index: 10;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .modals .modal.transport-info .-header .transport-edit-btn[style*="display: none"] {
        display: none !important;
    }

    .modals .modal .-header .-status-wrapper {
        margin-left: auto;
    }

    /* Модальное окно добавления компании - разрешаем прокрутку */
    .modals .modal.company-info {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        max-height: 90vh;
    }

    .modals .modal.company-info .-main {
        overflow: visible !important;
        min-height: auto;
        padding-bottom: 20px;
    }

    /* Разрешаем прокрутку для контейнера модального окна компании */
    body:has(.modal.company-info) .modals,
    .modals:has(.modal.company-info) {
        overflow: visible !important;
    }

    section#cabinet .content .block .company-info {
        flex-direction: column;
    }

    section#cabinet .content .block .company-info.company-info-cabinet-grid {
        display: flex;
        flex-direction: column;
    }

    section#cabinet .content .block .company-info .-photo {
        margin-right: 0;
        margin-bottom: 12px;
    }

    section#cabinet .content .block .company-info .company-info-cols {
        grid-template-columns: 1fr;
    }

    section#cabinet .content .block .company-info .company-info-col .input {
        width: 100%;
        margin-bottom: 0;
    }

    section#cabinet .content .block .company-info .company-info-row-full .input {
        width: 100%;
    }

    /* Информация о компании и реквизиты: на мобильной все поля по вертикали (одно в строку) */
    section#cabinet .content .block .company-info .inputs .input {
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }
    section#cabinet .content .block .company-info .inputs .input:nth-child(1),
    section#cabinet .content .block .company-info .inputs .input:nth-child(2) {
        margin-right: 0;
    }
    section#cabinet .content .block .company-info .inputs .input:last-child {
        margin-bottom: 0;
    }

    section#cabinet .content .cabinet-bank-two-cols {
        grid-template-columns: 1fr;
    }

    section#cabinet .bank-accounts-info .bank-account-item .inputs.bank-account-readonly-layout {
        gap: 12px;
    }
    section#cabinet .bank-accounts-info .bank-account-item .inputs.bank-account-readonly-layout > .input,
    section#cabinet .bank-accounts-info .bank-account-item .bank-acc-row-bik-vat .input {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
    }
    section#cabinet .bank-accounts-info .bank-account-item .bank-acc-row-bik-vat {
        grid-template-columns: 1fr;
    }

    /* Банковская карта: на мобильной поля во всю ширину */
    section#cabinet .bank-card-info .inputs .input {
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }
    section#cabinet .bank-card-info .inputs .input:last-child {
        margin-bottom: 0;
    }

    /* Размер шрифта для описания в блоке "нет карты" */
    section#cabinet .bank-card-info .no-card .description {
        font-size: 12px;
    }

    /* Тип карты: на мобильной показываем select вместо бейджиков */
    .modal.bank-card-edit .nav-filter.desktop-card-type {
        display: none !important;
    }
    
    .modal.bank-card-edit .mobile-card-type-select {
        display: block !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .modal.bank-card-edit .mobile-card-type-select select,
    .modal.bank-card-edit .mobile-card-type-select select.mobile-select,
    .modal.bank-card-edit .mobile-card-type-select #bank_card_cardType {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Ограничиваем ширину выпадающего списка */
    .modal.bank-card-edit .bank-card-type-row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .modal.bank-card-edit .bank-card-type-row .input-inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Кнопки «Добавить карту», «Редактировать карту», «Добавить реквизиты»: на мобильной только иконка */
    section#cabinet .cabinet-btn-icon-mobile .cabinet-btn-label {
        display: none !important;
    }
    section#cabinet .cabinet-btn-icon-mobile .cabinet-btn-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 1.5em;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1;
    }
    section#cabinet .cabinet-btn-icon-mobile .cabinet-btn-icon-edit svg {
        display: block;
    }

    .modals .toggle p {
        font-size: var(--text-small);
    }

    .modals .--small-tooltip p {
        max-width: 300px;
        font-size: 13px !important;
    }

    .air-datepicker {
        width: 300px;
        --adp-day-cell-width: 38px;
        --adp-day-cell-height: 30px;
        border-radius: 12px;
    }

    section .content .block {
        padding: 20px;
    }

    .select .-base .-title {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 240px;
    }

    section#transport .content .block .photo-block {
        width: 100px;
        height: 100px;
    }

    section#transport .save .text,
    section#drivers .save .text {
        font-size: 13px;
        width: 100%;
        margin-bottom: 15px;
    }

    section .breadcrumb .btn {
        height: 45px;
        font-size: 14px;
        padding: 10px 15px;
    }

    section#transport .content.list .block,
    section#users .content .block.driver {
        height: 80px;
        justify-content: start;
        padding: 15px;
        position: relative;
    }

    section#transport .content.list .block .item {
        font-size: 14px !important;
    }

    section#transport .content.list .block .action .link {
        position: absolute;
        right: 20px;
        top: 29px;
        font-size: 14px;
    }

    section .content .block {
        border-radius: 12px;
    }

    section#transport .save,
    section#drivers .save {
        padding: 20px;
        border-radius: 12px;
    }

    section#transport .save .btn,
    section#drivers .save .btn {
        height: 45px;
        font-size: 14px;
        padding: 10px 15px;
        width: 100%;
    }

    .modals .modal .-main .-drop-shadow {
        display: none !important;
    }

    .modals.right .modal {
        transform: translateX(0px) translateY(50%) !important;
    }

    .modals.right .modal.show {
        display: flex;
        transform: translateX(0px) translateY(0) !important;
    }

    .photo-block.action svg {
        height: 35px;
        width: 35px;
    }

    section#transport .content .block .photo-block.action.warning::before {
        transform: translateY(-22px) scale(.5) !important;
    }

    section#transport .content .block .photo-block.action.warning label {
        transform: translateY(8px);
    }

    .photo-block.action p {
        transform: translateY(30px);
        font-size: 10px;
    }

    /* Мобильные стили для блоков фото водителей */
    .drivers-photo-blocks .photo-block {
        width: calc(50% - 8px) !important;
        height: 120px !important;
    }

    .drivers-photo-blocks {
        gap: 8px !important;
        flex-wrap: wrap;
    }

    section#transport .content.list .block .action .added img,
    section#users .content .block.driver .action .added img {
        display: none;
    }

    section#transport .content.list .block .action .added,
    section#users .content .block.driver .action .added {
        padding: 0;
        margin: 0;
        position: absolute;
        left: 63px;
    }

    section#transport .content.list .block .action .added::before,
    section#users .content .block.driver .action .added::before,
    section#transport .content.list .block .action .added::after,
    section#users .content .block.driver .action .added::after {
        display: none;
    }

    section#transport .content.list .block .item p,
    section#users .content .block.accordion:last-child .block.driver .item .name {
        transform: translateY(-19px);
    }

    section#users .content .block.accordion:first-child .block.driver .item .name {
        transform: translateY(-13px);
    }

    section#transport .content.list .block .action .-status,
    section#users .content .block.driver .action .-status {
        position: absolute;
        left: 63px;
        padding: 0;
        background: none !important;
        bottom: 8px;
    }

    section#transport .content.list .block .action .added,
    section#users .content .block.driver .action .added {
        width: 200px;
    }

    .modal.user-info .-main .transport-info {
        font-size: 14px;
    }

    .accordion .-acc-header .btn {
        padding: 5px 10px;
        font-size: 12px;
        height: 40px;
    }

    section#users .block.accordion .-acc-header .title {
        margin-right: 10px;
    }

    section#users .block.accordion .-acc-body .added {
        padding-right: 0 !important;
        justify-content: start !important;
    }

    section#users .content .block.driver {
        justify-content: space-between;
    }

    .btn {
        font-size: 14px;
        border-radius: 16px;
        padding: 10px 15px;
        height: 51px;
    }

    section#users .content .block.driver .action .-status[data-id="0"],
    section#users .content .block.driver .action .-status[data-id="1"] {
        background-color: var(--white) !important;
    }

    section#users .content .block.driver .action .-status[data-id="2"] {
        color: var(--light-text) !important;
    }

    section#transport .content.list .block .item,
    section#users .content .block.driver .item,
    section#transport .content.list .block .added,
    section#users .content .block.driver .added,
    section#transport .content.list .block .action div,
    section#users .content .block.driver .action div,
    .modal.add-driver .transport,
    .modal.add-transport .driver,
    .modal.add-driver .driver .add-action,
    .modal.add-transport .transport .add-action,
    .modal.add-driver .driver,
    .modal.add-transport .transport {
        font-size: 14px;
    }

    section .breadcrumb .title {
        font-size: 18px;
    }

    section#transport .content.list .block .action .-status[data-id="2"] {
        color: var(--light-text) !important;
    }

    section#transport .content.list .block .action .added[data-driver-id="0"],
    section#transport .content.list .block .action .added[data-driver-id="0"] {
        justify-content: start;
    }

    section#transport .content.list .block .action .added svg,
    section#users .content .block.driver .action .added svg {
        height: 12px;
        width: 12px;
        margin-right: 5px;
    }

    section#users .content .block.driver .item .name {
        width: 120px;
    }

    /* ---- TRANSPORT MOBILE ---- */
    
    /* Мобильная версия транспорта */
    section#transport .desktop-list {
        display: none !important;
    }
    
    section#transport .mobile-list-content {
        display: block !important;
        padding: 0 16px;
        margin: 0;
        box-sizing: border-box;
    }
    
    section#transport .mobile-transport-block {
        background: white;
        border-radius: 12px;
        border: 1px solid #F2F3F4;
        margin-bottom: 12px;
        padding: 16px;
        cursor: pointer;
        transition: box-shadow 0.2s;
    }
    
    section#transport .mobile-transport-block:last-child {
        margin-bottom: 0;
    }
    
    section#transport .mobile-transport-block:active {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    section#transport .mobile-transport-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    
    section#transport .mobile-transport-info {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }
    
    section#transport .mobile-transport-img {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
    }
    
    section#transport .mobile-transport-details {
        flex: 1;
        min-width: 0;
    }
    
    section#transport .mobile-transport-name {
        font-weight: 500;
        color: #3D3C63;
        font-size: 14px;
        margin: 0 0 4px 0;
        line-height: 1.3;
    }
    
    section#transport .mobile-transport-address {
        font-size: 12px;
        color: #7C7B99;
        margin: 0;
        line-height: 1.3;
    }
    
    section#transport .mobile-transport-arrow {
        flex-shrink: 0;
        margin-left: 12px;
    }
    
    section#transport .mobile-transport-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid #F2F3F4;
    }
    
    section#transport .mobile-transport-status {
        flex-shrink: 0;
    }
    
    section#transport .mobile-transport-status .-status {
        display: inline-flex;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        max-width: 100px;
        min-width: 0;
        overflow: hidden;
        width: auto;
    }
    
    /* Оптимизация блока no-transport для мобильной версии */
    section .content .no-transport {
        margin-left: 0 !important;
        padding: 20px 16px;
        height: auto;
        min-height: 60vh;
    }
    
    section .content .no-transport svg {
        width: 100%;
        max-width: 190px;
        height: auto;
        margin-bottom: 24px;
    }
    
    section .content .no-transport .title {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    section .content .no-transport .description {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 24px;
        padding: 0 16px;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1.5;
    }
    
    section .content .no-transport .btn {
        width: 100% !important;
        max-width: 100%;
        padding: 14px 24px;
        font-size: 16px;
    }
    
    section .content.large {
        padding: 20px 16px;
        box-sizing: border-box;
    }
    
    section#transport .mobile-transport-status .-status .marquee {
        overflow: hidden;
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }
    
    section#transport .mobile-transport-status .-status .marquee-inner.js-marquee {
        display: inline-flex !important;
        white-space: nowrap !important;
        animation: marquee-scroll 10s linear infinite;
        animation-play-state: paused;
        will-change: transform;
    }
    
    section#transport .mobile-transport-status .-status .marquee-text {
        display: inline-block !important;
    }
    
    section#transport .mobile-transport-status .-status .marquee-text:last-child {
        padding-left: 15px;
        display: none;
    }
    
    section#transport .mobile-transport-status .-status[data-id="1"] { 
        background: #E8F5E9; 
        color: #2E7D32; 
    } /* Свободен */
    
    section#transport .mobile-transport-status .-status[data-id="2"] { 
        background: #FFF3E0; 
        color: #E65100; 
    } /* В рейсе */
    
    section#transport .mobile-transport-status .-status[data-id="3"] { 
        background: #E3F2FD; 
        color: #1565C0; 
    } /* На погрузке */
    
    section#transport .mobile-transport-status .-status[data-id="10"] {
        background: #f3c7c7;
        color: #ec0d0d;
    } /* Не прошел модерацию */
    
    section#transport .mobile-transport-driver {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
        padding: 6px 12px;
        border-radius: 8px;
        background: #F8F8F9;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    section#transport .mobile-transport-driver:not(.disabled):active {
        background: #F0F0F1;
    }
    
    section#transport .mobile-transport-driver.disabled {
        opacity: 0.5;
        cursor: default;
    }
    
    section#transport .mobile-driver-img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    
    section#transport .mobile-driver-add-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    section#transport .mobile-driver-add-text {
        font-size: 12px;
        color: #8F8CF7;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    section#transport .mobile-transport-driver .marquee {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    
    section#transport .mobile-transport-driver .marquee-inner.js-marquee {
        display: inline-flex !important;
        white-space: nowrap !important;
        animation: marquee-scroll 10s linear infinite;
        animation-play-state: paused;
        will-change: transform;
    }
    
    section#transport .mobile-transport-driver .marquee-text {
        display: inline-block !important;
    }
    
    section#transport .mobile-transport-driver .marquee-text:last-child {
        padding-left: 15px;
        display: none;
    }
    
    /* ---- INVOICES & УПД MOBILE ---- */
    
    /* Мобильная версия счетов и списка УПД */
    section#invoices .desktop-list,
    section#upd .desktop-list {
        display: none !important;
    }
    
    section#invoices .mobile-list-content,
    section#upd .mobile-list-content {
        display: block !important;
        padding: 0 16px;
    }
    
    section#invoices .mobile-invoice-block,
    section#upd .mobile-invoice-block {
        background: #FFFFFF;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    section#invoices .mobile-invoice-main,
    section#upd .mobile-invoice-main {
        display: block;
        margin-bottom: 12px;
    }
    
    section#invoices .mobile-invoice-info,
    section#upd .mobile-invoice-info {
        flex: 1;
        min-width: 0;
    }
    
    section#invoices .mobile-invoice-header,
    section#upd .mobile-invoice-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }
    
    section#invoices .mobile-invoice-id,
    section#upd .mobile-invoice-id {
        font-family: monospace;
        font-weight: 600;
        font-size: 14px;
        color: #3D3C63;
    }
    
    section#invoices .mobile-invoice-refund,
    section#upd .mobile-invoice-refund {
        margin-bottom: 4px;
    }
    
    section#invoices .mobile-invoice-refund .refund,
    section#upd .mobile-invoice-refund .refund {
        color: #dc3545;
        font-size: 12px;
    }
    
    section#invoices .mobile-invoice-system,
    section#upd .mobile-invoice-system {
        margin-bottom: 4px;
        font-size: 12px;
    }
    
    section#invoices .mobile-invoice-dates,
    section#upd .mobile-invoice-dates {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11px;
        color: #7C7B99;
    }
    
    section#invoices .mobile-invoice-date,
    section#upd .mobile-invoice-date {
        display: block;
    }
    
    section#invoices .mobile-invoice-link,
    section#upd .mobile-invoice-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        text-decoration: none;
    }

    section#invoices .mobile-invoice-footer-actions,
    section#upd .mobile-invoice-footer-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
    }

    section#invoices .mobile-invoice-footer-actions .lk-download-circle-link,
    section#upd .mobile-invoice-footer-actions .lk-download-circle-link {
        flex-shrink: 0;
    }
    
    section#invoices .mobile-invoice-footer,
    section#upd .mobile-invoice-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid #F2F3F4;
    }

    section#invoices .mobile-invoice-footer-meta,
    section#upd .mobile-invoice-footer-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    
    section#invoices .mobile-invoice-status,
    section#upd .mobile-invoice-status {
        flex-shrink: 0;
    }
    
    section#invoices .mobile-invoice-status .-status,
    section#upd .mobile-invoice-status .-status {
        display: inline-flex;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        max-width: 100px;
        min-width: 0;
        overflow: hidden;
        width: auto;
    }
    
    section#invoices .mobile-invoice-status .-status .marquee,
    section#upd .mobile-invoice-status .-status .marquee {
        overflow: hidden;
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }
    
    section#invoices .mobile-invoice-status .-status .marquee-inner.js-marquee,
    section#upd .mobile-invoice-status .-status .marquee-inner.js-marquee {
        display: inline-flex !important;
        white-space: nowrap !important;
        animation: marquee-scroll 10s linear infinite;
        animation-play-state: paused;
        will-change: transform;
    }
    
    section#invoices .mobile-invoice-status .-status .marquee-text,
    section#upd .mobile-invoice-status .-status .marquee-text {
        display: inline-block !important;
    }
    
    section#invoices .mobile-invoice-status .-status .marquee-text:last-child,
    section#upd .mobile-invoice-status .-status .marquee-text:last-child {
        padding-left: 15px;
        display: none;
    }
    
    section#invoices .mobile-invoice-amount-footer,
    section#upd .mobile-invoice-amount-footer {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    section#invoices .mobile-invoice-amount-footer .mobile-invoice-amount,
    section#upd .mobile-invoice-amount-footer .mobile-invoice-amount {
        font-weight: 600;
        font-size: 16px;
        color: #2c5aa0;
    }
    
    /* Пагинация для транспорта */
    section#transport .pagination-wrapper {
        margin-top: 24px;
        padding: 0;
        margin-bottom: 24px;
        display: flex;
        justify-content: center;
    }
    
    /* Мобильная пагинация в стиле изображения - компактная с тремя кнопками */
    section#transport .pagination-wrapper .pagination,
    section#invoices .pagination-wrapper .pagination,
    .pagination-wrapper .pagination {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #F5F4FF;
        padding: 8px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(143, 140, 247, 0.15);
        list-style: none;
        margin: 0;
        width: auto;
        min-width: auto;
    }
    
    section#transport .pagination-wrapper .pagination .page-item,
    section#invoices .pagination-wrapper .pagination .page-item,
    .pagination-wrapper .pagination .page-item {
        margin: 0;
    }
    
    section#transport .pagination-wrapper .pagination .page-item .page-link,
    section#invoices .pagination-wrapper .pagination .page-item .page-link,
    .pagination-wrapper .pagination .page-item .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #E0DDFF;
        background: #FFFFFF;
        color: #8F8CF7;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s;
        cursor: pointer;
    }
    
    section#transport .pagination-wrapper .pagination .page-item.active .page-link,
    section#invoices .pagination-wrapper .pagination .page-item.active .page-link,
    .pagination-wrapper .pagination .page-item.active .page-link,
    section#transport .pagination-wrapper .pagination .page-item.current .page-link,
    section#invoices .pagination-wrapper .pagination .page-item.current .page-link,
    .pagination-wrapper .pagination .page-item.current .page-link {
        background: #8F8CF7 !important;
        color: #FFFFFF !important;
        border-color: #8F8CF7 !important;
    }
    
    section#transport .pagination-wrapper .pagination .page-item:not(.active) .page-link:hover,
    section#invoices .pagination-wrapper .pagination .page-item:not(.active) .page-link:hover,
    .pagination-wrapper .pagination .page-item:not(.active) .page-link:hover {
        background: #F0EEFF;
        border-color: #D0CCFF;
    }
    
    section#transport .pagination-wrapper .pagination .page-item.disabled .page-link,
    section#invoices .pagination-wrapper .pagination .page-item.disabled .page-link,
    .pagination-wrapper .pagination .page-item.disabled .page-link {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    /* Скрываем все страницы кроме активной, показываем только стрелки и активную страницу */
    /* Используем более специфичные селекторы для надежности */
    section#transport .pagination-wrapper .pagination > .page-item:not(.active):not(.current):not(.prev):not(.next):not(.first):not(.last),
    section#invoices .pagination-wrapper .pagination > .page-item:not(.active):not(.current):not(.prev):not(.next):not(.first):not(.last),
    .pagination-wrapper .pagination > .page-item:not(.active):not(.current):not(.prev):not(.next):not(.first):not(.last) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    /* Скрываем first и last, если они есть */
    section#transport .pagination-wrapper .pagination > .page-item.first,
    section#transport .pagination-wrapper .pagination > .page-item.last,
    section#invoices .pagination-wrapper .pagination > .page-item.first,
    section#invoices .pagination-wrapper .pagination > .page-item.last,
    .pagination-wrapper .pagination > .page-item.first,
    .pagination-wrapper .pagination > .page-item.last {
        display: none !important;
    }
    
    /* Убеждаемся, что показываются только нужные элементы */
    section#transport .pagination-wrapper .pagination > .page-item.prev,
    section#transport .pagination-wrapper .pagination > .page-item.next,
    section#transport .pagination-wrapper .pagination > .page-item.active,
    section#transport .pagination-wrapper .pagination > .page-item.current,
    section#invoices .pagination-wrapper .pagination > .page-item.prev,
    section#invoices .pagination-wrapper .pagination > .page-item.next,
    section#invoices .pagination-wrapper .pagination > .page-item.active,
    section#invoices .pagination-wrapper .pagination > .page-item.current,
    .pagination-wrapper .pagination > .page-item.prev,
    .pagination-wrapper .pagination > .page-item.next,
    .pagination-wrapper .pagination > .page-item.active,
    .pagination-wrapper .pagination > .page-item.current {
        display: list-item !important;
    }
    
    /* Стрелки - стилизуем как кнопки с иконками */
    section#transport .pagination-wrapper .pagination > .page-item.prev .page-link,
    section#transport .pagination-wrapper .pagination > .page-item.next .page-link,
    section#invoices .pagination-wrapper .pagination > .page-item.prev .page-link,
    section#invoices .pagination-wrapper .pagination > .page-item.next .page-link,
    .pagination-wrapper .pagination > .page-item.prev .page-link,
    .pagination-wrapper .pagination > .page-item.next .page-link {
        padding: 0 !important;
        width: 40px !important;
        min-width: 40px !important;
        font-size: 0 !important;
        position: relative;
        text-indent: -9999px;
        overflow: hidden;
    }
    
    /* Иконки стрелок (chevron) через псевдоэлементы */
    section#transport .pagination-wrapper .pagination > .page-item.prev .page-link::before,
    section#transport .pagination-wrapper .pagination > .page-item.next .page-link::after,
    .pagination-wrapper .pagination > .page-item.prev .page-link::before,
    .pagination-wrapper .pagination > .page-item.next .page-link::after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border: 2px solid #8F8CF7;
        border-top: none;
        border-right: none;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -4px;
    }
    
    /* Стрелка влево (повернута на 45 градусов) */
    section#transport .pagination-wrapper .pagination > .page-item.prev .page-link::before,
    .pagination-wrapper .pagination > .page-item.prev .page-link::before {
        transform: rotate(45deg);
    }
    
    /* Стрелка вправо (повернута на -135 градусов) */
    section#transport .pagination-wrapper .pagination > .page-item.next .page-link::after,
    .pagination-wrapper .pagination > .page-item.next .page-link::after {
        transform: rotate(-135deg);
    }
    
    /* Скрываем текст в стрелках, если он есть */
    section#transport .pagination-wrapper .pagination .page-item.prev .page-link span,
    section#transport .pagination-wrapper .pagination .page-item.next .page-link span,
    .pagination-wrapper .pagination .page-item.prev .page-link span,
    .pagination-wrapper .pagination .page-item.next .page-link span,
    section#transport .pagination-wrapper .pagination .page-item.prev .page-link,
    section#transport .pagination-wrapper .pagination .page-item.next .page-link,
    .pagination-wrapper .pagination .page-item.prev .page-link,
    .pagination-wrapper .pagination .page-item.next .page-link {
        font-size: 0 !important;
    }
    
    /* Скрываем весь текст в стрелках */
    section#transport .pagination-wrapper .pagination .page-item.prev .page-link span,
    section#transport .pagination-wrapper .pagination .page-item.next .page-link span,
    .pagination-wrapper .pagination .page-item.prev .page-link span,
    .pagination-wrapper .pagination .page-item.next .page-link span {
        display: none !important;
    }
    
    /* Скрываем текст в активной странице, если он есть внутри span */
    section#transport .pagination-wrapper .pagination .page-item.active .page-link span,
    section#transport .pagination-wrapper .pagination .page-item.current .page-link span,
    .pagination-wrapper .pagination .page-item.active .page-link span,
    .pagination-wrapper .pagination .page-item.current .page-link span {
        display: inline-block !important;
    }

    section .content .-table-content .-text:last-child {
        margin-bottom: 0;
    }

    body:not(#webapp)::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--white);
        opacity: 1;
        transition: opacity var(--transition), visibility var(--transition);
        visibility: visible;
        z-index: 99977;
    }

    body:not(#webapp).show::before {
        opacity: 0;
        visibility: hidden;
    }

    .global-loader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99988;
        height: 100%;
        width: 100%;
    }

    .global-loader .spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid var(--blue-pastel);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .modals .modal .-main .-block-text span {
        margin-bottom: 0;
    }

    .modals .modal .-main .-block-text {
        padding: 10px 15px;
    }

    .modals .modal .-main .-table-content li {
        font-size: 16px;
    }
}

@media (max-width: 425px) {

    /* ---- ANALITICS ---- */
    
    #analitics .nav-info-blocks .info-block {
        padding: 12px;
    }
    
    #analitics .nav-info-blocks .info-block span {
        font-size: 16px;
    }
    
    #analitics .nav-info-blocks .info-block p {
        font-size: 12px;
    }

    header .menu .item .link p,
    header .menu .user .info {
        font-size: 14px;
        left: 50px;
    }

    header .menu .item .link svg {
        height: 25px;
        width: 25px;
        left: 10px;
    }

    header .menu .item[data-menu-id]::before {
        background-size: 10px;
    }

    header .menu .item {
        height: 50px;
    }

    header .menu .settings {
        top: 335px;
    }

    header .menu:not(.more) .nav {
        border-bottom: 0;
        z-index: 2;
    }

    header .menu:not(.more) .nav::before {
        height: 100%;
    }

    header .menu .item .link .notification {
        font-size: 8px;
        height: 16px;
        width: 16px;
    }

    header .menu .item .link .notification {
        left: 25px;
    }

    header .menu.more {
        left: 60px;
    }

    .modals .modal .-header {
        font-size: 16px;
    }

    .modals .modal .-header .-status {
        font-size: 10px;
        padding: 5px 8px;
    }

    section.scroll.-bottom::after {
        display: none !important;
    }

    section::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 30px !important;
        background-color: var(--white) !important;
        z-index: 2 !important;
        opacity: 1 !important;
        transition: none !important;
    }

    section#transport .content.list .block .action .added,
    section#users .content .block.driver .action .added {
        width: 120px;
    }

    section#transport:not(.t-create) .breadcrumb {
        flex-direction: column;
        align-items: start;
        height: 145px;
    }

    section#transport:not(.t-create) .breadcrumb {
        padding-top: 80px;
    }

    section#transport:not(.t-create) .breadcrumb .btn {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }

    input,
    textarea,
    .select,
    .input label,
    .select label,
    .select .-base .-title {
        font-size: 14px;
    }

    input,
    textarea,
    .select {
        min-height: 55px;
        height: 55px;
    }

    .input label,
    .select label {
        top: 16px;
    }

    .input input:focus~label,
    .input input:valid~label,
    .input textarea:focus~label,
    .input textarea:valid~label,
    .input input:disabled~label,
    .input textarea:disabled~label,
    .input input:read-only~label {
        font-size: 10px;
    }

    .input label.warning,
    .select label.warning,
    .select.norequired::before,
    .input.norequired::before {
        right: 12px !important;
        top: -8px !important;
        font-size: 10px !important;
    }

    section#transport .save .text,
    section#drivers .save .text {
        font-size: 12px;
    }

    .input.datepicker .-icon-date,
    .input.password .-show-password,
    .input.datepicker .-icon-date svg,
    .input.password .-show-password svg {
        height: 20px;
        width: 20px;
    }

    .input.datepicker .-icon-date,
    .input.password .-show-password {
        top: 14px;
    }

    header .menu .user img {
        height: 40px;
        width: 40px;
    }

    header .menu .user .info {
        left: 50px !important;
    }

    .modals .modal.login .-main {
        padding-bottom: 20px !important;
    }

    .modals .modal .-action {
        margin-top: 0;
    }

    .modal.add-transport .transport .info p {
        width: 175px;
    }

    .modals .modal .-main .-block-text span,
    .modals .modal .-main .-table-content .-text,
    .modals .modal .-main .-table-content li,
    .modals .modal .-main .-subject,
    .modals .modal .-main .-block-text p,
    table.dataTable,
    table.lk-list-table {
        font-size: 14px;
    }

    table.dataTable td .-status,
    table.dataTable td .price,
    table.lk-list-table td .-status,
    table.lk-list-table td .amount {
        padding: 8px 12px;
        max-width: 110px;
    }

    .nav-filter .-search .input label {
        top: 9px;
    }

    .select.selected .-base .-title {
        font-size: 12px !important;
    }

    .toggle p {
        font-size: 14px !important;
    }

    .accordion.open .-acc-body {
        padding-top: 15px;
    }

    section .content .block.driver-cabinet[data-content-id="0"],
    section .content .block.driver-cabinet[data-content-id="1"] {
        margin-bottom: 0;
    }

    /* .modals .modal .-action .-subject-alt.small {
        display: none;
    } */

    /* .modal.add-transport .transport .name {
        width: 150px;
    }

    .modal.add-driver .driver .add-action, .modal.add-transport .transport .add-action {
        width: 90px;
    } */

    body.chats {
        padding: 0;
    }

    body.chats header {
        margin-top: 20px;
    }

    body.chats section .breadcrumb {
        padding-top: 120px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* ---- SUPPORT CHATS ---- */
    
    body.support-chats {
        padding: 0;
    }

    body.support-chats header {
        margin-top: 20px;
    }

    body.support-chats section .breadcrumb {
        padding-top: 120px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #support-chats .content {
        flex-direction: column;
        height: calc(100dvh - 130px);
    }

    #support-chats .content .chats-list {
        width: 100%;
        padding: 20px;
        padding-top: 5px;
        max-height: 40%;
        overflow-y: auto;
        border-bottom: 1px solid #EFEFEF;
    }

    #support-chats .content .chats-list .input {
        margin-bottom: 15px;
    }

    #support-chats .content .chats-list .input svg {
        height: 18px;
        width: 18px;
    }

    #support-chats .content .chats-list .list .item {
        padding: 15px 0;
        margin-bottom: 0;
        border-bottom: 1px solid #EFEFEF;
        cursor: pointer;
    }

    #support-chats .content .chats-list .list .item:last-child {
        border-bottom: 0;
    }

    #support-chats .content .chats-list .list .item.active {
        background-color: var(--blue-pastel-light);
        border-radius: 8px;
        padding: 15px 10px;
    }

    #support-chats .content .chats-list .list .item img {
        height: 45px;
        width: 45px;
        min-width: 45px;
        margin-right: 12px;
    }

    #support-chats .content .chats-list .list .item .info {
        flex: 1;
        position: relative;
    }

    #support-chats .content .chats-list .list .item .info .name {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 5px;
        width: calc(100% - 80px);
    }

    #support-chats .content .chats-list .list .item .info .pre-msg {
        font-size: 14px;
        color: var(--light-text);
        width: calc(100% - 80px);
    }

    #support-chats .content .chats-list .list .item .info .date {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        color: var(--light-text);
    }

    #support-chats .content .chats-list .list .item .info .new-msg-count {
        position: absolute;
        top: 25px;
        right: 0;
        background: var(--orange);
        color: white;
        border-radius: 50%;
        font-size: 10px;
        height: 18px;
        width: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #support-chats .content .main {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    #support-chats .content .main .no-select {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        color: var(--light-text);
        padding: 20px;
        font-size: 16px;
    }

    #support-chats .content .main .c-overlay {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #support-chats .content .main .c-overlay .c-header {
        padding: 15px 20px;
        border-bottom: 1px solid #EFEFEF;
        background: var(--white);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #support-chats .content .main .c-overlay .c-header img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }

    #support-chats .content .main .c-overlay .c-header .-info {
        flex: 1;
    }

    #support-chats .content .main .c-overlay .c-header .-name {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 2px;
    }

    #support-chats .content .main .c-overlay .c-header .chat-subject {
        font-size: 14px;
        color: var(--light-text);
    }

    #support-chats .content .main .c-overlay .c-header .c-header-status {
        font-size: 12px;
        color: var(--green);
        background: var(--green-light);
        padding: 4px 8px;
        border-radius: 12px;
    }

    #support-chats .content .main .c-overlay .c-body {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages {
        flex: 1;
        overflow-y: auto;
        padding: 15px 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #F8F9FA;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg {
        max-width: 80%;
        border-radius: 16px;
        position: relative;
        word-wrap: break-word;
        display: flex;
        flex-direction: column;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg:not(.left) {
        align-self: flex-end;
        background: #FFFFFF;
        border-bottom-right-radius: 4px;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg.left {
        align-self: flex-start;
        background: #FFFFFF;
        border-bottom-left-radius: 4px;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg .c-msg-content {
        padding: 10px 14px;
        background: var(--blue-pastel);
        border-radius: 16px;
        border-bottom-right-radius: 4px;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg.left .c-msg-content {
        background: #F0F0F5;
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 4px;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg .c-msg-content p {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        color: white;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg.left .c-msg-content p {
        color: var(--dark-text);
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg .c-msg-time {
        font-size: 11px;
        opacity: 0.6;
        margin-top: 4px;
        padding: 0 14px 8px 14px;
        display: block;
        position: static;
        background-color: transparent;
        color: var(--light-text);
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg:not(.left) .c-msg-time {
        text-align: right;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages .c-msg.left .c-msg-time {
        text-align: left;
    }

    #support-chats .content .main .c-overlay .c-actions {
        padding: 12px 15px;
        border-top: 1px solid #EFEFEF;
        background: #FFFFFF;
    }

    #support-chats .content .main .c-overlay .c-actions .input {
        position: relative;
        display: flex;
        align-items: flex-end;
        gap: 8px;
    }

    #support-chats .content .main .c-overlay .c-actions .input textarea {
        flex: 1;
        min-height: 44px;
        max-height: 120px;
        padding: 12px 50px 12px 16px;
        border: 1px solid #E5E5E5;
        border-radius: 22px;
        resize: none;
        font-size: 15px;
        line-height: 1.4;
        background: #F8F9FA;
    }

    #support-chats .content .main .c-overlay .c-actions .input .c-send {
        position: absolute;
        right: 6px;
        bottom: 6px;
        width: 32px;
        height: 32px;
        background: var(--blue-pastel);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    #support-chats .content .main .c-overlay .c-actions .input .c-send:hover {
        background: var(--blue);
    }

    #support-chats .content .main .c-overlay .c-actions .input .c-send svg {
        width: 18px;
        height: 18px;
    }

    #support-chats .content .main .c-overlay .c-actions .input .c-send svg path {
        fill: white;
    }

    /* Скроллбар для сообщений */
    #support-chats .content .main .c-overlay .c-body .c-messages::-webkit-scrollbar {
        width: 4px;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages::-webkit-scrollbar-track {
        background: transparent;
    }

    #support-chats .content .main .c-overlay .c-body .c-messages::-webkit-scrollbar-thumb {
        background: var(--light-text);
        border-radius: 2px;
    }

    /* Скроллбар для списка чатов */
    #support-chats .content .chats-list::-webkit-scrollbar {
        width: 4px;
    }

    #support-chats .content .chats-list::-webkit-scrollbar-track {
        background: transparent;
    }

    #support-chats .content .chats-list::-webkit-scrollbar-thumb {
        background: var(--light-text);
        border-radius: 2px;
    }

    /* Модальное окно создания чата поддержки */
    .modals .modal.create-support-chat {
        width: 100% !important;
        max-height: 90%;
    }

    .modals .modal.create-support-chat .-main {
        padding: 20px;
        max-height: calc(90vh - 160px);
        overflow-y: auto;
    }

    .modals .modal.create-support-chat .input {
        margin-bottom: 20px;
    }

    .modals .modal.create-support-chat .input textarea {
        min-height: 120px;
    }

    /* Кнопка "Назад" в заголовке чата */
    #support-chats .content .main .c-overlay .c-header .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--white-gray);
        transition: all 0.2s ease;
    }

    #support-chats .content .main .c-overlay .c-header .back-btn:hover {
        background: var(--white-gray-dark);
    }

    #chats .content .main {
        display: none;
    }

    #chats .content .chats-list {
        width: 100%;
        padding: 20px;
        padding-top: 5px;
    }

    #chats .content .chats-list .input svg {
        height: 18px;
    }

    #chats .content .chats-list .list .item img {
        height: 45px;
        width: 45px;
        min-width: 45px;
    }

    #chats .content .chats-list .list .item .info .name {
        width: 180px;
        font-size: 16px;
    }

    #chats .content .chats-list .list .item .info .pre-msg {
        font-size: 14px;
    }

    #chats .content .chats-list .list .item {
        padding: 0;
        margin-bottom: 0;
        border-bottom: 1px solid #EFEFEF;
    }

    #chats .content .chats-list .list .item:last-child {
        border-bottom: 0;
    }

    #chats .content .chats-list .list .item.active,
    #chats .content .chats-list .list .item:hover {
        background-color: var(--white);
    }

    #chats .content .chats-list .list .item .date {
        top: 20px;
        font-size: 10px;
    }

    #chats .content .chats-list .list .item .new-msg-count {
        font-size: 10px;
        height: 16px;
        width: 16px;
    }

    #chats .content .main {
        width: 100%;
    }

    #chats .content .main .c-overlay .c-header {
        height: auto;
        padding: 10px;
    }

    #chats .content .main .c-overlay .c-header img {
        height: 45px;
        width: 45px;
    }

    #chats .content .main .c-overlay .c-header .-name {
        font-size: 16px;
    }

    #chats .content .main .c-overlay .c-header span,
    #chats .content .main .c-overlay .c-header .c-header-status {
        font-size: 14px;
    }

    #chats .content .main .c-overlay .c-body .c-messages .c-absolute-date p {
        padding: 4px 8px;
        font-size: 12px;
    }

    #chats .content .main .c-overlay .c-actions .input textarea {
        padding-right: 80px;
        max-height: 75px !important;
        min-height: 75px !important;
    }

    #chats .content .main .c-overlay .c-body .c-messages {
        overflow-y: auto;
        /* justify-content: flex-start; */
        padding: 0;
    }

    #chats .content .main .c-overlay .c-actions .c-file {
        left: 15px;
    }

    @-moz-document url-prefix() {
        #chats .content .main .c-overlay .c-body .c-messages {
            scrollbar-width: 0;
            scrollbar-color: var(--blue-pastel) var(--white);
        }
    }

    #chats .content .main .c-overlay .c-body .c-messages::-webkit-scrollbar {
        width: 0px;
    }

    #chats .content .main .c-overlay .c-body .c-messages .c-msg {
        font-size: 14px;
        overflow: visible;
        max-width: 85%;
        padding: 10px 12px;
        margin-bottom: 10px;
    }

    #chats .content .main .c-overlay .c-body .c-messages .c-msg .c-msg-time {
        font-size: 9px;
        opacity: 0.6;
        margin-top: 3px;
    }

    /* Скрываем старые span элементы времени */
    #chats .content .main .c-overlay .c-body .c-messages .c-msg span {
        display: none !important;
    }

    #chats .content .main .c-overlay .c-body {
        padding: 0 10px;
        height: calc(100% - 190px);
    }

    #chats .content .main .c-overlay .c-actions {
        height: 100px;
    }

    #chats .content {
        height: calc(100dvh - 100px - 30px);
    }

    #chats .content .main {
        border-radius: 10px;
    }

    #chats .content .main .c-overlay .c-body .c-messages .c-msg.file .c-msg-file-info p:first-child {
        font-size: 14px;
    }

    #chats .content .main .c-overlay .c-body .c-messages .c-msg.file .c-msg-file-info p:last-child {
        font-size: 12px;
    }

    #chats .content .main .c-overlay .c-body .c-messages .c-msg.file .c-msg-file-icon {
        height: 35px;
        width: 28px;
    }

    #chats .content .chats-list .input {
        margin-bottom: 0;
    }

    /* Кнопка "Назад" в заголовке чата */
    #chats .content .main .c-overlay .c-header .back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--white-gray);
        transition: all 0.2s ease;
        margin-right: 10px;
    }

    #chats .content .main .c-overlay .c-header .back-btn:hover {
        background: var(--white-gray-dark);
    }

    #chats .content .main .c-overlay .c-header .back-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Полноэкранный режим для мобильного чата */
    #chats .content .main {
        position: fixed;
        top: 100px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: white;
        border-radius: 0;
        height: calc(100vh - 100px);
        width: 100vw;
    }

    #chats .content .main .c-overlay {
        height: calc(100vh - 100px);
    }

    #chats .content .main .c-overlay .c-body {
        height: calc(100vh - 100px - 160px);
    }

    /* Улучшенная адаптация списка чатов */
    #chats .content .chats-list {
        height: calc(100vh - 100px - 30px);
        overflow-y: auto;
    }

    #chats .content .chats-list .list {
        padding-bottom: 20px;
    }
}    
/* Мобильный datepicker для форм водителей */
    .air-datepicker.mobile-datepicker-drivers {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10000 !important; /* Увеличиваем z-index чтобы календарь был поверх всего */
        max-width: 90vw !important;
        max-height: 80vh !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
        background: white !important; /* Добавляем белый фон */
    }

    .mobile-datepicker-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9999; /* Overlay должен быть ниже календаря */
    }