/* ============================================================
 *  SELECTION BUTTONS
 = *=========================================================== */

.selection-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;

    border-radius: 8px;

    border: 1px solid #3f3f46;

    background: #18181b;

    color: #a1a1aa;

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

    transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.selection-button:hover {
    background: #27272a;
    border-color: #52525b;
    color: #e4e4e7;
}


/* Активный режим "только выбранные" */

.selection-button.selection-active {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
}


/* ============================================================
 *  COUNTER
 = *=========================================================== */

.selection-counter {
    display: inline-flex;

    min-width: 20px;
    height: 20px;

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

    padding: 0 6px;

    border-radius: 999px;

    background: #27272a;

    color: #a1a1aa;

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

    transition:
    background-color 120ms ease,
    color 120ms ease;
}


.selection-button.selection-active
.selection-counter {
    background: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
}


/* ============================================================
 *  CLEAR SELECTION
 = *=========================================================== */

/*
 * ВАЖНО:
 *
 * Кнопка НИКОГДА не удаляется из DOM.
 *
 * Благодаря этому toolbar не прыгает.
 */

.clear-selection-button {
    display: inline-flex;

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

    min-width: 105px;

    padding: 6px 10px;

    border-radius: 8px;

    border: 1px solid #3f3f46;

    background: #18181b;

    color: #a1a1aa;

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

    transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
}


.clear-selection-button:hover {
    background: #27272a;
    border-color: #52525b;
    color: #f4f4f5;
}


/* ============================================================
 *  TABLE ROW SELECTION
 = *=========================================================== */

.row-selected {
    background: rgba(99, 102, 241, 0.075);
}


.row-selected:hover {
    background: rgba(99, 102, 241, 0.11);
}


/* ============================================================
 *  CHECKBOX
 = *=========================================================== */

.row-checkbox {
    width: 16px;
    height: 16px;

    cursor: pointer;

    accent-color: #6366f1;
}


/* ============================================================
 *  STICKY COLUMNS
 = *=========================================================== */

:root {
    --selection-col-width: 48px;
}


/*
 * Колонка с чекбоксом — отдельный столбик.
 */

.selection-column {
    width: var(--selection-col-width);
    min-width: var(--selection-col-width);
    max-width: var(--selection-col-width);

    padding: 0 12px;

    text-align: center;
}


.sticky-selection-column {
    position: sticky;

    left: 0;

    z-index: 16;

    background: #111113;

    border-right: 1px solid #27272a;
}


/*
 * Первая колонка данных
 * остаётся слева при горизонтальном скролле.
 */

th.sticky-first-column,
td.sticky-first-column {
    position: sticky;

    left: var(--selection-col-width);

    z-index: 15;

    background: #111113;
}


/* Фон ячеек в зависимости от состояния строки */

tbody tr:hover .sticky-selection-column,
tbody tr:hover .sticky-first-column {
    background: #18181b;
}


tbody tr.row-selected .sticky-selection-column,
tbody tr.row-selected .sticky-first-column {
    background: #171724;
}


tbody tr.row-selected:hover .sticky-selection-column,
tbody tr.row-selected:hover .sticky-first-column {
    background: #1d1d32;
}


/* Шапка: угол (чекбокс) и первая колонка */

.sticky-header .sticky-selection-column {
    z-index: 32;

    background: #18181b;
}


.sticky-header .sticky-first-column {
    z-index: 31;

    background: #18181b;
}


/* ============================================================
 *  ROW HOVER
 * ============================================================ */

tbody tr:not(.row-selected):hover
> td:not(.sticky-selection-column):not(.sticky-first-column) {
    background: rgba(255, 255, 255, 0.03);
}


/* ============================================================
 *  COLUMN HOVER
 * ============================================================ */

td.column-hover {
    background: rgba(99, 102, 241, 0.07) !important;
}


th.column-hover {
    background: #1d1d2b !important;
}


.sticky-selection-column.column-hover,
.sticky-first-column.column-hover {
    background: #1d1d2b !important;
}


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

.sticky-header th {
    position: sticky;

    top: 0;

    z-index: 20;

    background: #18181b;
}


/* ============================================================
 *  TABLE SCROLL
 = *=========================================================== */

.table-scroll {
    overflow-x: auto;
    overflow-y: auto;

    max-width: 100%;

    max-height: calc(100vh - var(--toolbar-height, 64px));
}


#tableScroll {
    background: #111113;
}


.table-scroll table {
    width: 100%;

    min-width: 900px;
}


#mainTable {
    background: #111113;
}


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

#tableToolbar {
    position: sticky;

    top: 0;

    z-index: 40;

    background: #111113;
}


/* ============================================================
 *  FULLSCREEN
 = *=========================================================== */

body.fullscreen-mode #app {
    max-width: none;

    width: 100%;

    padding-left: 24px;
    padding-right: 24px;
}


body.fullscreen-mode #tableSection {
    width: 100%;
}


/* ============================================================
 *  GENERAL
 = *=========================================================== */

.glass {
    background: rgba(17, 17, 19, 0.78);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


.table-row {
    transition:
    background-color 120ms ease;
}


.button-secondary {
    display: inline-flex;

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

    gap: 8px;

    border-radius: 8px;

    border: 1px solid #3f3f46;

    background: #18181b;

    padding: 10px 16px;

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

    color: #d4d4d8;

    cursor: pointer;

    transition:
    border-color 120ms ease,
    background-color 120ms ease,
    color 120ms ease;
}


.button-secondary:hover {
    border-color: #52525b;

    background: #27272a;

    color: #ffffff;
}


/* ============================================================
 *  METRIC CELLS (bar / gradient)
 *  ============================================================ */

.metric-cell {
    position: relative;

    min-width: 150px;

    padding: 4px 10px;

    border-radius: 6px;

    background: #18181b;

    overflow: hidden;
}


.metric-bar {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    border-radius: 6px;

    opacity: 0.25;

    transition: width 200ms ease;
}


.metric-background {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    border-radius: 6px;
}


.metric-value {
    position: relative;

    z-index: 1;

    font-size: 13px;

    font-variant-numeric: tabular-nums;

    color: #e4e4e7;
}


.metric-gradient {
    position: relative;

    padding: 4px 10px;

    border-radius: 6px;

    font-size: 13px;

    font-variant-numeric: tabular-nums;

    color: #e4e4e7;

    background: linear-gradient(
        to right,
        rgba(var(--metric-color), 0.35) var(--metric-value),
        rgba(var(--metric-color), 0.08) var(--metric-value)
    );
}


/* ============================================================
 *  SELECTED COUNT BADGE
 * ============================================================ */

.selected-count {
    display: inline-flex;

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

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: #27272a;

    color: #a1a1aa;

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

    line-height: 1;

    transition:
    background-color 120ms ease,
    color 120ms ease;
}


/* Активное состояние кнопки «Только выбранные» */

#selectedOnlyBtn.active {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
}


#selectedOnlyBtn.active .selected-count {
    background: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
}