/*
* Project table wrapper — tokens & shell
*/
div.dataTables_wrapper {
  color: var(--sc-brand-blue);
  font-family: "Work Sans", sans-serif;
  max-width: 100%;
  /* Don’t clip inner overflow-x; lets the table grid scroll horizontally in one DOM table */
  overflow: visible;
  width: 100%;
}

/*
* DataTables footer chrome — length, info, paginate (Figma 2121:36031)
*/
div.dataTables_info {
  color: var(--sc-table-muted);
  font-size: 12px;
  font-weight: 500;
}

/*
* Single-row footer: "Show X elements" left, segmented pagination right
*/
div.dataTables_wrapper .sc-table-footer-row {
  align-items: center;
  border-top: 1px solid #f8f8f8;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: 0;
  padding: 10px 20px;
  width: 100%;
}

div.dataTables_wrapper .sc-table-footer-row > [class*="col-"] {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

div.dataTables_wrapper .sc-table-footer-row .dataTables_length,
div.dataTables_wrapper .sc-table-footer-row .dataTables_paginate {
  float: none;
  margin: 0 !important;
  padding: 0;
  text-align: inherit;
}

div.dataTables_length {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  margin-top: 0 !important;
}

div.dataTables_length label {
  align-items: center;
  color: var(--sc-brand-blue);
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  gap: 10px;
  line-height: 18px;
  margin: 0;
}

div.dataTables_paginate {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  margin-top: 0;
}

div.dataTables_wrapper .dataTables_paginate ul.pagination {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: flex-end;
  margin-bottom: 0;
}

div.dataTables_wrapper .dataTables_paginate .page-item .page-link {
  align-items: center;
  background-color: var(--sc-white-normal);
  border: 1px solid #d1d5dc;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--sc-brand-blue);
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  justify-content: center;
  line-height: 1;
  margin-left: 0 !important;
  min-height: 31px;
  min-width: 33px;
  padding: 8px 10px;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

div.dataTables_wrapper .dataTables_paginate .page-item:not(:first-child) .page-link {
  border-left: 0;
}

div.dataTables_wrapper .dataTables_paginate .page-item:first-child .page-link {
  border-radius: 4px 0 0 4px;
}

div.dataTables_wrapper .dataTables_paginate .page-item:last-child .page-link {
  border-radius: 0 4px 4px 0;
}

div.dataTables_wrapper .dataTables_paginate .page-link:focus-visible {
  box-shadow: 0 0 0 3px rgb(12 10 62 / 0.12);
  outline: none;
  z-index: 1;
}

div.dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
  background-color: var(--sc-gray-light, #f9fafc);
  border-color: #d1d5dc;
  color: var(--sc-brand-blue);
}

div.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background-color: var(--sc-brand-blue);
  border-color: var(--sc-brand-blue);
  color: var(--sc-white-normal);
  font-weight: 500;
}

div.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  background-color: var(--sc-white-normal) !important;
  border-color: #d1d5dc !important;
  color: rgb(12 10 62 / 0.3) !important;
  opacity: 1;
}

div.dataTables_wrapper .dataTables_paginate .page-item.previous.disabled .page-link,
div.dataTables_wrapper .dataTables_paginate .page-item.next.disabled .page-link {
  opacity: 0.2;
}

div.dataTables_wrapper .dataTables_paginate .page-item.previous .page-link::after,
div.dataTables_wrapper .dataTables_paginate .page-item.next .page-link::after {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 7px;
  margin-top: 1px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1.5L6.5 4.5L3 7.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 9px;
}

div.dataTables_wrapper .dataTables_paginate .page-item.previous .page-link::after {
  order: 2;
  transform: scaleX(-1);
}

