@import 'datatables.net-dt/css/dataTables.dataTables.min.css';
@import 'datatables.net-buttons-dt/css/buttons.dataTables.min.css';
@import 'datatables.net-colreorder-dt/css/colReorder.dataTables.min.css';
@import 'datatables.net-scroller-dt/css/scroller.dataTables.min.css';
@import 'datatables.net-columncontrol-dt/css/columnControl.dataTables.min.css';
@import 'datatables.net-fixedcolumns-dt/css/fixedColumns.dataTables.min.css';
@import 'datatables.net-fixedheader-dt/css/fixedHeader.dataTables.min.css';
@import 'datatables.net-keytable-dt/css/keyTable.dataTables.min.css';
@import 'datatables.net-rowgroup-dt/css/rowGroup.dataTables.min.css';
@import 'datatables.net-datetime/dist/dataTables.dateTime.min.css';
@import 'datatables.net-searchbuilder-dt/css/searchBuilder.dataTables.min.css';
@import 'datatables.net-searchpanes-dt/css/searchPanes.dataTables.min.css';
@import 'datatables.net-select-dt/css/select.dataTables.min.css';


div.dt-container {
    max-width: 100%;
    /* itables' regular table cells are transparent by design, so that they
       blend into the host page's own background (see the dark-mode
       fixed-columns fix, issue #564). That assumes the host's background
       (and text color) already matches the theme, which isn't always true:
       some hosts wrap outputs in their own container with a hard-coded
       background that itables has no control over (e.g. pydata-sphinx-theme
       -- used for itables.org itself -- paints a light "safety" background
       behind any cell output that isn't a plain `table.dataframe`, and
       ipywidgets' hosts commonly default widget containers to white).
       Painting our own background and text color here, right behind the
       table, wins over any such ancestor regardless of what triggered it
       (#426). DataTables' own dark-mode CSS does not set a text color on
       its own (it also relies on the host), hence --itables-dark-color.
    */
    background-color: var(--dt-html-background);
    color: var(--itables-dark-color, inherit);
}

div.dt-layout-table>div {
    overflow: auto;
    max-width: 100%;
}

.itables-dtype {
    font-weight: normal;
}

/* Fix length-menu label spacing (#553) */
div.dt-container .dt-length select.dt-input {
    margin-inline-end: 0.35em;
}

/* Sorting icons on the same side (#535) */
table.dataTable thead > tr > th div.dt-column-header,
table.dataTable thead > tr > td div.dt-column-header,
table.dataTable tfoot > tr > th div.dt-column-footer,
table.dataTable tfoot > tr > td div.dt-column-footer {
    flex-direction: row !important;
}

/* ColumnControl's dropdown search box ships with an empty search icon that
   is only meant to be hidden in the inline (column header) search box - the
   upstream CSS never hides it in the dropdown, so it shows up as a stray,
   unstyled icon between the type select and the input (#536) */
div.dtcc-dropdown div.dtcc-search > div div.dtcc-search-icon {
    display: none;
}

/* The dropdown's type-icon + type-select row is sized with zero pixel of
   slack: the icon's width and margin add up to exactly the 24px that
   --dtcc-search-input_flexCalc reserves for the select's flex-basis. Under
   a Bootstrap-themed page (e.g. Quarto), the universal `box-sizing:
   border-box` reset shifts sub-pixel rounding just enough to overflow that
   budget, which makes the row wrap: the icon, the select and the input
   each end up stacked on their own line instead of the icon and select
   sharing one row (#536). Reserve a little extra room so it always fits. */
:root {
    --dtcc-search-input_flexCalc: 28px;
}

/* Paired with div.dt-container's `color` above (#426): a light, high-contrast
   text color for dark mode, since DataTables' own dark-mode CSS does not set
   one (see the comment on div.dt-container). rgb(222, 226, 230) is the same
   pairing Bootstrap 5.3's dark mode uses with rgb(33, 37, 41), i.e.
   --dt-html-background's own dark value. */
:root.dark {
    --itables-dark-color: rgb(222, 226, 230);
}

/* The animated loading logo (logo/loading.svg) hard-codes a dark navy ink
   on a transparent background, which nearly disappears on a dark page
   (#426). It's embedded inline (unlike the other logo files, which are
   loaded as standalone <img>s and can't reach these variables), so it can
   use them directly via var(--itables-logo-ink)/var(--itables-logo-paper)
   instead. */
:root {
    --itables-logo-ink: #1a1366;
    --itables-logo-paper: #d9d7fc;
}
:root.dark {
    --itables-logo-ink: #e4e2ff;
    --itables-logo-paper: #4a4470;
}