/* --- СТРУКТУРНЫЙ СКЕЛЕТ --- */
.sgrid-frame {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(18, 48, 86, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid #9a7b27 !important;
    border-radius: 4px;
    transition: all 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
}


/* --- ТАБЛИЦА И ВЬЮПОРТ --- */
.sgrid-viewport {
    overflow: auto;
    width: 100%;
    position: relative;
    background: transparent !important;
    -webkit-overflow-scrolling: touch;
}

.sgrid-viewport:focus { outline: none; }

.sgrid-table {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    width: max-content;
}

/* --- ШАПКА (HEADER) --- */
.sgrid-header {
    height: 40px; /* Фиксируем высоту */
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    background: linear-gradient(135deg, #D4AF37 0%, #F1D592 50%, #D4AF37 100%) !important;
    box-sizing: border-box;
}

.sgrid-cell.header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    align-items: stretch !important; /* Растягиваем содержимое, чтобы фильтр был во всю ширину */
    /*padding: 4px 5px !important;*/
    background: transparent !important;
    border-right: 1px solid #b38f2d !important; /* Четкая сплошная линия */
    cursor: pointer;
    box-sizing: border-box;
    overflow: visible; /* Чтобы стрелочки не обрезались */
    height: 100%;
}

.sgrid-header-title {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем текст заголовка */
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #071D49 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
}

/* --- СТРОКИ И ОБЫЧНЫЕ ЯЧЕЙКИ --- */
.sgrid-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    background-color: #fff;
    transition: background 0.2s;
}

.sgrid-row:hover { background-color: #fafafa; }
.sgrid-row.selected { background-color: #cbe0f8 !important; }

.sgrid-cell {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 8px; /* Горизонтальные отступы для текста */
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #eee;
    font-family: 'Roboto', sans-serif;
    position: relative;
}

/* --- ИНПУТЫ И ФИЛЬТРЫ --- */
.sgrid-filter {
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* Прижимает к низу */
    margin-bottom: 3px;
    border: 1px solid rgba(7, 29, 73, 0.3) !important;
    background: rgba(255, 255, 255, 0.4);
    color: #071D49 !important;
    border-radius: 2px;
    padding: 2px 5px !important;
    font-size: 11px;
    font-family: inherit;
    -webkit-user-select: text;
    user-select: text;
}

.sgrid-filter:focus {
    /*border-color: #007bff !important;*/
    background: #fff;
    outline: none;
}

.sgrid-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    margin: 0;
    user-select: text;
}

/* --- СПЕЦИАЛЬНЫЕ ТИПЫ (Select, Checkbox) --- */
.sgrid-select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    appearance: menulist; /* Гарантирует стандартный вид выпадающего списка */

    -webkit-appearance: none;
    padding: 0 4px;

    outline: none;



    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    /* Убираем стандартную синюю рамку в Chrome/Edge */
    box-shadow: none;


}

/* Чтобы текст в селекте не прилипал к краям */
.sgrid-select option {
    background-color: #fff; /* Фон выпадающего списка */
    color: #333;
}

.sgrid-cell input[type="checkbox"] {
    margin: 0 auto; /* Центрируем чекбокс в ячейке */
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* --- ИНДИКАТОРЫ СОРТИРОВКИ (Стрелки) --- */
.sgrid-header-title::after {
    content: '';
    margin-left: 6px;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    flex-shrink: 0;
}

.sgrid-cell.header[data-dir="asc"] .sgrid-header-title::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #071D49;
}

.sgrid-cell.header[data-dir="desc"] .sgrid-header-title::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #071D49;
}

.sgrid-cell[data-type="select"] {
    position: relative; /* Чтобы after позиционировался относительно ячейки */
}

.sgrid-cell[data-type="select"]:not(.editing):hover {
    background-color: rgba(212, 175, 55, 0.05); /* Едва заметный золотистый оттенок */
}