div.dataTables_wrapper .dataTables_length select {
  appearance: none;
  background-color: var(--sc-white-normal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 3L4.5 6.5L7.5 3' fill='none' stroke='%230C0A3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 10px center;
  background-repeat: no-repeat;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  color: var(--sc-brand-blue);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 10px 8px 28px;
}

/*
* Toolbar row — search + “New” share one flex row & cross-axis alignment
*/
div.dataTables_wrapper .sc-toolbox-toolbar-search-row {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px 0 !important;
  padding-top: 12px;
  width: 100%;
}

div.dataTables_wrapper .sc-toolbox-toolbar-search-row .dataTables_filter {
  border-top: 0;
  flex: 1 1 220px;
  margin: 0 !important;
  min-width: 0;
  padding-top: 0 !important;
  width: auto !important;
}

/*
* “New” link — Figma listing CTA (2110:35642): teal tile + dark border
*/
div.dataTables_wrapper .sc-toolbox-new-btn {
  align-items: center;
  background-color: var(--sc-brand-mint);
  border: 1px solid var(--sc-brand-blue);
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--sc-brand-blue);
  display: inline-flex;
  flex-shrink: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  justify-content: center;
  line-height: normal;
  min-height: 46px;
  padding: 7px 19px;
  text-decoration: none;
  white-space: nowrap;
}

div.dataTables_wrapper .sc-toolbox-new-btn:hover {
  background-color: #d2ede6;
  color: var(--sc-brand-blue);
}

div.dataTables_wrapper .sc-toolbox-new-btn:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

div.dataTables_wrapper .sc-toolbox-new-btn .fa-plus {
  font-size: 12px;
}

div.dataTables_wrapper .sc-toolbox-new-btn sc-icons {
  --sc-icon-color: var(--sc-brand-blue);
  flex-shrink: 0;
}

/*
* Search field — Figma 2110:35642 / 2110:35663 (grid label + embedded search icon)
*/
div.dataTables_wrapper .dataTables_filter label {
  align-items: stretch;
  box-sizing: border-box;
  column-gap: 0;
  display: grid !important;
  /* Collapse DataTables’ default “Search:” text node; input/::before set their own sizes */
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin: 0;
  max-width: 100%;
  padding: 0;
  row-gap: 0;
  text-align: left !important;
  white-space: normal !important;
  width: 100%;
}

div.dataTables_wrapper .dataTables_filter label::before {
  align-self: center;
  color: rgb(12 10 62 / 0.45);
  content: "\f002";
  display: block;
  font-family: "Font Awesome 6 Free";
  font-size: 16px;
  font-weight: 900;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  line-height: 1;
  margin-inline-start: 15px;
  pointer-events: none;
  transform: translateY(-0.5px);
  /* Optical center vs. fa glyph */
  z-index: 2;
  -webkit-font-smoothing: antialiased;
}

div.dataTables_wrapper .dataTables_filter input[type="search"] {
  appearance: none;
  background-color: rgb(255 255 255 / 0.5);
  background-image: none;
  border: 1px solid #d1d5dc;
  border-radius: 10px;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--sc-brand-blue);
  display: block !important;
  font-family: "Work Sans", sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  grid-column: 1;
  grid-row: 1;
  height: 46px;
  line-height: 1.2857;
  margin: 0 !important;
  max-width: 100%;
  min-height: 46px;
  padding: 11px 16px 11px 42px !important;
  width: 100% !important;
}

div.dataTables_wrapper .dataTables_filter input[type="search"]::placeholder {
  color: rgb(10 10 10 / 0.5);
}

div.dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  background-color: var(--sc-white-normal);
  border-color: rgb(12 10 62 / 0.35);
  box-shadow: 0 0 0 2px rgb(12 10 62 / 0.08);
  outline: none;
}

/*
* Export toolbar row — CSV/PDF actions left, optional filters right (Figma 2110:35664)
*/
div.dataTables_wrapper .sc-table-export-toolbar-row {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 5px;
  width: 100%;
}

div.dataTables_wrapper .sc-table-export-toolbar-row .dt-buttons {
  flex: 1 1 auto;
  margin-bottom: 0;
}

div.dataTables_wrapper .sc-table-timeframe-filter {
  flex-shrink: 0;
  margin: 0;
  max-width: 100%;
}

div.dataTables_wrapper .sc-table-timeframe-filter__toggle {
  align-items: center;
  background-color: var(--sc-white-normal);
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  box-shadow: none;
  color: var(--sc-brand-blue);
  display: inline-flex;
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  justify-content: center;
  line-height: normal;
  min-height: 0;
  padding: 8px 10px;
  width: 185px;
}

div.dataTables_wrapper .sc-table-timeframe-filter__toggle:hover,
div.dataTables_wrapper .sc-table-timeframe-filter__toggle:focus,
div.dataTables_wrapper .sc-table-timeframe-filter__toggle:active,
div.dataTables_wrapper .sc-table-timeframe-filter__toggle.show {
  background-color: var(--sc-white-normal);
  border-color: #d1d5dc;
  color: var(--sc-brand-blue);
}

