/* =========================================================
   Transparent theme - DataTables 2.x

   Styles the DataTables controls: the length and search inputs,
   the info line, paging, and the sorting indicator.

   Intended usage:
   - Load DataTables 2.x CSS first.
   - Load this file after it.
   - Load your table/ruleset CSS either before or after this.

   Main design goal - stay out of the table's way:
   - No background colours on the table, rows or cells, so a
     ruleset's own colours (and the page behind them) show through
     and DataTables' default grey header does not.
   - No borders. Borders are the author's business; this theme used
     to soften every cell border, which quietly overrode whatever
     the wizard had been told.
   - No font family, and no fixed text colour on the table: the
     table inherits from the page.
   - Nothing is faded. The sorting arrows used to be drawn at .55,
     and the one not in force at .25, which on many headers left
     them all but invisible. Every arrow here is fully opaque and
     takes the header's own colour; which way a column is sorted is
     shown by which arrow is drawn, not by fading one. The single
     opacity declaration left in the file sets 1, to cancel the .125
     DataTables applies - deleting it would bring the fading back.
   ========================================================= */


/* =========================================================
   Theme variables

   Only the controls use these. Nothing here is applied to the
   table itself.
   ========================================================= */

.dt-container {
  --dt-text-soft: #374151;
  --dt-text-muted: #6b7280;

  --dt-surface-soft: rgba(255, 255, 255, .36);
  --dt-surface-soft-hover: rgba(255, 255, 255, .58);
  --dt-surface-soft-active: rgba(255, 255, 255, .72);

  --dt-border: rgba(107, 114, 128, .38);

  --dt-primary: #2563eb;
  --dt-primary-ring: rgba(37, 99, 235, .18);
  --dt-primary-soft: rgba(37, 99, 235, .12);

  --dt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --dt-shadow-md: 0 8px 20px rgba(15, 23, 42, .06);
}


/* =========================================================
   Layout rows/cells
   ========================================================= */

.dt-layout-row {
  gap: 1rem;
  align-items: center;
  margin: .75rem 0;
}

.dt-layout-row.dt-layout-table {
  margin: 0;
}

.dt-layout-row:not(.dt-layout-table) {
  padding: .2rem 0;
}

.dt-layout-cell {
  min-width: 0;
}

.dt-layout-start,
.dt-layout-end {
  display: flex;
  align-items: center;
}


/* =========================================================
   Table neutrality

   Backgrounds only, and only to clear them. DataTables paints a
   grey behind the header; an author who has not asked for a
   header colour should not get one. Anything a ruleset does set
   is more specific than these rules and still wins.

   Deliberately absent: border-color, border-width, font-family,
   color. Those belong to the ruleset.
   ========================================================= */

.dt-container table.dataTable {
  background: transparent;
}

.dt-container table.dataTable thead th,
.dt-container table.dataTable thead td,
.dt-container table.dataTable tbody th,
.dt-container table.dataTable tbody td,
.dt-container table.dataTable tfoot th,
.dt-container table.dataTable tfoot td {
  background-color: transparent;
}


/* =========================================================
   Length/search controls
   ========================================================= */

.dt-length,
.dt-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.dt-length label,
.dt-search label {
  color: var(--dt-text-soft);
  font-size: .875rem;
  font-weight: 600;
}

.dt-length select.dt-input,
.dt-search input.dt-input {
  min-height: 40px;
  color: inherit;
  background-color: var(--dt-surface-soft);
  border: 1px solid var(--dt-border);
  border-radius: 12px;
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1.2;
  box-shadow: var(--dt-shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.dt-search input.dt-input {
  min-width: 200px;
}

.dt-search input.dt-input::placeholder {
  color: var(--dt-text-muted);
}

.dt-length select.dt-input:hover,
.dt-search input.dt-input:hover {
  background-color: var(--dt-surface-soft-hover);
  border-color: rgba(75, 85, 99, .55);
}

.dt-length select.dt-input:focus,
.dt-search input.dt-input:focus {
  outline: none;
  background-color: var(--dt-surface-soft-active);
  border-color: var(--dt-primary);
  box-shadow: 0 0 0 3px var(--dt-primary-ring);
}

/* Custom select arrow */
.dt-length select.dt-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
}


/* =========================================================
   Info text
   ========================================================= */

.dt-info {
  color: var(--dt-text-soft);
  font-size: .875rem;
  font-weight: 500;
}


/* =========================================================
   Paging
   ========================================================= */

.dt-paging {
  display: flex;
  align-items: center;
}

.dt-paging nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--dt-border);
  border-radius: 14px;
  background: var(--dt-surface-soft);
  box-shadow: var(--dt-shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dt-paging-button,
.dt-paging nav a.dt-paging-button,
.dt-paging nav button.dt-paging-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  color: var(--dt-text-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}

.dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--dt-surface-soft-hover);
  border-color: var(--dt-border);
  color: inherit;
  box-shadow: var(--dt-shadow-md);
  transform: translateY(-1px);
}

