/* =====================================================================
   DataTables theme in car-stories colors
   Include AFTER the DataTables CSS (and after Bootstrap), e.g.:
   <link rel="stylesheet" href="~/css/datatables-carstories.css" asp-append-version="true" />

   Works with DataTables 1.x (dataTables_* classes) and 2.x (dt-* classes),
   with or without the Bootstrap 5 integration, light and dark theme.
   Change the look for all tables here: the --dtcs-* tokens below.
   ===================================================================== */

:root {
    --dtcs-ink: var(--car-stories-darkblue, rgb(15, 25, 68));
    --dtcs-muted: rgba(15, 25, 68, .65);
    --dtcs-accent: var(--car-stories-darkgreen, rgb(52, 98, 110));
    --dtcs-accent-rgb: 52, 98, 110;
    --dtcs-accent-soft: var(--car-stories-lightgreen, rgb(101, 142, 149));
    --dtcs-signal: var(--car-stories-ochre, rgb(209, 173, 95));
    --dtcs-surface: #FFFFFF;
    --dtcs-stripe: #F4F7F8;
    --dtcs-hover: rgba(101, 142, 149, .16);
    --dtcs-line: #D3DEE0;
    --dtcs-head-bg: var(--car-stories-darkgreen, rgb(52, 98, 110));
    --dtcs-head-ink: #FFFFFF;
    --dtcs-selected-bg: var(--car-stories-darkgreen, rgb(52, 98, 110));
    --dtcs-selected-ink: #FFFFFF;
    --dtcs-focus: 0 0 0 .2rem rgba(52, 98, 110, .35);
    --dtcs-radius: 8px;
}

[data-bs-theme="dark"] {
    --dtcs-ink: #F1F4F5;
    --dtcs-muted: #B5C7CC;
    --dtcs-accent: #9CC3C9;
    --dtcs-accent-rgb: 156, 195, 201;
    --dtcs-surface: #1D3E50;
    --dtcs-stripe: #21465A;
    --dtcs-hover: rgba(156, 195, 201, .14);
    --dtcs-line: #2F5568;
    --dtcs-head-bg: #152F3D;
    --dtcs-head-ink: #F1F4F5;
    --dtcs-selected-bg: #9CC3C9;
    --dtcs-selected-ink: #0F1944;
    --dtcs-focus: 0 0 0 .2rem rgba(156, 195, 201, .4);
}


/* ---------------------------------------------------------------------
   Wrapper: search, length menu, info, paging
   --------------------------------------------------------------------- */
.dataTables_wrapper,
.dt-container {
    color: var(--dtcs-ink);
    font-variant-numeric: tabular-nums;
}

