html, body {

    font-family: Montserrat, Helvetica, "sans-serif";

}

body {
    background-color: #f5f8fa;
}

i {
    color: unset;
}

.page-loader {

    display: flex;
    justify-content: center;
    align-items: center;
    
}

.table-container {
    overflow-x: auto;
    width: 100%;
}

tr.row-disabled {
    background-color: #f8f8f8!important;
    opacity: 1;
}

tr.row-disabled td {
    color: #666;
}

tr.bulk-selected {
    background-color: #f5f8fa !important;
}

tr.deposit{
    color: #009ef7;
}

div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: 1px solid rgb(239 242 245);
}

/* Table totals row */
.table-totals-wrap {
    border-top: 2px solid #e4e6ef;
    background-color: #f8f9fb;
}

.table-totals-inner {
    overflow: hidden;
}

.table-totals-inner .totals-table {
    margin-bottom: 0;
    table-layout: fixed;
}

.table-totals-inner .totals-row td {
    padding: 10px 8px;
    font-size: 13px;
    white-space: nowrap;
    border: none;
}

#ltc_aside_toggle{
    color: #4a4b68;
}

.page-item:hover:not(.active):not(.offset) .page-link {
    color: #009ef7;
}

.page-item.active .page-link,
.page-item.active:hover .page-link {
    color: #fff;
}

.menu-item {
    position: relative;
}


.icon_flag{
    height: 16px !important;
    vertical-align: sub !important;
}


.form-control:disabled, .form-control[readonly], .disabled .ts-control{
    opacity: 0.7!important;
}

.show>.btn.btn-light-primary, .show>.btn.btn-light-primary:focus {
    color: #009ef7!important;
    border-color: #f1faff!important;
    background-color: #f1faff!important;
}

.show>.btn.btn-light-primary i {
    color: #009ef7!important;
}

.show > .btn.btn-light-primary:hover{
    color: #fff !important;
}

.show > .btn.btn-light-primary:hover i {
    color: #fff !important;
}

/* Общее поведение */
.menu-sub-dropdown {
    position: absolute;
    z-index: 999;
    display: none;
}

/* Показываем */
.menu-sub-dropdown.show {
    display: block;
}

/* Позиции */
.ltc-placement-bottom-start {
    top: 100%;
    left: 0;
}

.ltc-placement-bottom-end {
    top: 100%;
    right: 0;
}

.ltc-placement-top-start {
    bottom: 100%;
    left: 0;
}

.menu-sub-dropdown.ltc-fix-left {
    left: 0 !important;
    right: auto !important;
}

.ltc-fix-left {
    left: 0 !important;
    right: auto !important;
}

.ts-control, .ts-wrapper.single.input-active .ts-control {
    background-color: #f5f8fa;
    border-color: #f5f8fa;
    color: #5e6278;
    transition: color .2s ease, background-color .2s ease;
}

.ts-wrapper.multi .ts-control > div, .ts-wrapper.multi .ts-control > div.active {
    background: #009ef7;
    color: #ffffff;
    border: 0 solid #009ef7;
    border-radius: 3px;
}

.toastr-info {
    background-color: #009ef7;
}

#toastr-container>.toastr-info {
    box-shadow: 0 0 7px #009ef7;
}


.toastr-success {
    background-color: #47be7d;
}

#toastr-container>.toastr-success {
    box-shadow: 0 0 7px #47be7d;
}

.toastr-error {
    background-color: #f1416c;
}

#toastr-container>.toastr-error {
    box-shadow: 0 0 7px #f1416c;
}


.badge-light-dark {
    color: #8e959c;
    background-color: #eff2f5;
}

#popover-note {
    position: absolute;
    min-width: 280px;
    max-width: 400px;
    z-index: 9999;
}
#note-textarea {
    max-height: 120px;
    resize: vertical;
}


.note-popover {
    min-width: 250px;
    max-width: 500px;
}

.icon_flag {
    width: 18px;
    height: 12px;
    object-fit: contain;
}

.table-loader {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-loader .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #009ef7;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.daterangepicker .ranges li.active {
    background-color: #009ef7;
}

#filter-date-range{
    opacity: 1 !important;
}

