/* ── Athena DataTables overrides (DT 2.x + Bootstrap 4) ──────────
   Loads after dataTables.bootstrap4.min.css and custom.css.
   All DataTables-specific rules live here — not in custom.css.
   Class names updated for DataTables 2.x:
     dataTables_wrapper  → dt-container
     dataTables_paginate → dt-paging  (Bootstrap pagination)
     dataTables_length   → dt-length
     dataTables_filter   → dt-search
     sorting_asc/desc    → dt-ordering-asc / dt-ordering-desc
     sorting             → dt-orderable-asc / dt-orderable-desc
─────────────────────────────────────────────────────────────────── */

/* Striped rows — applied via DT's own tr.odd class so stripes survive
   row reordering (sort/page), unlike CSS :nth-child on .table-striped */
table.dataTable > tbody > tr.odd > td,
table.dataTable > tbody > tr.odd > th {
    background-color: rgba(0, 0, 0, 0.05);
}
table.dataTable > tbody > tr.even > td,
table.dataTable > tbody > tr.even > th {
    background-color: #fff;
}

/* Container — zero out Bootstrap row negative-margin bleed everywhere inside
   the DT container, including inside the card-body where the table row lives */
div.dt-container .row {
    margin-left: 0;
    margin-right: 0;
}
div.dt-container .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Table — full width, flush margin */
table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

/* table-responsive — side gutters when outside a container.
   No padding inside the DT card (card-body is p-0, table fills edge-to-edge). */
.table-responsive {
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;
}
.container .table-responsive,
.container-fluid .table-responsive,
.card-body .table-responsive {
    padding-left: 0;
    padding-right: 0;
}

/* Pagination — brand blue active page (outside card; card-footer has its own rules) */
div.dt-paging .pagination .page-item.active .page-link,
div.dt-paging .pagination .page-item.active .page-link:hover,
div.dt-paging .pagination .page-item.active .page-link:focus {
    background-color: #006dd9;
    border-color: #005fbd;
    color: #fff;
    box-shadow: none;
}
div.dt-paging .pagination .page-item:not(.active) .page-link:hover {
    color: #006dd9;
}
div.dt-paging .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 109, 217, 0.25);
}

/* Disable DT2 auto-alignment — numeric/date columns must not be force-right-aligned.
   Alignment is always set explicitly in the table markup or custom.css. */
table.dataTable thead th.dt-type-numeric,
table.dataTable thead th.dt-type-date,
table.dataTable tbody td.dt-type-numeric,
table.dataTable tbody td.dt-type-date {
    text-align: inherit;
}

/* ── All header cells: text always at bottom so icon-above columns stay consistent */
table.dataTable thead th {
    vertical-align: bottom;
}
table.dataTable thead th .dt-column-order {
    display: block;
    margin-bottom: 2px;
    line-height: 1;
    font-size: 0.85em;
}

/* Suppress DT2's built-in pseudo-element arrows — icons are injected via JS */
table.dataTable thead th .dt-column-order::before,
table.dataTable thead th .dt-column-order::after {
    content: none !important;
}

/* Headers are always dark — all sort icons white.
   Unsorted: dimmed; active sort: full white */
table.dataTable thead th .dt-column-order {
    color: rgba(255, 255, 255, 0.35);
}
table.dataTable thead th.dt-ordering-asc .dt-column-order,
table.dataTable thead th.dt-ordering-desc .dt-column-order {
    color: #fff;
}

/* ── DataTable card (JS-built: card-header / card-body / card-footer) ───── */

/* ── DataTable card colours ───────────────────────────────────── */
div.dt-container .card {
    background-color: #e9ecef;
    color: #343a40;
    border-radius: 0;
}
div.dt-container .card-header {
    background-color: #e9ecef;
    color: #343a40;
    border-radius: 0 !important;
}
div.dt-container .card-body {
    background-color: #fff;
    border-radius: 0 !important;
}
div.dt-container .card-footer {
    border-radius: 0 !important;
}

/* ── Card-header controls: flush, specific widths, inline height ── */
div.dt-container .card-header .dt-length,
div.dt-container .card-header .dt-search {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
}
div.dt-container .card-header .dt-length .input-group,
div.dt-container .card-header .dt-search .input-group {
    margin-bottom: 0;
}

/* All elements same height, square, no top/bottom border (card border is frame) */
div.dt-container .card-header .input-group-text,
div.dt-container .card-header .form-control,
div.dt-container .card-header select.form-control {
    height: 38px;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
    font-weight: 600;
    line-height: 1.5;
}

/* Specific widths for the form controls only */
div.dt-container .card-header select.form-control {
    width: 80px;
    flex: 0 0 80px;
}
div.dt-container .card-header input.form-control {
    width: 300px;
    flex: 0 0 300px;
}

/* Strip outer edges flush to card border */
div.dt-container .card-header .dt-length .input-group-prepend .input-group-text {
    border-left: none;
}
div.dt-container .card-header .dt-search .form-control {
    border-right: none;
}

/* Search prepend label — brand blue, bold */
div.dt-container .card-header .dt-search .input-group-text {
    color: #006dd9;
    font-weight: 700;
}

/* Search input text — brand blue, bold */
div.dt-container .card-header .dt-search input.form-control {
    color: #006dd9;
    font-weight: 700;
}

/* Search focus */
div.dt-search .form-control:focus {
    border-color: #80bdff;
    box-shadow: none;
    outline: none;
}

/* Card footer — slightly lighter than card header, dark text */
div.dt-container .card-footer {
    background-color: #f8f9fa;
    color: #343a40;
    border-top: 1px solid #ced4da;
}

/* Pagination in card-footer — standard brand blue on light background */
div.dt-container .card-footer .pagination .page-link {
    border-radius: 0;
}
div.dt-container .card-footer .pagination .page-item.active .page-link,
div.dt-container .card-footer .pagination .page-item.active .page-link:hover,
div.dt-container .card-footer .pagination .page-item.active .page-link:focus {
    background-color: #006dd9;
    border-color: #005fbd;
    color: #fff;
    box-shadow: none;
}
div.dt-container .card-footer .pagination .page-item:not(.active) .page-link:hover {
    color: #006dd9;
}
div.dt-container .card-footer .pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 109, 217, 0.25);
}