/* Search field and "entries per page" select */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dt-container .dt-search input,
.dt-container .dt-length select {
    border: 1px solid var(--dtcs-line);
    border-radius: 6px;
    background-color: var(--dtcs-surface);
    color: var(--dtcs-ink);
    padding: .35rem .6rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Length select: room on the right for Bootstrap's chevron (.form-select background image) */
.dataTables_wrapper .dataTables_length select,
.dt-container .dt-length select {
    width: auto;
    min-width: 4.5rem;
    padding-right: 2rem !important;
    background-position: right .6rem center;
    background-size: 12px 9px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: var(--dtcs-accent);
    box-shadow: var(--dtcs-focus);
    outline: none;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dt-container .dt-search label,
.dt-container .dt-length label {
    color: var(--dtcs-muted);
}

/* "Showing 1 to 10 of 57 entries" */
.dataTables_wrapper .dataTables_info,
.dt-container .dt-info {
    color: var(--dtcs-muted);
    font-size: .875rem;
}


/* ---------------------------------------------------------------------
   Table never wider than its card: scrolls horizontally inside its own box.
   DataTables 2 + Bootstrap 5 markup:
     div.row.dt-layout-table > div.col-12.dt-layout-full.d-md-flex > table
   The scroll box must be the column, NOT the .row: a .row has negative side
   margins (gutter), so a scrolling .row is wider than the search / paging
   rows above and below and the right edges no longer line up.
   --------------------------------------------------------------------- */
.dt-container .dt-layout-table > .dt-layout-full,
.dataTables_wrapper .dt-row > [class*="col-"] {
    display: block !important;     /* overrides .d-md-flex, a flex item would not scroll cleanly */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dt-container,
.dataTables_wrapper {
    max-width: 100%;
    min-width: 0;
}

/* A surrounding .table-responsive is not needed with DataTables and causes a second
   scroll box: the rows' negative margins overflow it and a horizontal scrollbar
   (the grey line below the paging) appears. Neutralize it if it is still in the view. */
.table-responsive:has(> .dt-container, > .dataTables_wrapper) {
    overflow: visible;
}


/* ---------------------------------------------------------------------
   Table body: Bootstrap table variables + DataTables 2 row variables
   --------------------------------------------------------------------- */
table.dataTable {
    /* Bootstrap 5 .table */
    --bs-table-color: var(--dtcs-ink);
    --bs-table-bg: var(--dtcs-surface);
    --bs-table-border-color: var(--dtcs-line);
    --bs-table-striped-color: var(--dtcs-ink);
    --bs-table-striped-bg: var(--dtcs-stripe);
    --bs-table-hover-color: var(--dtcs-ink);
    --bs-table-hover-bg: var(--dtcs-hover);
    --bs-table-active-color: var(--dtcs-selected-ink);
    --bs-table-active-bg: var(--dtcs-selected-bg);
    /* DataTables 2 (values are "r, g, b") */
    --dt-row-selected: var(--dtcs-accent-rgb);
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: 255, 255, 255;

    color: var(--dtcs-ink);
    border-color: var(--dtcs-line);

    /* autoWidth writes a fixed pixel width (style="width: 1386px") at init time.
       The table then no longer lines up with search and paging on the right.
       100% fills the container; wider content still scrolls via .dt-layout-table. */
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

table.dataTable > tbody > tr > td {
    border-color: var(--dtcs-line);
    vertical-align: middle;
}

/* Stripes without Bootstrap (class="stripe" / "display") */
table.dataTable.stripe > tbody > tr:nth-child(odd) > *,
table.dataTable.display > tbody > tr:nth-child(odd) > * {
    box-shadow: inset 0 0 0 9999px var(--dtcs-stripe);
}

/* Hover without Bootstrap (class="hover" / "display") */
table.dataTable.hover > tbody > tr:hover > *,
table.dataTable.display > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--dtcs-hover);
}

/* Selected rows (Select extension) */
table.dataTable > tbody > tr.selected > *,
table.dataTable > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px var(--dtcs-selected-bg) !important;
    color: var(--dtcs-selected-ink) !important;
}

table.dataTable > tbody > tr.selected a {
    color: var(--dtcs-selected-ink);
}

/* Links in cells: readable in both themes */
table.dataTable > tbody a:not(.btn) {
    color: var(--dtcs-accent);
    text-underline-offset: .15em;
}

/* "No data available in table" */
table.dataTable > tbody > tr > td.dataTables_empty,
table.dataTable > tbody > tr > td.dt-empty {
    padding: 2rem 1rem;
    color: var(--dtcs-muted);
    text-align: center;
}


/* ---------------------------------------------------------------------
   Header: dark green with an ochre baseline
   --------------------------------------------------------------------- */
/* !important: dataTables.bootstrap5.css sets the cell background with a more specific
   selector (table.table.dataTable > :not(caption) > * > *) and would otherwise win,
   leaving white text on a white header. */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background-color: var(--dtcs-head-bg) !important;
    color: var(--dtcs-head-ink) !important;
    border-color: var(--dtcs-head-bg) !important;
    border-bottom: 2px solid var(--dtcs-signal) !important;
    box-shadow: none !important;
    font-weight: 600;
    /* Long titles ("Reifendimension vorne") wrap at spaces instead of widening the table */
    white-space: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

/* Title text may wrap, the arrows stay next to it */
table.dataTable > thead > tr > th span.dt-column-title {
    min-width: 0;
}

/* Vertical separators between header cells, subtle on the dark background */
table.dataTable > thead > tr > th + th,
table.dataTable > thead > tr > td + td {
    border-left: 1px solid rgba(255, 255, 255, .15) !important;
}

/* Rounded top corners.
   border-radius on the header cells is ignored with border-collapse: collapse (Bootstrap),
   and the table's own border would still show a square corner. clip-path cuts the
   whole table, independent of the border model. Bottom corners stay square. */
table.dataTable {
    clip-path: inset(0 round var(--dtcs-radius) var(--dtcs-radius) 0 0);
}

/* Footer */
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
    background-color: var(--dtcs-stripe) !important;
    color: var(--dtcs-ink) !important;
    border-top: 2px solid var(--dtcs-line);
    font-weight: 600;
}