.ts-control, .ts-wrapper.single.input-active .ts-control {
    border-color: #eef2f6;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 992px) {
    #permissions_wrapper .dt-scroll-body {
        overflow-x: hidden !important;
    }

} 

@media (max-width: 768px) {
    .menu-sub-dropdown {
        left: auto;
        right: 0;
        width: 95vw;
    }
    #permissions_wrapper .dt-scroll-body {
        overflow-x: visible !important;
    }

    .table-search {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    .btn.menu-dropdown span:not(.svg-icon) {
        display: none;
    }

    .card-header .position-relative {
        flex-direction: column;
        align-items: stretch;
    }
/*
    #bulk-actions-panel,
    [data-ltc-menu-trigger="click"] {
        margin-top: 0.5rem;
    }
*/
    .card-header .d-flex.align-items-center.position-relative.my-1 {
        width: 100%;
    }

}

.ltc-shake {
    animation: ltc-shake-animation 0.3s ease;
}

@keyframes ltc-shake-animation {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

 .form-check.form-check-solid .switch-status:checked {
    background-color: #47be7d;
}

.form-check.form-check-solid.form-check-primary .switch-status:checked {
    background-color: #009ef7;
}


.dataTables_wrapper .dataTables_length,

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    display: none !important;
}

/* Кастомная пагинация */
#custom-table-pagination {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover {
outline: none;
    outline-offset: inherit;
    background-color: #fbfbfb;
}

select.select:not(.tomselected) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f5f8fa;
    border: 1px solid #f5f8fa;
    color: #5e6278;
    padding: .75rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 0.475rem;
    width: 100%;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235e6278' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    padding-right: 2.5rem;
}

.ts-wrapper {
    position: relative;
}

.ts-wrapper.single .ts-control {
    background-color: #f5f8fa;
    border: 1px solid #f5f8fa;
    color: #5e6278;
    padding: .75rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 0.475rem;

    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.2s ease;
}

/* Активное состояние */
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.focus .ts-control {
    background-color: #eef2f6;

}

/* Дропдаун */
.ts-dropdown {
    position: absolute;
    z-index: 1055;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border-radius: 0.475rem;
    border: 1px solid #e4e6ef;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Контейнер с контентом */
.ts-dropdown-content {
    max-height: 200px;
    overflow-y: auto;
}

.ts-dropdown .active {
    background-color: #009ef7;
    color: #fff;
    transition: color .2s ease, background-color .2s ease;
}

/* Внутренний input */
.ts-wrapper .ts-control input {
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit;
    color: inherit;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}



.ts-wrapper.required::after {
    content: none !important;
}

/* Компактные TomSelect в строках условий */
[data-condition-row] .ts-wrapper {
    cursor: pointer;
}

[data-condition-row] .ts-wrapper.single .ts-control {
    padding: .425rem .75rem;
    font-size: .925rem;
    line-height: 1.5;
    cursor: pointer;
}

[data-condition-row] .ts-wrapper.single .ts-control > .item {
    cursor: pointer;
}

.bg-secondary{
    background-color: #c0c4cf !important;
}

.select-flow:hover{
    background-color: #009ef7!important;
    color: #fff;
}


.ts-dropdown {
    overflow: hidden !important;
}
.ts-dropdown .ts-dropdown-content {
    overflow-y: auto !important;
}

.ts-wrapper.select-phone-code {
    height: 100%;
}

.ts-wrapper.select-phone-code .ts-control {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 100%;
    padding: 0 0.5rem;
    border: none;
    border-radius: 0.475rem;
    min-height: 40px; /* подгони под .form-control */
}

.ts-wrapper.select-phone-code .ts-control input {
    flex: 1 1 auto;
    min-width: 0 !important;
    height: auto;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4;
    border: none !important;
    background: transparent !important;
}


.select-phone-code .ts-dropdown,
.select-phone-code .ts-control {
    width: 50px !important;
    max-width: 50px !important;
}

.flow-dropdown{
    position:absolute;
    z-index:999;
    background:#fff;
    border:1px solid #ccc;
    border-radius:8px;
    margin: -15px -10px;
}

.stat-card {
    border-radius: 1.25rem;
    border: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.25), transparent 55%);
    opacity: 0.9;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.2);
}

.stat-card-value {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    color: #fff;
}

.stat-card-label {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.82);
}

.stat-card-divider {
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 0.75rem;
}

