table.table.dataTable>tbody>tr.selected {
    background-color: #0d6efd !important;
    color: #fff !important;
}

table.table.dataTable>tbody>tr.selected:hover {
    background-color: #0b5ed7 !important;
}

table.table.dataTable>tbody>tr.selected * {
    color: #fff !important;
}

table.table.dataTable>tbody>tr.selected .blockquote-footer {
    color: #fff;
}

table.table.dataTable>tbody>tr.selected a {
    color: #fff !important;
}

table.table.dataTable>tbody>tr.selected .btn {
    color: #fff !important;
    transition: none !important;
}

table.table.dataTable>tbody>tr.selected .btn i,
table.table.dataTable>tbody>tr.selected .btn svg {
    color: #fff !important;
    fill: #fff !important;
}

/* Badge styling für selected rows */
table.table.dataTable>tbody>tr.selected .badge {
    background-color: #fff !important;
    color: #0d6efd !important;
    border: 1px solid #fff !important;
}

table.table.dataTable>tbody>tr.selected .badge.bg-green-soft,
table.table.dataTable>tbody>tr.selected .badge.bg-success-soft {
    background-color: #198754 !important;
    color: #fff !important;
}

table.table.dataTable>tbody>tr.selected .badge.bg-red-soft {
    background-color: #dc3545 !important;
    color: #fff !important;
}

table.table.dataTable>tbody>tr.selected .badge.bg-warning-soft {
    background-color: #ffc107 !important;
    color: #000 !important;
}

table.table.dataTable>tbody>tr.selected .badge.bg-blue-soft,
table.table.dataTable>tbody>tr.selected .badge.bg-primary-soft {
    background-color: #fff !important;
    color: #0d6efd !important;
    border: 1px solid #fff !important;
}

table.table.dataTable>tbody>tr.selected .badge.bg-gray-soft {
    background-color: #6c757d !important;
    color: #fff !important;
}

table.table.dataTable>tbody>tr a {
    transition: color 0ms !important;
}

/* =========================================
   Page Help Component Styles
   ========================================= */

/* Floating Help Button */
.page-help-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0061f2 0%, #6900c7 100%);
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 97, 242, 0.4);
    transition: all 0.3s ease;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-help-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 97, 242, 0.5);
}

.page-help-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 97, 242, 0.3), 0 4px 12px rgba(0, 97, 242, 0.4);
}

.page-help-btn:active {
    transform: scale(0.95);
}

/* Off-Canvas Panel */
.page-help-offcanvas {
    width: 420px !important;
    max-width: 90vw;
}

.page-help-offcanvas .offcanvas-header {
    padding: 1.25rem 1.5rem;
}

.page-help-offcanvas .offcanvas-body {
    padding: 1.5rem;
}

.page-help-offcanvas .accordion-button {
    font-weight: 500;
    padding: 0.875rem 1rem;
}

.page-help-offcanvas .accordion-button:not(.collapsed) {
    background-color: rgba(0, 97, 242, 0.05);
    color: #0061f2;
}

.page-help-offcanvas .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 97, 242, 0.2);
}

.page-help-offcanvas .accordion-body {
    padding: 1rem;
    background-color: #fafbfc;
}

