/* 2026-05-23 audit follow-up: extracted from Views/Shared/_DataTablesAssets.cshtml
   inline <style> block. The partial loads on every authenticated page that uses
   DataTables (~most of the app), so the 197-line block was being shipped
   inline per-request instead of cached as a static asset. Same FP-008 pattern
   as the earlier landing-layout.css / login.css extractions.

   Selectors target the .dataTables_wrapper specificity bump that beats
   Material Dashboard's `.table > :not(caption) > * > *` (0,1,3) without
   needing !important on most rules. */

/* ============================================================
   Unified DataTables styling.
   Selectors mirror Material Dashboard's `.table > :not(caption) > * > *`
   shape with one extra class (`.dataTables_wrapper`) so they win
   specificity (0,2,4 vs Material's 0,1,3) without !important.
   ============================================================ */

/* Material applies tinted backgrounds via
   `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)`. That
   trick fights DataTables Responsive child rows and our pagination
   state highlighting. Reset both vars and the box-shadow inside
   any DataTables-managed table. */
.dataTables_wrapper table.dataTable {
    --bs-table-accent-bg: transparent;
    --bs-table-bg: transparent;
    border-collapse: collapse;
    width: 100% !important; /* DataTables sets inline width; keep it honest */
}

/* Uniform cell padding + vertical alignment across every table.
   Beats Material's `.table > :not(caption) > * > *` (0,1,3). */
.dataTables_wrapper table.dataTable > :not(caption) > * > * {
    padding: 0.75rem 0.75rem;
    vertical-align: middle;
    background-color: transparent;
    box-shadow: none;
}

/* Header */
.dataTables_wrapper table.dataTable > thead {
    vertical-align: middle;
}
.dataTables_wrapper table.dataTable > thead > tr > th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #7b809a);
    border-bottom: 1px solid var(--input-border, #e9ecef);
    background-color: transparent;
}

/* Striped + hover rows (no Material box-shadow tinting). Falls back
   to neutral grays when the theme variables aren't loaded. */
.dataTables_wrapper table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe, rgba(0, 0, 0, 0.025));
}
.dataTables_wrapper table.dataTable.table-hover > tbody > tr:hover > * {
    background-color: var(--bg-secondary, rgba(var(--md-gradient-start-rgb), 0.06));
}

/* Selected row support (DataTables Select extension or .selected class) */
.dataTables_wrapper table.dataTable > tbody > tr.selected > *,
.dataTables_wrapper table.dataTable > tbody > tr.table-active > * {
    background-color: rgba(var(--md-gradient-start-rgb), 0.15);
}

/* Search + length controls — match Bootstrap form-control idiom.
   Theme-aware via --input-bg/--input-border/--text-primary. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--input-border, #ced4da);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--input-bg, #fff);
    color: var(--text-primary, #344767);
    font-size: 0.875rem;
    line-height: 1.5;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--md-gradient-start);
    box-shadow: 0 0 0 0.2rem rgba(var(--md-gradient-start-rgb), 0.18);
}
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5rem;
    min-width: 12rem;
}
.dataTables_wrapper .dataTables_length select {
    margin: 0 0.4rem;
}

/* Info + length text */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--text-secondary, #6c757d);
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

/* Processing indicator */
.dataTables_wrapper .dataTables_processing {
    background: var(--input-bg, rgba(255, 255, 255, 0.92));
    color: var(--text-primary, #344767);
    border: 0;
    font-weight: 500;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Empty/zero state */
.dataTables_wrapper table.dataTable > tbody > tr.dataTables_empty > td {
    text-align: center;
    color: var(--text-secondary, #6c757d);
    padding: 2rem 0.75rem;
}

/* DataTables Pagination — Bootstrap 5 integration renders
   .paginate_button as <li.page-item><a.page-link>. We style the
   .paginate_button selector since both old and new themes apply it. */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.75rem;
}
.dataTables_wrapper .dataTables_paginate .pagination {
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: linear-gradient(195deg, var(--md-gradient-start) 0%, var(--md-gradient-end) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    margin: 0 2px !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 500 !important;
    transition: transform 0.15s ease-in, box-shadow 0.15s ease-in, background-color 0.15s ease-in, border-color 0.15s ease-in, color 0.15s ease-in !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: linear-gradient(195deg, #5a6fd6 0%, #6a4190 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 7px -1px rgba(var(--md-gradient-start-rgb), 0.4), 0 2px 4px -1px rgba(var(--md-gradient-start-rgb), 0.2) !important;
    transform: translateY(-1px) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(195deg, #4a5dc7 0%, #5a3a80 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 7px -1px rgba(var(--md-gradient-start-rgb), 0.5), 0 2px 4px -1px rgba(var(--md-gradient-start-rgb), 0.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Sort indicators */
.dataTables_wrapper table.dataTable > thead .sorting,
.dataTables_wrapper table.dataTable > thead .sorting_asc,
.dataTables_wrapper table.dataTable > thead .sorting_desc {
    cursor: pointer;
    position: relative;
}

/* Mobile: stack controls and ease pagination */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 0.5rem;
    }
    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0.25rem;
        min-width: 0;
        width: calc(100% - 5rem);
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 0.5rem;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    /* Responsive child-row layout */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th.child {
        padding: 0.625rem;
    }
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.child ul.dtr-details {
        padding-left: 0;
    }
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.child ul.dtr-details > li {
        border-bottom: 1px solid #dee2e6;
        padding: 0.5rem 0;
    }
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}