.stat-card-icon {
    position: absolute;
    right: 20px;
    bottom: 18px;
    font-size: 42px;
    color: rgba(255, 255, 255, 0.33);
    opacity: .9;
    pointer-events: none;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.08));
}
.stat-card-icon i {
    font-size: 34px;
    opacity: .55;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.bg-cyan { background-color: #5c6bc0 !important; }

.kpi-table-card {
    border: 0;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.kpi-table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.kpi-row {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px dashed #edf2f7;
    border-radius: 14px;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.kpi-row:last-child {
    border-bottom: none;
}

.kpi-row:not(.kpi-row-head):hover {
    background: #f9fafb;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    transform: translateY(-1px);
}

.kpi-row-head {
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #edf2f7;
}

.kpi-row-head .kpi-col {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #9ca3af;
}

.kpi-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    flex: 0 0 68px;
}

.kpi-row .kpi-col.kpi-col-center {
    justify-content: center !important;
    text-align: center !important;
}

.kpi-row .kpi-col.kpi-col-center > * {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.kpi-row-head .kpi-col.kpi-col-center {
    justify-content: center !important;
}

.kpi-col-name {
    flex: 1 1 0;
    min-width: 80px;
    justify-content: flex-start;
    gap: 0.5rem;
    overflow: hidden;
}

.kpi-col-name .kpi-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-table-flow{
    min-width: 300px;
}

.kpi-col-name-flow{
    flex: 0 1 175px;
}

.kpi-flag-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-flag {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kpi-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f6f9;
    font-weight: 600;
    font-size: 14px;
    color: #009ef7;
    text-transform: uppercase;
    box-shadow: 0 0 6px rgba(0,0,0,.06);
}

.kpi-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #111827;
}

.kpi-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
}

.kpi-value--good {
    color: #16a34a;
}

.kpi-value--bad {
    color: #dc2626;
}

.kpi-value--accent {
    color: #2563eb;
}

.kpi-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    line-height: 1;
}

.kpi-row-head .kpi-col-head {
    justify-content: center;
}

.kpi-sort-btn {
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
}

.kpi-sort-arrow {
    font-size: 0.55rem;
    transition: transform 0.15s ease, color 0.15s ease;
    color: #d1d5db;
}

.kpi-col-head--sorted-asc .kpi-sort-arrow,
.kpi-col-head--sorted-desc .kpi-sort-arrow {
    color: var(--kt-primary);
}

.kpi-col-head--sorted-desc .kpi-sort-arrow {
    transform: rotate(180deg);
}

.kpi-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kpi-table {
    min-width: 620px;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    .kpi-table-scroll::-webkit-scrollbar {
        height: 6px;
    }
    .kpi-table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    .kpi-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12);
        border-radius: 999px;
    }
}

/* Domain zones price matrix — light theme */
#prices-table .sticky-col {
    background: #fff;
}
#prices-table thead .sticky-col {
    background: #f9f9f9;
}
#prices-table tbody tr:hover {
    background-color: #f5f8fa;
}
#prices-table tbody tr:hover .sticky-col {
    background-color: #f5f8fa;
}
.price-cell:hover {
    background-color: #eef3f7 !important;
}

