/*
 * Table look shared by every redesigned listing: any DataTables table inside a .vg-page container gets it.
 * Loaded after riho.css and admin-layout.css (see resources/views/riho/layouts/css.blade.php).
 * Page-specific column rules live in each page's own stylesheet (e.g. products-list.css).
 */

.vg-page table.dataTable {
    --vg-row-hover: #FCF9F6;
    --vg-row-selected: #FEF4F0;
    --vg-head-bg: #FBF8F5;
    --vg-line-soft: #F0EAE4;

    width: 100%;
    font-size: 13px;
    border-collapse: separate;
    border-spacing: 0;
}

/* Header row */
.vg-page table.dataTable thead th {
    height: 40px;
    padding: 0 30px 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--vg-muted);
    background: var(--vg-head-bg);
    border-top: 1px solid var(--vg-line);
    border-bottom: 1px solid var(--vg-line);
}

.vg-page table.dataTable thead th.sorting_disabled {
    padding-right: 8px;
}

/* Bootstrap's text-secondary is !important, so the header labels need the same weight to inherit. */
.vg-page table.dataTable thead th .text-secondary {
    color: inherit !important;
}

/* Sort arrows: smaller, quiet, and the active direction in ink. */
.vg-page table.dataTable thead th.sorting::before,
.vg-page table.dataTable thead th.sorting::after,
.vg-page table.dataTable thead th.sorting_asc::before,
.vg-page table.dataTable thead th.sorting_asc::after,
.vg-page table.dataTable thead th.sorting_desc::before,
.vg-page table.dataTable thead th.sorting_desc::after {
    bottom: auto;
    top: 50%;
    margin-top: -8px;
    font-family: var(--vg-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--vg-muted);
    opacity: .4;
}

.vg-page table.dataTable thead th.sorting::before,
.vg-page table.dataTable thead th.sorting_asc::before,
.vg-page table.dataTable thead th.sorting_desc::before {
    right: 18px;
}

.vg-page table.dataTable thead th.sorting::after,
.vg-page table.dataTable thead th.sorting_asc::after,
.vg-page table.dataTable thead th.sorting_desc::after {
    right: 8px;
}

.vg-page table.dataTable thead th.sorting_asc::before,
.vg-page table.dataTable thead th.sorting_desc::after {
    color: var(--vg-ink);
    opacity: 1;
}

.vg-page table.dataTable thead th.sorting_asc,
.vg-page table.dataTable thead th.sorting_desc {
    color: var(--vg-ink);
}

/* Body rows */
.vg-page table.dataTable tbody td {
    padding: 9px 8px;
    vertical-align: middle;
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--vg-line-soft);
}

.vg-page table.dataTable tbody tr:last-child td {
    border-bottom: 0;
}

.vg-page table.dataTable tbody tr:hover td {
    background: var(--vg-row-hover);
}

.vg-page table.dataTable tbody tr.selected td {
    background: var(--vg-row-selected);
}

/* The sorted column is no longer tinted. Riho tints it with !important on odd rows (4 classes), so the
   selectors below carry one more class (.dataTable) to win on specificity. */
.vg-page table.dataTable.dataTable tbody tr > td.sorting_1,
.vg-page table.dataTable.dataTable tbody tr > td.sorting_2,
.vg-page table.dataTable.dataTable tbody tr > td.sorting_3 {
    background-color: transparent !important;
}

.vg-page table.dataTable.dataTable tbody tr:hover > td.sorting_1,
.vg-page table.dataTable.dataTable tbody tr:hover > td.sorting_2,
.vg-page table.dataTable.dataTable tbody tr:hover > td.sorting_3 {
    background-color: var(--vg-row-hover) !important;
}

.vg-page table.dataTable.dataTable tbody tr.selected > td.sorting_1,
.vg-page table.dataTable.dataTable tbody tr.selected > td.sorting_2,
.vg-page table.dataTable.dataTable tbody tr.selected > td.sorting_3 {
    background-color: var(--vg-row-selected) !important;
}

/* Selection checkbox: the browser's own checkbox in the design's accent colour (Riho draws a green custom one). */
.vg-page table.dataTable th.custom-checkbox,
.vg-page table.dataTable td.custom-checkbox {
    width: 40px;
    padding-left: 14px;
}

.vg-page table.dataTable .custom-checkbox .form-check {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.vg-page table.dataTable .custom-checkbox .form-check-input {
    appearance: auto;
    position: static;
    float: none;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 1;
    cursor: pointer;
    accent-color: var(--vg-coral);
    background-image: none;
    border: revert;
}

.vg-page table.dataTable .custom-checkbox label {
    display: none;
}

/* Riho and DataTables Select draw their own green tick on the cell; the native checkbox replaces it. */
.vg-page table.dataTable th.custom-checkbox::before,
.vg-page table.dataTable th.custom-checkbox::after,
.vg-page table.dataTable td.custom-checkbox::before,
.vg-page table.dataTable td.custom-checkbox::after {
    content: none;
    display: none;
}

.vg-page table.dataTable .custom-checkbox .form-check-input:focus {
    box-shadow: none;
}

.vg-page table.dataTable .custom-checkbox .form-check-input:focus-visible {
    outline: 2px solid var(--vg-coral);
    outline-offset: 2px;
}