/* Admin Users — копия стилей Admin Transponders + min-width для большей таблицы */

.atp-page {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

/* Шире, чем глобальный .container (1200px): на широких мониторах больше места под таблицу без горизонтального скролла */
.settings-container.atp-page.container {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 1260px) {
    .settings-container.atp-page.container {
        max-width: min(94vw, 1580px);
    }
}

@media (min-width: 1540px) {
    .settings-container.atp-page.container {
        max-width: min(95vw, 1900px);
    }
}

@media (min-width: 1920px) {
    .settings-container.atp-page.container {
        max-width: min(96vw, 2400px);
    }
}

@media (min-width: 2560px) {
    .settings-container.atp-page.container {
        max-width: min(97vw, 3200px);
    }
}

.atp-main {
    margin-top: 4px;
}

.atp-intro {
    margin: 0 0 10px;
    font-size: 12px;
    color: #8a8a8a;
    line-height: 1.4;
    max-width: 90ch;
}

.atp-banner {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 13px;
}

.atp-banner--error {
    background: rgba(180, 40, 50, 0.12);
    border: 1px solid rgba(255, 100, 110, 0.35);
    color: #ffb4b8;
}

.atp-banner--muted {
    text-align: center;
    color: #777;
    border: 1px dashed #3a3a3a;
}

/* ——— Filters ——— */
.atp-filters {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.92) 85%, transparent 100%);
    padding: 10px 0 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
}

.atp-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-bottom: 8px;
}

.atp-filter-count {
    font-size: 12px;
    color: #888;
    font-family: ui-monospace, monospace;
    margin-left: auto;
    white-space: nowrap;
}

.atp-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 10px;
}

/* Широкий экран: сетка фильтров вынесена в строку над таблицей (admin-transponders-react.js). */
@media (min-width: 901px) {
    .atp-filter-grid--mobile {
        display: none !important;
    }
}

.atp-filter-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.atp-filter-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a6a6a;
}

.atp-filter-input {
    padding: 5px 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

.atp-filter-clear {
    flex: 0 0 auto;
    font-size: 12px !important;
    padding: 6px 12px !important;
}

/* ——— Dense table (desktop) ——— */
.atp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #2c2c2c;
    border-radius: 12px;
    background: rgba(12, 12, 12, 0.65);
}

/* Фильтры — первая строка thead той же таблицы; разделитель до строки заголовков */
.atp-dense-table.atp-data-table thead tr.atp-filter-data-row th {
    border-bottom: 1px solid #333;
}

.atp-filter-th.atp-filter-td,
.atp-filter-td {
    vertical-align: bottom;
    padding: 6px 6px 8px !important;
}

.atp-filter-cell--in-table {
    gap: 2px;
    min-width: 0;
}

.atp-filter-cell--in-table .atp-filter-label {
    font-size: 8px;
    letter-spacing: 0.06em;
}

.atp-filter-cell--in-table .atp-filter-input {
    padding: 4px 6px !important;
    font-size: 11px !important;
}

.atp-filter-td--actions {
    background: transparent;
    border-bottom: 1px solid #252525;
}

@media (max-width: 900px) {
    thead tr.atp-filter-table--desktop-only {
        display: none !important;
    }
}

.atp-dense-table {
    width: 100%;
    min-width: 1520px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
}

/* На широкой таблице «раздвигаем» колонки: лишняя ширина уходит в Team / Driver / Firmware */
@media (min-width: 1260px) {
    .atp-dense-table {
        table-layout: auto;
    }

    .atp-col-team,
    .atp-col-driver {
        width: auto;
        min-width: 140px;
    }

    .atp-col-fw {
        width: auto;
        min-width: 120px;
    }
}

/* Подписи колонок (сортировка) — липнут к верху viewport; строка фильтров — нет */
.atp-dense-table thead tr.atp-column-header-row th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, #1e2420 0%, #141816 100%);
    color: #9aaea4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atp-dense-table thead tr.atp-filter-data-row th {
    position: relative;
    top: auto;
    z-index: 4;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.03em;
    color: #8a9a90;
    text-align: left;
    padding: 6px 6px 8px;
    white-space: normal;
    overflow: visible;
}

.atp-dense-table thead tr.atp-filter-data-row th:first-child {
    position: sticky;
    left: 0;
    z-index: 6;
    background: linear-gradient(180deg, #1e2420 0%, #141816 100%);
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.35);
}

.atp-dense-table tbody td {
    padding: 4px 6px;
    border-bottom: 1px solid #252525;
    vertical-align: middle;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atp-dense-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

.atp-dense-table tbody tr:hover td {
    background: rgba(0, 255, 156, 0.04);
}

/* Не использовать content-visibility на <tr>: на мобильных при overflow-x ячейки справа
   (Track / Sim) могут не отрисовываться или получать нулевую ширину в table-layout:fixed. */

/* Sticky ID column on horizontal scroll (не трогаем первую ячейку строки фильтров — у неё свой фон) */
.atp-dense-table thead tr.atp-column-header-row th:first-child,
.atp-dense-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #121512;
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.35);
}