.sgrid-cell[data-type="select"]:not(.editing):hover::after {
    content: '▼';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%); /* Центрируем по вертикали */
    font-size: 9px;
    opacity: 0.5;
    color: #071D49; /* Твой темно-синий цвет */
    pointer-events: none; /* Чтобы не мешал кликать по ячейке */
}

/* --- СКРОЛЛБАР (TRON STYLE) --- */
.sgrid-viewport::-webkit-scrollbar { width: 8px; height: 8px; }
.sgrid-viewport::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.sgrid-viewport::-webkit-scrollbar-thumb {
    background: #105B89 !important;
    border-radius: 10px !important;
    box-shadow: 0 0 5px rgba(16, 91, 137, 0.5);
}

.sgrid-viewport::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4AF37 0%, #B38F2D 100%); /* Золотой градиент под стиль шапки */
    border: 2px solid rgba(18, 48, 86, 0.1); /* Небольшой отступ внутри дорожки */
    border-radius: 10px;
}

.sgrid-viewport::-webkit-scrollbar-thumb:hover {
    background: #F1D592;     /* Цвет при наведении (светлее) */
}

/* Настройка для Firefox (более ограниченная) */
.sgrid-viewport {
    scrollbar-width: thin;          /* Делает скролл тонким */
    scrollbar-color: #D4AF37 rgba(0, 0, 0, 0.1); /* Цвет ползунка и дорожки */
}


/* Заменяем специфичный ховер на более общий, если браузер капризничает */
.sgrid-viewport:hover::-webkit-scrollbar-thumb {
    background: #2cacec !important;
}

/*!* 4. При наведении — ТУТ БЫЛА ОШИБКА *!*/
/*.sgrid-viewport::-webkit-scrollbar-thumb:hover {*/
    /*background: #2cacec !important;*/
/*}*/

/*!* 5. Уголок *!*/
/*.sgrid-viewport::-webkit-scrollbar-corner {*/
    /*background: transparent !important;*/
/*}*/

/* --- УТИЛИТЫ --- */
.sgrid-header-img {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s;
}
.sgrid-header-img:hover { transform: scale(1.1); }

/* 3. Ресайзер: чтобы он был виден над линией */
.sgrid-resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 4px; /* Область захвата чуть шире линии */
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: transparent; /* Сама ручка невидима, но она прямо над border-right */
}

/* Убираем стандартный синий контур при клике на таблицу */
.sgrid-frame:focus {
    outline: none !important;
}

/* Опционально: если хочешь, чтобы при клике рамка грида
   становилась чуть ярче (в стиле твоего золотого бордера) */
/*.sgrid-frame:focus-within {*/
    /*border-color: #D4AF37 !important;*/
    /*box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);*/
/*}*/

/* Полное подавление системного фокуса для всех интерактивных элементов грида */
.sgrid-frame,
.sgrid-frame:focus,
.sgrid-viewport:focus,
[tabindex="0"]:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent; /* Для мобильных */
}

/* Оставляем только твое красивое золотое свечение */
.sgrid-frame:focus-within {
    border-color: #9a7b27 !important; /* Твой основной цвет из начала CSS */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}


/* Центрирование контента в ячейке чекбокса */
.sgrid-cell[data-field="visible"] {
    display: flex;
    align-items: center;
    justify-content: center;
}


/*input[type="checkbox"] {*/
    /*-webkit-appearance: none;*/
    /*appearance: none;*/
    /*!* Теперь нужно задать свои четкие границы *!*/
    /*width: 16px;*/
    /*height: 16px;*/
    /*border: 1px solid #333;*/
    /*background: #fff;*/
    /*position: relative;*/
    /*cursor: pointer;*/
/*}*/

/*input[type="checkbox"]:checked::after {*/
    /*content: '✔';*/
    /*position: absolute;*/
    /*top: -2px;*/
    /*left: 2px;*/
    /*font-size: 12px;*/
    /*color: #000;*/
/*}*/