.page-help-offcanvas .list-group-item {
    background: transparent;
    border: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.page-help-offcanvas kbd {
    background-color: #212529;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
}

/* Badge in accordion header */
.page-help-offcanvas .accordion-button .badge {
    font-size: 0.7rem;
    font-weight: 500;
}

/* =========================================
   DataTables chrome (search / length / info / paging)
   Lifted into card-header / card-footer slots — keep them inline so
   they don't waste vertical space.
   ========================================= */

div.dt-search,
div.dt-length {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    flex-wrap: nowrap;
}

/* Search: input only, the placeholder already says "Suchen…". */
div.dt-search > label {
    display: none !important;
}

div.dt-search > input[type="search"] {
    width: auto;
    min-width: 14rem;
    display: inline-block;
}

/* Length: <select> first, then the "… Einträge" label. */
div.dt-length > label {
    margin-bottom: 0;
    white-space: nowrap;
}

div.dt-length > select {
    width: auto;
    display: inline-block;
}

/* Info / paging: drop default margins so they line up vertically
   with neighbouring items in the card-header / card-footer. */
div.dt-info,
div.dt-paging {
    margin-bottom: 0;
}

div.dt-paging .pagination {
    margin-bottom: 0;
}

/* Table chrome:
   - column headers shouldn't wrap (looks ugly with two-line "Bestell-
     nummer", and DT's sort arrow needs a stable line height)
   - the last cell that holds the action buttons shouldn't wrap either
     (icon buttons stacking vertically when the column is narrow is
     much worse than a slightly wider column).
*/
.table > thead > tr > th {
    white-space: nowrap;
    /* SaaS-dashboard chrome: muted, uppercase. The bg matches
       .card-header / .card-footer below so thead visually fuses with
       the surrounding card chrome. */
    background-color: #f5f7fb;
    color: #69707a;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    border-top: 0;
    border-bottom: 1px solid #e3e6ec;
    vertical-align: middle;
}

/* DataTables sort arrows: keep them inline with the (smaller) heading
   text and dim the inactive direction. */
.table > thead > tr > th .dt-column-order {
    opacity: 0.5;
    margin-left: 0.35rem;
}

.table > thead > tr > th.dt-orderable-asc:hover,
.table > thead > tr > th.dt-orderable-desc:hover {
    color: #0061f2;
    cursor: pointer;
}

/* tfoot mirrors thead so the table feels balanced top-to-bottom. */
.table > tfoot > tr > th {
    background-color: #f5f7fb;
    color: #69707a;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid #e3e6ec;
    border-bottom: 0;
    white-space: nowrap;
}

/* Card chrome — header / footer share the same muted bg as the table
   thead / tfoot, so when card-body is p-0 (= flush table) the four
   pieces blend into one continuous strip. */
.card-header {
    background-color: #f5f7fb;
    border-bottom-color: #e3e6ec;
}

.card-footer {
    background-color: #f5f7fb;
    border-top-color: #e3e6ec;
}

/* Flush-table cards: drop the dividers between card-header → thead
   and tfoot → card-footer so there's no visible seam between them. */
.card:has(> .card-body.p-0 > .table-responsive) > .card-header {
    border-bottom: 0;
}

.card:has(> .card-body.p-0 > .table-responsive) > .card-footer {
    border-top: 0;
}

.card > .card-body.p-0 > .table-responsive > table > thead > tr > th {
    border-bottom: 0;
}

.card > .card-body.p-0 > .table-responsive > table > tfoot > tr > th {
    border-top: 0;
}

/* DataTables 2 wraps every layout row (including the table itself) in
   `<div class="row mt-2 …">`. Two issues:
   1) the mt-2 pushes the table off the lifted card-header chrome.
   2) Bootstrap `.row` adds negative gutters (margin-left/right) that
      poke beyond the card body and produce a phantom horizontal
      scrollbar even when the table itself fits.
   Zero out both — equivalent to slapping `g-0 mt-0` on every dt row. */
.dt-container .row {
    margin-top: 0 !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.table > tbody > tr > td:has(> .btn-datatable) {
    white-space: nowrap;
}

/* ----------------------------------------------------------------------
   Responsive Listen-Tabellen (opt-in via `.table-fit` auf <table>).

   Verwendung:
     <table class="table table-fit ...">
       <thead><tr>
         <th style="width: 13rem;">…</th>   <!-- feste Breite -->
         <th>…</th>                          <!-- teilt sich Restbreite -->
       </tr></thead>
       …
     </table>

   Cell-Helper auf <td> (oder <ul> in <td>):
     .cell-truncate       — einzelner Inhalt: Ellipsis bei Platzmangel
     .cell-truncate-list  — alle <li>-Kinder mit Ellipsis (für list-unstyled)
   Spalten ohne Helper wrappen normal.
   ---------------------------------------------------------------------- */
.table-fit { table-layout: fixed; width: 100%; }
.table-fit td { vertical-align: top; word-wrap: break-word; }

.cell-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cell-truncate-list > li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------
   Notiz-Zelle (ui.notes_cell): gesunde Maximalbreite + Umbruch, damit
   lange Notizen die Tabelle nicht sprengen, aber lesbar umbrechen.
   ---------------------------------------------------------------------- */
.notes-cell {
    max-width: 28rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}