/* =============================================================
   COMPONENT / TABLE
   
   Базовый стиль + модификаторы (варианты через классы).
   Все варианты — только переопределение свойств, без дубля.
   ============================================================= */

table {
    background-color: var(--bg-surface);
    border-collapse: collapse;
    width: 100%;
}

caption {
    text-align: left;
    margin-bottom: var(--space-2);
}

th {
    font-weight: var(--fw-medium);
    background-color: var(--gray-100);
}

tbody th {
    text-align: left;
}

th,
td {
    padding: 8px 16px;
}

tfoot th {
    white-space: nowrap;
}

/* Поля в ячейках — без padding у ячейки, отступы у инпута */
td:has(input, select, textarea, button, img) {
    padding: 0;
}

td :is(input[type="number"],
    input[type="text"],
    input[type="tel"],
    input[type="password"],
    input[type="email"]) {
    padding: 9px 12px;
}

td :is(input[type="date"], input[type="datetime-local"]) {
    padding: 5px 12px;
    width: -webkit-fill-available;
}

td input[type="search"].search-input {
    padding: 5px 12px;
    margin: -5px -12px;
}

/* =============================================================
   МОДИФИКАТОРЫ
   ============================================================= */

/* Границы только снизу */
table.bottom-bordered th,
table.bottom-bordered td {
    border: none;
    border-bottom: 1px solid var(--border-light);
}

/* Границы со всех сторон */
table.bordered th,
table.bordered td {
    border: 1px solid var(--border-default);
}

/* Полосатая */
table.striped tbody tr:nth-child(odd) {
    background-color: var(--bg-surface);
}

table.striped tbody tr:nth-child(even) {
    background-color: var(--bg-surface-alt);
}

/* Полосатая только на мобилке */
@media (max-width: 767px) {
    table.striped-mobonly tbody tr:nth-child(odd) {
        background-color: var(--bg-surface);
    }

    table.striped-mobonly tbody tr:nth-child(even) {
        background-color: var(--bg-surface-alt);
    }
}

/* Подсветка строки при наведении / выделенной */
table.hovered tbody tr.checked {
    background-color: var(--blue-100);
}

table.hovered tbody tr:hover {
    background-color: var(--blue-300);
}

/* Sticky header */
table.sticky-head thead th {
    white-space: inherit;
    position: sticky;
    top: -1px;
    box-shadow: var(--shadow-floating);
    opacity: .95;
    z-index: var(--z-raised);
}

/* Sticky-left column */
table.sticky-left tbody th {
    position: sticky;
    left: -1px;
    box-shadow: var(--shadow-floating);
    opacity: .95;
    z-index: var(--z-base);
}

/* =============================================================
   ОБЁРТКИ ДЛЯ СКРОЛЛА
   ============================================================= */

.table-scroll {
    position: relative;
    max-width: calc(100dvw - 1.3rem);
    overflow-x: auto;
}

.table-wrapper {
    max-width: calc(100vw - 21px);
    max-height: 100vh;
    position: sticky;
    top: 0;
    overflow-x: auto;
    padding: 0;
    margin: 0;
}