/*
 * This file is part of the Kimai time-tracking app.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

table.dataTable {
    clear: both;
    margin-bottom: 0 !important;
    max-width: none !important;

    thead .sorting,
    thead .sorting_asc,
    thead .sorting_desc {
        cursor: pointer;
        position: relative;
    }

    thead .sorting:after,
    thead .sorting_asc:after,
    thead .sorting_desc:after {
        padding-left: 5px;
        font-family: 'Font Awesome\ 6 Free';
        opacity: 0.5;
        font-size: 12px;
        font-weight: 700
    }
    thead .sorting:after {
        opacity: 0.2;
        content: "\f0dc";
    }
    thead .sorting_asc:after {
        content: "\f077";
    }
    thead .sorting_desc:after {
        content: "\f078";
    }

    thead > tr > th {
        vertical-align: middle;
        white-space: nowrap;
    }

    th:active {
        outline: none;
    }
}

table.table-bordered {
    thead th,
    thead td {
        border-left-width: 0;
        border-top-width: 0;
    }

    tbody th,
    tbody td {
        border-left-width: 0;
        border-bottom-width: 0;
    }

    tfoot th,
    tfoot td {
        border-left-width: 0;
        border-bottom-width: 0;
    }

    th:last-child,
    td:last-child {
        border-right-width: 0;
    }
}

@include media-breakpoint-up(xl) {
    table.dataTable.table > tbody > tr > td {
        vertical-align: middle;
    }
}

table.dataTable {
    /* action column */
    .actions {
        width: 40px;
    }
    tr {
        /* summary row - used in many tables to show rows with summarized values like durations or money */
        &.summary td {
            font-weight: bold;
            border: 0;
            background-color: var(--tblr-secondary-lt);
        }
        th.multiCheckbox {
            width: 15px;
        }
        &.overlapping {
            border-top: 2px solid rgba(214,57,57,.2);
        }
        &.exported {
            opacity: 0.7;
        }
    }
    td {
        /*
            Make sure that the action buttons do not line-break if another column takes all available space
            See https://github.com/twbs/bootstrap/issues/9939#issuecomment-37682952
         */
        .btn-group {
            display: flex;
        }
        .label {
            font-size: 85%;
            padding: .3em .6em .3em;
            line-height: 24px;
        }
        span.label-invisible {
            opacity: 0.6;
        }
    }
    th.weekend,
    td.weekend {
        background-color: var(--tblr-bg-surface-tertiary);
    }
    /* order is important, "today” should overwrite "weekend" therefor later in the file */
    th.today {
        background-color: var(--tblr-highlight-bg);
    }
    th.total,
    td.total {
        font-weight: bold;
    }
}


/*
 * Keeps the first column visible while scrolling horizontally inside a .table-responsive container.
 * The background must be opaque, otherwise the scrolled cells shine through.
 * Colors are based on theme variables, so light and dark mode are both supported.
 */
table.table-sticky-first > * > tr > :first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    /* bootstrap uses this as cell background, the hover/striped state is painted on top via inset box-shadow */
    --tblr-table-bg: var(--tblr-bg-surface);

    /* with border-collapse the cell borders scroll away, so the separator is drawn by a pseudo element */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        inset-inline-end: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--tblr-border-color);
    }
}
/* the summary background is semi-transparent, so it is layered on top of the opaque surface color */
table.table-sticky-first > * > tr.summary > :first-child {
    background-color: var(--tblr-bg-surface);
    background-image: linear-gradient(var(--tblr-secondary-lt), var(--tblr-secondary-lt));
}
/*
 * A single cell spanning the whole row (e.g. a grouping row) has no room to move inside the table,
 * so sticky has no effect on it. Instead, the content of that cell becomes sticky within the cell.
 */
table.table-sticky-first > * > tr > td[colspan]:only-child {
    position: static;

    &::after {
        content: none;
    }

    > * {
        position: sticky;
        inset-inline-start: $table-cell-padding-x;
        display: inline-block;
    }
}
/*
 * The sticky column should not grow wider than its content, but long names must not take up the whole screen.
 * The direct child of the cell is limited and truncated, text nodes without a wrapping element are not.
 * Content which is nested deeper (e.g. a name next to an avatar in a flex container) uses the .first-column-sticky class.
 */
table.table-sticky-first > tbody > tr > :first-child {
    white-space: nowrap;

    > *,
    .first-column-sticky {
        display: inline-block;
        min-width: 0;
        max-width: min(20rem, 40vw);
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

table.table-hover {
    tr {
        &.exported {
            &:hover {
                opacity: 1.0;
            }
        }
    }
}

/* For the context menu */
.action-dropdown,
.actions .dropdown .dropdown-menu {
    // stay on top of sticky elements (like table header)
    z-index: 1021;
}