/* Keyboard focus on sortable headers */
table.dataTable > thead > tr > th:focus-visible {
    outline: 2px solid var(--dtcs-signal);
    outline-offset: -4px;
}

/* All header cells on one baseline (also non-sortable ones like "Historie") */
table.dataTable > thead > tr > th {
    vertical-align: middle !important;
}

/* ---------- Sort arrows - DataTables 2.x: inline, directly after the title ---------- */

/* 2.1+: title and arrows are wrapped in div.dt-column-header */
table.dataTable > thead > tr > th div.dt-column-header {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .4rem;
}

/* 2.0 reserves 30px on the right for absolutely positioned arrows - not needed inline */
table.dataTable > thead > tr > th.dt-orderable-asc,
table.dataTable > thead > tr > th.dt-orderable-desc,
table.dataTable > thead > tr > th.dt-ordering-asc,
table.dataTable > thead > tr > th.dt-ordering-desc {
    padding-right: .75rem !important;
}

/* Arrow container: inline box instead of absolute right position or line break */
table.dataTable > thead > tr > th span.dt-column-order {
    position: relative !important;
    display: inline-block !important;
    inset: auto !important;
    flex: 0 0 auto;
    width: .7rem !important;
    height: 1.1rem !important;
    vertical-align: middle;
}

/* 2.0: span sits directly in th, so it needs its own spacing */
table.dataTable > thead > tr > th > span.dt-column-order {
    margin-left: .4rem;
}

/* Both arrows stacked inside the box: up arrow on top, down arrow below */
table.dataTable > thead > tr > th span.dt-column-order::before,
table.dataTable > thead > tr > th span.dt-column-order::after {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    display: block;
    font-size: .6rem !important;
    line-height: 1 !important;
    text-align: center;
    color: var(--dtcs-head-ink) !important;
    opacity: .55 !important;
    transition: opacity .15s ease-in-out;
}

table.dataTable > thead > tr > th span.dt-column-order::before {
    top: 0 !important;
    bottom: auto !important;
}

table.dataTable > thead > tr > th span.dt-column-order::after {
    top: auto !important;
    bottom: 0 !important;
}

/* Hover on a sortable header: arrows get stronger */
table.dataTable > thead > tr > th.dt-orderable-asc:hover span.dt-column-order::before,
table.dataTable > thead > tr > th.dt-orderable-asc:hover span.dt-column-order::after,
table.dataTable > thead > tr > th.dt-orderable-desc:hover span.dt-column-order::before,
table.dataTable > thead > tr > th.dt-orderable-desc:hover span.dt-column-order::after {
    opacity: .9 !important;
}

/* Active sort direction in ochre, the inactive arrow fades out */
table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order::after {
    color: var(--dtcs-signal) !important;
    opacity: 1 !important;
}

table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order::after,
table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order::before {
    opacity: .25 !important;
}

/* ---------- Sort arrows - DataTables 1.x (pseudo-elements on th, stay on the right) ---------- */
table.dataTable > thead .sorting::before,
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::before,
table.dataTable > thead .sorting_desc::after {
    color: var(--dtcs-head-ink) !important;
    opacity: .55 !important;
}

table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_desc::after {
    color: var(--dtcs-signal) !important;
    opacity: 1 !important;
}

table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::before {
    opacity: .25 !important;
}


/* ---------------------------------------------------------------------
   Paging
   --------------------------------------------------------------------- */