div.dataTables_wrapper .sc-table-timeframe-filter__toggle::after {
  display: none;
}

div.dataTables_wrapper .sc-table-timeframe-filter__toggle sc-icons {
  --sc-icon-color: var(--sc-brand-blue);
  flex-shrink: 0;
  height: 15px;
  width: 20px;
}

/*
 * Export controls — CSV / PDF sit beside sc-button outline actions
 * (Download selected, Settings, Filter). Mirror sc-button--outline + soft shape
 * so native DataTables buttons match the design-system control.
 */
.dt-buttons {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
  padding-bottom: 2px;
}

.dt-buttons.btn-group {
  gap: 8px;
}

/*
 * Match DataTables' `div.dt-buttons>.dt-button` specificity and wipe its
 * default grey linear-gradient (`background: linear-gradient(...)`) — setting
 * only `background-color` leaves the gradient image painting over white.
 */
div.dt-buttons > .btn,
div.dt-buttons > .dt-button {
  appearance: none;
  background: var(--sc-white-normal);
  background-image: none;
  border: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha30, rgb(12 10 62 / 0.3));
  border-radius: var(--sc-border-radius-xl, 20px);
  box-shadow: none;
  color: var(--sc-brand-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  filter: none;
  font-family: var(--sc-font-family-body, "Work Sans", sans-serif);
  font-size: var(--sc-font-size-label, 14px);
  font-weight: var(--sc-font-weight-regular, 400);
  gap: 5px;
  height: auto;
  justify-content: center;
  letter-spacing: 0;
  line-height: 18px;
  margin: 0;
  min-height: 44px;
  padding: 7px 18px 7px 15px;
  text-transform: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.dt-buttons.btn-group > .btn,
.dt-buttons.btn-group > .dt-button {
  border-radius: var(--sc-border-radius-xl, 20px);
}

/*
 * Hover/focus/active need to out-specify DataTables' own
 * `div.dt-buttons>.dt-button:hover:not(.disabled)` gradient rules.
 * Interaction matches sc-button (opacity, not fill change).
 */
div.dt-buttons > .btn:hover:not(.disabled),
div.dt-buttons > .dt-button:hover:not(.disabled) {
  background: var(--sc-white-normal);
  background-image: none;
  border: var(--sc-border-width-thin, 1px) solid var(--sc-blue-alpha30, rgb(12 10 62 / 0.3));
  box-shadow: none;
  color: var(--sc-brand-blue);
  filter: none;
  opacity: 0.92;
}

div.dt-buttons > .btn:focus:not(.disabled),
div.dt-buttons > .dt-button:focus:not(.disabled),
div.dt-buttons > .btn:focus-visible,
div.dt-buttons > .dt-button:focus-visible {
  outline: 2px solid rgb(12 10 62 / 0.35);
  outline-offset: 2px;
}

div.dt-buttons > .btn:active:not(.disabled),
div.dt-buttons > .dt-button:active:not(.disabled) {
  background: var(--sc-white-normal);
  background-image: none;
  box-shadow: none;
  filter: none;
  opacity: 0.85;
}

div.dt-buttons > .btn span,
div.dt-buttons > .dt-button span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  line-height: 18px;
}

div.dt-buttons > .btn sc-icons,
div.dt-buttons > .dt-button sc-icons {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 15px;
  justify-content: center;
  overflow: hidden;
  width: 20px;
}

div.dt-buttons > .btn .fa,
div.dt-buttons > .dt-button .fa {
  color: var(--sc-brand-blue);
  font-size: 14px;
  margin: 0 !important;
  width: 1em;
}

/*
* Project table — horizontal scroll panel (classic UI uses DataTables scrollX instead)
*/
div.dataTables_wrapper .sc-table-panel {
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sc-table-border);
  border-radius: 10px;
  overflow-x: auto;
}

div.dataTables_wrapper .sc-table-panel table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 !important;
  width: 100%;
}