.dt-paging-button:active:not(.disabled):not(.current) {
  transform: translateY(0);
  box-shadow: none;
}

.dt-paging-button.current {
  background: var(--dt-primary-soft);
  border-color: rgba(37, 99, 235, .45);
  color: var(--dt-primary);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
  cursor: default;
}

/* Greyed rather than faded - no opacity anywhere in this theme. */
.dt-paging-button.disabled {
  color: var(--dt-text-muted);
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.dt-paging-button:focus-visible {
  outline: none;
  border-color: var(--dt-primary);
  box-shadow: 0 0 0 3px var(--dt-primary-ring);
}

.dt-paging-button.first,
.dt-paging-button.previous,
.dt-paging-button.next,
.dt-paging-button.last {
  padding: 0 14px;
  min-width: 52px;
}

.dt-paging nav a.dt-paging-button {
  color: inherit !important;
}


/* =========================================================
   DataTables 2.x sorting arrows

   currentColor throughout, so the arrows are whatever colour the
   header text is and stay readable on any header the author
   chooses. A sortable column shows both arrows; a sorted one
   shows only the direction in force. Nothing is faded.
   ========================================================= */

.dt-container table.dataTable thead th,
.dt-container table.dataTable thead td {
  position: relative;
}

.dt-container table.dataTable thead .dt-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
}

.dt-container table.dataTable thead .dt-column-title {
  flex: 1 1 auto;
  min-width: 0;
}

.dt-container table.dataTable thead .dt-column-order {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 1rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
}

/* Sortable, not currently sorted: both arrows. */
.dt-container table.dataTable thead th .dt-column-order::before,
.dt-container table.dataTable thead th .dt-column-order::after,
.dt-container table.dataTable thead td .dt-column-order::before,
.dt-container table.dataTable thead td .dt-column-order::after {
  position: absolute;
  right: 0;
  font-size: .65rem;
  line-height: 1;
  color: currentColor;
  /*
     The one opacity in this file, and it is here to cancel one: DataTables
     draws these at .125, which is why the arrows were all but invisible.
     Removing the theme's old .55 alone would have left that .125 in force.

     !important because DataTables qualifies its own rule with the
     orderable class (table.dataTable thead > tr > th.dt-orderable-asc ...),
     which is a shade more specific than anything sensible here. A ruleset
     that sets its own arrow opacity is more specific still, so this does
     not stop the wizard's arrow colours from working.
  */
  opacity: 1 !important;
}

.dt-container table.dataTable thead th .dt-column-order::before,
.dt-container table.dataTable thead td .dt-column-order::before {
  content: "\25B2";
  top: .05rem;
}

.dt-container table.dataTable thead th .dt-column-order::after,
.dt-container table.dataTable thead td .dt-column-order::after {
  content: "\25BC";
  bottom: .05rem;
}

/*
   Sorted: only the arrow for the direction in force. Centred,
   since it is now on its own.
*/
.dt-container table.dataTable thead th.dt-ordering-asc .dt-column-order::after,
.dt-container table.dataTable thead td.dt-ordering-asc .dt-column-order::after,
.dt-container table.dataTable thead th.dt-ordering-desc .dt-column-order::before,
.dt-container table.dataTable thead td.dt-ordering-desc .dt-column-order::before {
  content: none;
}

.dt-container table.dataTable thead th.dt-ordering-asc .dt-column-order::before,
.dt-container table.dataTable thead td.dt-ordering-asc .dt-column-order::before,
.dt-container table.dataTable thead th.dt-ordering-desc .dt-column-order::after,
.dt-container table.dataTable thead td.dt-ordering-desc .dt-column-order::after {
  top: auto;
  bottom: auto;
}

/* Cursor and focus feedback */
.dt-container table.dataTable thead th.dt-orderable-asc,
.dt-container table.dataTable thead th.dt-orderable-desc,
.dt-container table.dataTable thead td.dt-orderable-asc,
.dt-container table.dataTable thead td.dt-orderable-desc {
  cursor: pointer;
}

.dt-container table.dataTable thead .dt-column-order:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--dt-primary-ring);
}


/* =========================================================
   Empty footer cleanup
   ========================================================= */

.dt-container.dt-empty-footer table.dataTable tfoot {
  display: none;
}


/* =========================================================
   Small-screen behavior
   ========================================================= */

@media (max-width: 767px) {
  .dt-layout-row {
    gap: .75rem;
  }

  .dt-layout-start,
  .dt-layout-end {
    width: 100%;
  }

  .dt-length,
  .dt-search,
  .dt-paging {
    width: 100%;
  }

  .dt-search input.dt-input {
    width: 100%;
    min-width: 0;
  }

  .dt-paging nav {
    flex-wrap: wrap;
  }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .dt-length select.dt-input,
  .dt-search input.dt-input,
  .dt-paging-button {
    transition: none !important;
  }
}