@media (max-width: 768px) {
    /* ЗДЕСЬ БЫЛО ПРАВИЛО НА ВСЕ `.container-fluid` СРАЗУ, и оно ломало
       телефоны на всём сайте:

           display: flex; flex-direction: row !important;
           justify-content: space-between !important;
           align-items: center !important;

       `.container-fluid` в этой теме — это `#kt_content_container`, то есть
       КОНТЕЙНЕР ВСЕГО СОДЕРЖИМОГО СТРАНИЦЫ. Шестнадцать шаблонов из
       шестнадцати. Флекс-строка с `align-items: center` на нём означает, что
       содержимое короткой страницы висит посреди экрана: на /admin/подписки
       карточка высотой 306px болталась в полосе 679px, то есть с пустотой
       под двести пикселей сверху и снизу. Снято на 390px, замерено в
       браузере.

       Второй пострадавший — ТУЛБАР (`layouts/aside.tpl`, строка 121):
       заголовок страницы и переключатель языка. Сначала я записал его как
       «подвал» — неверно, поправляю: это верхняя полоса под шапкой. Он
       объявляет себе `d-flex flex-column flex-lg-row`, то есть «столбиком
       на телефоне, строкой на широком». `flex-direction: row !important`
       отсюда перебивало его собственное правило ровно там, где оно и нужно.

       Поэтому после снятия правила заголовок и флаг на телефоне встают в
       две строки — это НЕ поломка, а то, что просит сама разметка. Захочется
       в одну строку — правьте классы тулбара, а не общее правило.

       ЗАМЫСЕЛ ПРИ ЭТОМ БЫЛ ВЕРНЫЙ, и он виден по соседям ниже:
       `.page-title { flex: 1; max-width: 60% }` и
       `.language-menu { white-space: nowrap }` осмысленны ТОЛЬКО если
       тулбар — строка. То есть автор хотел «заголовок и язык в одну строку
       на телефоне» и добился этого правилом, которое задело весь сайт.

       Поэтому не выбрасываем, а прицеливаем: `.toolbar > .container-fluid`
       — ровно один элемент на странице. `display: flex` ему не нужен, он
       свой `d-flex` объявляет сам. */

    .toolbar > .container-fluid {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap;
    }
    
    .w-lg-500px {
        width: 100% !important; /* Растягиваем контейнер на всю ширину экрана */
        max-width: 400px; /* Максимальная ширина, чтобы не было слишком широко */
        padding: 20px; /* Добавляем немного отступов */
    }

    .flex-center {
        padding-top: 5vh; /* Уменьшаем отступ сверху */
    }


    .page-title {
        flex: 1; /* Разрешаем блоку с хлебными крошками занимать доступное место */
        max-width: 60%; /* Ограничиваем ширину хлебных крошек */
    }

    .language-menu {
        white-space: nowrap; /* Запрещаем перенос языка */
    }


  .dataTables_length,
    #custom-table-info {
        font-size: 0.875rem;
        line-height: 1.2;
    }

    #custom-table-info {
        padding-top: 0.35rem;
    }

    .datatable-controls {
        margin-top: 1rem;
    }

}

.aside .aside-footer .btn-custom {
    color: #fff;
}

.tooltip-inner {
    max-width: 350px;
}

/* ── Одиночный селект держится в одну строку ─────────────────────────────
   «Ишимбай · Республика Башкортостан» разрывало поле на две строки: форма
   от этого прыгала, а соседние поля переставали стоять на одной линии.
   Поле ввода — это одна строка по определению; длинное значение обрезаем
   многоточием, полностью оно видно в раскрытом списке.

   `min-width: 0` обязателен обоим: без него потомок flex-контейнера не
   даёт себя сжать меньше содержимого, и `text-overflow` не срабатывает —
   обрезать нечего, потому что ничего не сжалось. */
.ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
    overflow: hidden;
}

.ts-wrapper.single .ts-control > .item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-wrapper.single .ts-control > input {
    min-width: 0;
}


/* ── Подсказка при наведении ─────────────────────────────────────────────

   Одна на весь сайт: и для кнопок, и для любого `title`. Раньше половину
   подсказок рисовал браузер — серый прямоугольник системным шрифтом,
   появляющийся через секунду, — а половину бутстрап, и они встречались на
   одной странице. Механизм в `js/helpers/ui/tooltips.js`.

   Стрелка сдвигается переменной `--sm-tip-arrow`: у края экрана ярлык
   упирается в границу, а показывать он должен по-прежнему на элемент. */
.sm-tip {
    position: absolute;
    z-index: 1090;
    max-width: 320px;
    padding: 7px 11px;
    border-radius: 7px;
    background: #181c32;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    pointer-events: none;          /* подсказка не должна перехватывать мышь */
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .12s ease, transform .12s ease;
}

/* Длинные чужие тексты — ошибки TLS, ответы площадок. В 320 пикселей они
   складываются лесенкой; здесь важнее одна читаемая строка мысли. */
.sm-tip--wide {
    max-width: 620px;
}

.sm-tip--on {
    opacity: 1;
    transform: translateY(0);
}

.sm-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--sm-tip-arrow, 50%);
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #181c32;
}

.sm-tip--below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #181c32;
}

/* «Проверено» — одной строкой. «49 минут назад» переносилось на две, а
   соседнее «1 час назад» умещалось, и столбец дышал от строки к строке. */