div.dataTables_wrapper .sc-table-panel table thead th {
  background: var(--sc-table-header-bg);
  border-bottom: 1px solid var(--sc-table-border);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  box-sizing: border-box;
  color: var(--sc-table-muted);
  font-family: "Work Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  height: 43px;
  letter-spacing: normal;
  line-height: 18px;
  padding: 13px 20px 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* Checkbox column — centered; vertical divider after checkbox */
/* Not .border-end-0 means it's not a checkbox column */
div.dataTables_wrapper .sc-table-panel table thead th:first-child:not(.border-end-0),
div.dataTables_wrapper .sc-table-panel table tbody td:first-child:not(.border-end-0) {
  border-right: 1px solid var(--sc-table-border) !important;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

/* Sort widgets — gutter for DataTables glyphs */
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_asc,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_desc,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_asc_disabled,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_desc_disabled {
  padding-right: 26px;
}

/* Sort chevrons — muted default; stronger when active */
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting:before,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting:after,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_asc:before,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_asc:after,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_desc:before,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_desc:after,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_asc_disabled:before,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_asc_disabled:after,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_desc_disabled:before,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_desc_disabled:after {
  color: var(--sc-table-subtle);
  opacity: 0.45;
}

div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_asc:before,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_desc:after {
  opacity: 0.72;
}

div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_disabled:before,
div.dataTables_wrapper .sc-table-panel table thead>tr>th.sorting_disabled:after {
  display: none !important;
}

div.dataTables_wrapper .sc-table-panel table tbody td {
  background-color: var(--sc-white-normal);
  color: var(--sc-brand-blue);
  font-size: 14px;
  font-weight: 400;
  padding: 14px 20px;
  vertical-align: middle;
}

/*
* Flat white body rows — intentionally overrides Bootstrap `table-striped` and legacy
* `table.css` alternating backgrounds. Figma UI V2 tables use uniform white rows with
* dividers only (Webapp---New table specs; matches sc-data-table).
*
* Bootstrap 5 stripes via inset box-shadow (`--bs-table-bg-type`), not background-color,
* so both must be reset. Scoped to all UI V2 DataTables wrappers (tables.css loads only
* when UI V2 is active for the page).
*/
div.dataTables_wrapper table.datatable > tbody > tr,
div.dataTables_wrapper table.datatable > tbody > tr > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-type: transparent;
  --bs-table-bg-state: transparent;
  --bs-table-striped-bg: transparent;
  background-color: var(--sc-white-normal) !important;
  box-shadow: none !important;
}

div.dataTables_wrapper table.datatable.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-type: transparent;
  --bs-table-bg-state: transparent;
  --bs-table-hover-bg: var(--sc-table-header-bg);
  background-color: var(--sc-table-header-bg) !important;
  box-shadow: none !important;
}

/*
* Project’s table — bulk checkbox & row actions
*/
div.dataTables_wrapper .sc-table-panel table input[type="checkbox"] {
  appearance: none;
  background: var(--sc-white-normal);
  border: 1px solid var(--sc-brand-blue);
  border-radius: 3px;
  height: 12px;
  margin: 0;
  position: relative;
  vertical-align: middle;
  width: 12px;
}

/*
* Checked / indeterminate states. The box fills with brand blue and carries a white
* glyph: a tick when checked, a bar when the select-all is partially checked. An inner
* square was used for both, which read as "not a checkbox" and made a partial select-all
* indistinguishable from a full one (issue #6213).
*/
div.dataTables_wrapper .sc-table-panel table input[type="checkbox"]:checked,
div.dataTables_wrapper .sc-table-panel table input[type="checkbox"]:indeterminate {
  background: var(--sc-brand-blue);
  border-color: var(--sc-brand-blue);
}

div.dataTables_wrapper .sc-table-panel table input[type="checkbox"]:checked::after {
  border: solid var(--sc-white-normal);
  border-width: 0 1.5px 1.5px 0;
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 3px;
}

div.dataTables_wrapper .sc-table-panel table input[type="checkbox"]:indeterminate::after {
  background: var(--sc-white-normal);
  border-radius: 1px;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
}

/*
* Table row actions — options dropdown (document overview, etc.)
*/
div.dataTables_wrapper .sc-table-panel table tbody td.sc-table-actions-cell {
  overflow: visible;
  position: relative;
  width: 72px;
}

div.dataTables_wrapper .sc-table-panel .sc-table-row-actions-menu__item sc-icons {
  flex-shrink: 0;
  --sc-icon-color: var(--sc-brand-blue);
}