/* Bootstrap 5 integration (.pagination) */
.dataTables_wrapper .pagination,
.dt-container .pagination {
    --bs-pagination-color: var(--dtcs-accent);
    --bs-pagination-bg: var(--dtcs-surface);
    --bs-pagination-border-color: var(--dtcs-line);
    --bs-pagination-hover-color: var(--dtcs-accent);
    --bs-pagination-hover-bg: var(--dtcs-hover);
    --bs-pagination-hover-border-color: var(--dtcs-line);
    --bs-pagination-focus-color: var(--dtcs-accent);
    --bs-pagination-focus-bg: var(--dtcs-hover);
    --bs-pagination-focus-box-shadow: var(--dtcs-focus);
    --bs-pagination-active-color: var(--dtcs-selected-ink);
    --bs-pagination-active-bg: var(--dtcs-selected-bg);
    --bs-pagination-active-border-color: var(--dtcs-selected-bg);
    --bs-pagination-disabled-color: var(--dtcs-muted);
    --bs-pagination-disabled-bg: var(--dtcs-surface);
    --bs-pagination-disabled-border-color: var(--dtcs-line);
    flex-wrap: wrap;
}

/* Without Bootstrap (DataTables 1.x: .paginate_button, 2.x: .dt-paging-button) */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-container .dt-paging .dt-paging-button {
    min-width: 2.25rem;
    border: 1px solid transparent !important;
    border-radius: 6px;
    background: transparent !important;
    color: var(--dtcs-accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--dtcs-hover) !important;
    border-color: var(--dtcs-line) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dt-container .dt-paging .dt-paging-button.current {
    background: var(--dtcs-selected-bg) !important;
    border-color: var(--dtcs-selected-bg) !important;
    color: var(--dtcs-selected-ink) !important;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--dtcs-muted) !important;
    opacity: .6;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible,
.dt-container .dt-paging .dt-paging-button:focus-visible {
    outline: none;
    box-shadow: var(--dtcs-focus);
}


/* ---------------------------------------------------------------------
   "Processing..." indicator
   --------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_processing,
.dt-container .dt-processing {
    background: var(--dtcs-surface);
    color: var(--dtcs-ink);
    border: 1px solid var(--dtcs-line);
    border-radius: var(--dtcs-radius);
    box-shadow: 0 6px 20px rgba(15, 25, 68, .18);
}

/* Animated dots */
.dataTables_wrapper .dataTables_processing > div:last-child > div,
.dt-container .dt-processing > div:last-child > div {
    background: var(--dtcs-signal);
}


/* ---------------------------------------------------------------------
   Responsive extension: expand control and child rows
   --------------------------------------------------------------------- */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
table.dataTable.dtr-column > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control::before {
    border-left-color: var(--dtcs-accent);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.dtr-control::before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded > th.dtr-control::before {
    border-top-color: var(--dtcs-signal);
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--dtcs-line);
}

table.dataTable > tbody > tr.child span.dtr-title {
    color: var(--dtcs-muted);
    font-weight: 600;
}


/* ---------------------------------------------------------------------
   Small screens and preferences
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* Length menu and search: left aligned instead of centered (DataTables default) */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dt-container .dt-length,
    .dt-container .dt-search {
        text-align: left !important;
    }

    /* Length menu: select and label in one row
       (2.x: select + label as siblings, 1.x: select inside the label) */
    .dt-container .dt-length,
    .dataTables_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
    }

    .dt-container .dt-length label {
        margin: 0;
    }

    .dt-container .dt-length select,
    .dataTables_wrapper .dataTables_length select {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    /* Search: label left, input takes the remaining width */
    .dt-container .dt-search,
    .dataTables_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        margin: .75rem 0 0;
    }

    .dt-container .dt-search label {
        flex: 0 0 auto;
        margin: 0;
    }

    .dt-container .dt-search input,
    .dataTables_wrapper .dataTables_filter input {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }

    /* Info and paging stay centered below the table */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dt-container .dt-info,
    .dt-container .dt-paging {
        text-align: center !important;
    }

    .dataTables_wrapper .pagination,
    .dt-container .pagination {
        justify-content: center !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dataTables_wrapper *,
    .dt-container * {
        transition: none !important;
    }
}

/* Windows high contrast mode: keep the system colors */
@media (forced-colors: active) {
    table.dataTable > thead > tr > th,
    table.dataTable > tbody > tr.selected > * {
        forced-color-adjust: auto;
        box-shadow: none !important;
    }

    table.dataTable > tbody > tr.selected > * {
        background: Highlight;
        color: HighlightText !important;
    }
}