/*
 * ==============================================================================
 * WinCC OA Documentation - Styling for sortable / searchable tables
 * ==============================================================================
 *
 * Adapts the default DataTables appearance to the WinCC OA documentation
 * design (Roboto, petrol accent, square corners, light/dark theme via the
 * CSS `light-dark()` function - see style.css).
 *
 * Only tables that were opted in via @outputclass are affected, everything
 * else keeps the standard table styling from style.css.
 *
 * Colour reference (identical to style.css):
 *   accent      light #007993  dark #00cccc
 *   foreground  light #000000  dark #FFFFFF
 *   background  light #FFFFFF  dark #000028
 *   panel       light #F3F3F3  dark #00183B
 *   hover row   light #FFFFFF  dark #001f39
 * ==============================================================================
 */

/* ------------------------------------------------------------------
 * Container / layout
 * ------------------------------------------------------------------ */

.dt-container {
    font-family: Roboto, sans-serif;
    color: light-dark(#000000, #FFFFFF);
    margin-bottom: 20px;
}

/* Horizontal scrolling for wide tables on small screens. */
.dt-container .dt-layout-table {
    overflow-x: auto;
}

.dt-container table.dataTable {
    width: 100% !important;
    margin: 8px 0;
    border-collapse: collapse;
}

/* ------------------------------------------------------------------
 * Header cells and sort indicators
 * ------------------------------------------------------------------ */

table.dataTable thead th {
    color: light-dark(#000000, #FFFFFF);
    background-color: light-dark(#FFFFFF, #000028);
    font-weight: bold;
    border-bottom: 2px solid light-dark(#007993, #00cccc);
    padding: 8px 26px 8px 10px;
    text-align: left;
    vertical-align: bottom;
}

table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
    cursor: pointer;
}

table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover {
    color: light-dark(#007993, #00cccc);
    background-color: light-dark(#F3F3F3, #00183B);
}

/* Suppress the library's own grey hover outline - we use our own hover tint. */
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline: none;
}

table.dataTable thead th:focus-visible {
    outline: 2px solid light-dark(#007993, #00cccc);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------
 * Sort indicators
 *
 * The library dims both arrows with `opacity` (.125 inactive, .6
 * active), which made them almost invisible against our background.
 * Opacity is therefore neutralized and the states are expressed
 * through explicit colours instead - that keeps the contrast
 * predictable in both themes.
 *
 * States:
 *   idle          both arrows in a readable grey
 *   header hover  both arrows tint towards the accent colour
 *   active        the relevant arrow in the accent colour, the
 *                 counterpart stays faint
 * ------------------------------------------------------------------ */

table.dataTable thead th .dt-column-order {
    /* Slightly wider box so the arrows do not touch the label. */
    width: 14px;
}

table.dataTable thead > tr > th .dt-column-order::before,
table.dataTable thead > tr > th .dt-column-order::after {
    opacity: 1 !important;
    color: light-dark(#000000, #FFFFFF) !important;
    font-size: 0.95em;
    transition: color 0.12s ease-in-out;
}

/* The library stacks both triangles without a gap, which makes them read
   as a single diamond. A small offset separates them into two arrows. */
table.dataTable thead > tr > th .dt-column-order::before {
    margin-bottom: 2px;
}

table.dataTable thead > tr > th .dt-column-order::after {
    margin-top: 2px;
}

/* Affordance: hovering the header lights both arrows up. */
table.dataTable thead > tr > th.dt-orderable-asc:hover .dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-asc:hover .dt-column-order::after,
table.dataTable thead > tr > th.dt-orderable-desc:hover .dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-desc:hover .dt-column-order::after {
    color: light-dark(#4d9fb0, #4de3e3) !important;
}

/* Active sort direction - accent colour. */
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order::after {
    opacity: 1 !important;
    color: light-dark(#007993, #00cccc) !important;
}

/* The opposite direction of an active column stays discreet. */
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order::before {
    opacity: 1 !important;
    color: light-dark(#000000, #FFFFFF) !important;
}

/* Label of the currently sorted column. */
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
    color: light-dark(#007993, #00cccc);
    /* Subtle tint so the active column is recognizable at a glance. */
    background-color: light-dark(#f0f8f9, #001b33);
}

/* ------------------------------------------------------------------
 * Body cells
 * ------------------------------------------------------------------ */

table.dataTable tbody td {
    padding: 7px 10px;
    vertical-align: top;
}

table.dataTable tbody tr {
    background-color: transparent;
    border: 1px solid;
    border-left: none;
    border-right: none;
    border-color: light-dark(#D9D9D9, #17324A);
}

table.dataTable tbody tr:hover {
    background-color: light-dark(#F3F3F3, #001f39);
    color: light-dark(#007993, #00cccc);
    border-color: light-dark(#007993, #00cccc);
}

/* The sorted column must not get the DataTables default grey wash. */
table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3 {
    box-shadow: none !important;
    background-color: transparent;
}

/* ------------------------------------------------------------------
 * Search field and page length selector
 * ------------------------------------------------------------------ */

.dt-container .dt-search,
.dt-container .dt-length {
    margin: 4px 0 10px 0;
    font-size: 0.9em;
}

.dt-container .dt-search label,
.dt-container .dt-length label {
    color: light-dark(#000000, #FFFFFF);
    font-weight: normal;
    margin-right: 6px;
}

.dt-container .dt-input,
.dt-container input[type="search"],
.dt-container select {
    font-family: Roboto, sans-serif;
    color: light-dark(#000000, #FFFFFF);
    background-color: light-dark(#ebf7f8, #00183B);
    border: 1px solid light-dark(#007993, #00cccc);
    border-radius: 0;
    padding: 5px 8px;
    outline: none;
}

.dt-container .dt-input:hover,
.dt-container input[type="search"]:hover,
.dt-container select:hover {
    background-color: light-dark(#d1fff2, #001f39);
}

.dt-container .dt-input:focus,
.dt-container input[type="search"]:focus,
.dt-container select:focus {
    background-color: light-dark(#d1fff2, #001f39);
    box-shadow: 0 0 0 2px light-dark(rgba(0, 121, 147, 0.35), rgba(0, 204, 204, 0.35));
}

.dt-container input[type="search"]::placeholder {
    color: light-dark(#767676, #8FA3B4);
    opacity: 1;
}

/* ------------------------------------------------------------------
 * Info line and paging
 * ------------------------------------------------------------------ */

.dt-container .dt-info {
    color: light-dark(#333333, #C9D5DE);
    font-size: 0.85em;
    padding-top: 10px;
}

.dt-container .dt-paging {
    padding-top: 8px;
}

.dt-container .dt-paging .dt-paging-button {
    font-family: Roboto, sans-serif;
    color: light-dark(#000000, #FFFFFF) !important;
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 4px 11px;
    margin: 0 1px;
    min-width: unset;
}

.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
    color: light-dark(#FFFFFF, #000028) !important;
    background: light-dark(#007993, #00cccc) !important;
    border-color: light-dark(#007993, #00cccc);
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
    color: light-dark(#FFFFFF, #000028) !important;
    background: light-dark(#007993, #00cccc) !important;
    border-color: light-dark(#007993, #00cccc);
    font-weight: bold;
}

.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover {
    color: light-dark(#A0A0A0, #4A5F70) !important;
    background: transparent !important;
    border-color: transparent;
    cursor: default;
}

/* ------------------------------------------------------------------
 * Modifier: dt-compact  -> denser rows
 * ------------------------------------------------------------------ */

table.dataTable.dt-compact thead th {
    padding: 5px 24px 5px 7px;
}

table.dataTable.dt-compact tbody td {
    padding: 4px 7px;
    font-size: 0.92em;
}

/* ------------------------------------------------------------------
 * Modifier: dt-sticky  -> header stays visible while scrolling
 *
 * Implemented with `position: sticky` instead of an additional
 * DataTables extension, so no further library has to be shipped.
 * ------------------------------------------------------------------ */

table.dataTable.dt-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* An opaque background is required, otherwise rows shine through. */
    background-color: light-dark(#FFFFFF, #000028);
}

/* ------------------------------------------------------------------
 * Fallback: tables that were opted in but could not be initialized
 * (missing header row, spanned cells, ...) must look like a normal
 * table - no leftover sort affordances.
 * ------------------------------------------------------------------ */

table.dt-skipped thead th {
    cursor: default;
    padding-right: 10px;
}

table.dt-skipped thead th .dt-column-order {
    display: none;
}

/* ------------------------------------------------------------------
 * Print: controls are useless on paper.
 * ------------------------------------------------------------------ */

@media print {

    .dt-container .dt-search,
    .dt-container .dt-length,
    .dt-container .dt-paging,
    .dt-container .dt-info,
    table.dataTable thead th .dt-column-order {
        display: none !important;
    }
}

/* ------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {

    .dt-container .dt-search input {
        width: 100%;
        max-width: 100%;
    }

    .dt-container .dt-search label {
        display: block;
        margin-bottom: 4px;
    }
}