.sm-checked {
    white-space: nowrap;
}

/* ── Размерные утилиты, которых нет в нашей сборке Metronic ─────────────────
 *
 * Metronic раздаёт `min-w-*px` и `w-*px` ступенями (50, 80, 100, 125, 150,
 * 175, 200, 250, 300…), а в разметке за годы завелись промежуточные
 * значения — 110, 120, 140, 160, 170, 180. Семьдесят мест в двух десятках
 * страниц админки, и все эти годы они не делали НИЧЕГО: класс есть, правила
 * под него нет, браузер молча пропускает.
 *
 * Находится такое только специальным поиском: несуществующий класс ничем не
 * отличается от существующего, пока не начнёшь сверять разметку с CSS.
 * Тем же поиском вылез `min-w-0` — имя из Tailwind, из-за которого страница
 * товара разъезжалась на телефоне до 733 px при экране в 390.
 *
 * Дописываем недостающие ступени тем же правилом, что и у остальных.
 * ────────────────────────────────────────────────────────────────────────── */
.min-w-110px { min-width: 110px !important; }
.min-w-120px { min-width: 120px !important; }
.min-w-140px { min-width: 140px !important; }
.min-w-160px { min-width: 160px !important; }
.min-w-180px { min-width: 180px !important; }

.w-120px { width: 120px !important; }
.w-130px { width: 130px !important; }
.w-140px { width: 140px !important; }
.w-160px { width: 160px !important; }
.w-170px { width: 170px !important; }
.w-180px { width: 180px !important; }

@media (min-width: 768px) {
    .w-md-180px { width: 180px !important; }
}

/* ── TomSelect внутри `form-select`: отступ считался дважды ────────────────
 *
 * Обёртку TomSelect наследует от исходного `<select>`, а вместе с ней и
 * классы Bootstrap. `form-select` держит справа 39 px под стрелку и 9.75 px
 * слева — и это правильно, стрелку TomSelect рисует там же. Но внутри
 * `.ts-control` добавлял СВОИ 13 px с каждой стороны поверх этих.
 *
 * Из 150 px отбора тексту доставалось 75: ровно половина уходила в отступы,
 * посчитанные два раза. Снаружи это выглядело как «Все стран», «Кто сле…»,
 * «Любой ста» — обрезанные подписи во всех отборах админки, и списывалось
 * на то, что «просто узко».
 * ────────────────────────────────────────────────────────────────────────── */
.ts-wrapper.form-select > .ts-control {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Строка сетки внутри флекс-раскладки не сжималась ──────────────────────
 *
 * `.row` у Bootstrap — флекс-КОНТЕЙНЕР, и об этом помнят все. А в раскладке
 * Metronic он оказывается ещё и флекс-ЭЛЕМЕНТОМ: `container-fluid` вокруг
 * него сам флексовый. У флекс-элемента `min-width` по умолчанию `auto`,
 * то есть «не уже содержимого», — и широкая таблица внутри распирала строку,
 * строку распирал контейнер, а дальше и всю страницу.
 *
 * Считалось это поломкой ТАБЛИЦЫ, и искал я её там же: у DataTables есть
 * своё тело с прокруткой (`dt-scroll-body`), и оно исправно, просто ему
 * задавали ширину в 1219 px при экране в 390 — прокручивать было нечего.
 * Мерил трижды и трижды упирался в «ряд шириной 1222, а дети в сумме 309»,
 * пока не спросил иначе: не «кто широкий», а «где элемент вылез, а родитель
 * ещё нет». Ответ нашёлся сразу.
 *
 * Это эталонный скелет CRUD из CLAUDE.md, поэтому касается ВСЕХ страниц
 * админки: пользователи, роли, страницы, новости, реклама, тарифы, меню,
 * планировщик. На 390 px каждая из них уезжала за экран примерно втрое.
 *
 * Измерено на зеркале /admin/users: было 1317 при экране 390, стало 390;
 * тело таблицы было 1219/1219 (прокручивать нечего), стало 286/1207 —
 * то есть таблица теперь ездит внутри себя, как и задумано. На 1440
 * цифры до и после совпадают до пикселя.
 * ────────────────────────────────────────────────────────────────────────── */
.content .row {
    min-width: 0;
}