.atp-dense-table thead tr.atp-column-header-row th:first-child {
    z-index: 5;
    background: linear-gradient(180deg, #1e2420 0%, #141816 100%);
}

.atp-td-id {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: #a8dcc8;
    width: 92px;
}

.atp-td-mono {
    font-family: ui-monospace, monospace;
    font-size: 11px;
}

.atp-col-fw {
    width: 120px;
}
.atp-col-status {
    width: 110px;
}
.atp-col-type {
    width: 72px;
}
.atp-col-track {
    width: 118px;
    min-width: 88px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atp-col-sim {
    width: 92px;
    min-width: 76px;
    max-width: 140px;
    white-space: nowrap;
}
.atp-col-simprov {
    width: 100px;
    min-width: 80px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atp-col-team {
    width: 140px;
}
.atp-col-date {
    width: 100px;
}
.atp-col-driver {
    width: 140px;
}
.atp-col-pub {
    width: 100px;
}
.atp-col-actions {
    width: 88px;
}

.atp-chip-sm {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 999px;
    vertical-align: middle;
    border: 1px solid rgba(0, 255, 156, 0.4);
    color: #7dffc8;
    background: rgba(0, 255, 156, 0.07);
}

.atp-chip-sm.atp-chip--offline {
    border-color: #555 !important;
    color: #999 !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.atp-cell-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 6px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.atp-slider-cell {
    padding: 2px 0 !important;
}

.atp-slider-cell .public-control-group {
    height: auto;
    min-height: 0;
    width: 92px;
    gap: 0;
}

.atp-slider-cell .public-header {
    font-size: 6px;
    margin-bottom: 0;
}

.atp-slider-cell .triple-range {
    height: 6px;
}

.atp-slider-cell .triple-range::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
}

.atp-slider-cell .range-labels span {
    font-size: 6px;
}

.atp-btn-mini {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    min-height: 28px;
}

.atp-btn-del-mini {
    padding: 2px 8px !important;
    font-size: 14px !important;
    line-height: 1.2;
}

.atp-actions-cell {
    white-space: nowrap;
    text-align: right;
}

.atp-actions-inner {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.atp-col-team-select-wrap {
    min-width: 140px;
    max-width: 220px;
}

.atp-team-select {
    width: 100%;
    max-width: 100%;
    font-size: 12px !important;
}

/* ——— Sortable column headers ——— */
.atp-dense-table th.atp-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.atp-dense-table th.atp-th-sortable:hover {
    color: #e8e8e8;
}

.atp-dense-table th.atp-th-sorted {
    color: #c8e6ff;
}

.atp-dense-table th.atp-th-sortable:focus-visible {
    outline: 2px solid rgba(120, 180, 255, 0.65);
    outline-offset: 2px;
}

/* ——— Narrow screens: только фильтры в 2 колонки; таблица — overflow-x внутри обёртки ——— */
@media (max-width: 900px) {
    .atp-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .atp-page .atp-table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* Admin Users: таблица уже — меньше горизонтальный скролл */
.atp-page.admin-users-page .atp-table-wrap,
.atp-page.admin-users-page .atp-dense-table {
    min-width: 1320px;
}

/* Компактные колонки только на Admin Users (остальные страницы с .atp-* не затрагиваются) */
.atp-page.admin-users-page .atp-td-id {
    width: 4.5ch;
    min-width: 4.5ch;
    max-width: 4.5ch;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}

.atp-page.admin-users-page .atp-col-status {
    width: 8.5ch;
    min-width: 8.5ch;
    max-width: 10ch;
    box-sizing: border-box;
}

.atp-page.admin-users-page .atp-col-driver {
    width: 15ch;
    min-width: 0;
    max-width: 15ch;
    box-sizing: border-box;
}

@media (min-width: 1260px) {
    .atp-page.admin-users-page .atp-dense-table .atp-col-driver {
        width: 15ch;
        min-width: 0;
        max-width: 15ch;
    }
}

.atp-page.admin-users-page .atp-user-cb-cell,
.atp-page.admin-users-page .atp-dense-table thead th:nth-child(8),
.atp-page.admin-users-page .atp-dense-table thead th:nth-child(9),
.atp-page.admin-users-page .atp-dense-table tbody td:nth-child(8),
.atp-page.admin-users-page .atp-dense-table tbody td:nth-child(9) {
    width: 28px;
    min-width: 28px;
    max-width: 34px;
    padding: 4px 2px;
    box-sizing: border-box;
}

/* Валюта — 12-й столбец (после country); country не трогаем отдельным правилом */
.atp-page.admin-users-page .atp-dense-table thead th:nth-child(12),
.atp-page.admin-users-page .atp-dense-table tbody td:nth-child(12) {
    width: 5.5ch;
    min-width: 48px;
    max-width: 58px;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}

.atp-user-cb-cell {
    text-align: center;
    vertical-align: middle;
}

.atp-user-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #00c896;
}