/*
* 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;
}

div.dataTables_wrapper .sc-toolbox-toolbar-search-row .sc-toolbox-toolbar-search-info {
  align-items: center;
  color: var(--sc-table-subtle);
  display: inline-flex;
  flex-shrink: 0;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  gap: 8px;
  line-height: 22px;
  text-align: right;
  white-space: nowrap;
}

div.dataTables_wrapper .sc-toolbox-toolbar-search-row .sc-toolbox-toolbar-search-info .datatable-info-text {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

div.dataTables_wrapper .sc-toolbox-toolbar-actions-row {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: 0 0 10px 0;
  width: 100%;
}

div.dataTables_wrapper .sc-toolbox-toolbar-actions-end {
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

/* Figma 3996:24327 — bar fills the row up to Invite User / Bulk Invite. */
div.dataTables_wrapper .sc-toolbox-toolbar-actions-row .project-users-status-filter {
  align-items: center;
  background-color: rgb(255 255 255 / 0.3);
  border: 1px solid var(--sc-table-border, #e5e7eb);
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

/* Figma 3996:24328 — mint sc-category pills, 5px gap, not a joined btn-group. */
div.dataTables_wrapper .sc-toolbox-toolbar-actions-row .project-users-status-filter__pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Figma 3996:24335 — Filter/Sort cluster on the right of the status bar. */
div.dataTables_wrapper .sc-toolbox-toolbar-actions-row .project-users-status-filter__actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 5px;
  justify-content: flex-end;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  div.dataTables_wrapper .sc-toolbox-toolbar-search-row .sc-toolbox-toolbar-search-info {
    text-align: left;
    white-space: normal;
  }
}

/*
* “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;
}

/* Icon-only “New” on small screens; aria-label on the link keeps the name. */
@media (max-width: 767.98px) {
  div.dataTables_wrapper .sc-toolbox-new-btn {
    gap: 0;
    min-width: 46px;
    padding-left: 14px;
    padding-right: 14px;
  }

  div.dataTables_wrapper .sc-toolbox-new-btn > span {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/*
* 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;
  min-width: 0;
}

div.dataTables_wrapper .sc-table-export-toolbar-extras {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  div.dataTables_wrapper .sc-table-export-toolbar-row {
    align-items: center;
    flex-wrap: nowrap;
  }

  div.dataTables_wrapper .sc-table-export-toolbar-extras {
    flex-wrap: nowrap;
  }
}

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.disabled,
div.dt-buttons > .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

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

/*
 * A button waiting on the server (the table PDF report). DataTables centres its
 * spinner over the label and dims the label by colour, which the brand colour
 * above overrides, so fade the label out from under the spinner here.
 */
div.dt-buttons > .dt-button.processing > span {
  opacity: 0.25;
}

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;
}

/*
 * Compact export controls — cards whose toolbar is built from Bootstrap `-sm`
 * controls (home Projects/Companies, Compliance Alerts). There the 44px export
 * button towered over the 31px search field and filter pills next to it, so
 * scale CSV/PDF down to the same `-sm` metrics and drop the spacing the tall
 * variant needs, leaving one aligned row.
 */
.dt-search-actions-wrapper .dt-buttons,
.dt-download-buttons-placeholder .dt-buttons {
  gap: 5px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.dt-search-actions-wrapper .dt-buttons > .btn,
.dt-search-actions-wrapper .dt-buttons > .dt-button,
.dt-download-buttons-placeholder .dt-buttons > .btn,
.dt-download-buttons-placeholder .dt-buttons > .dt-button {
  font-size: 12px;
  gap: 4px;
  line-height: 1.5;
  min-height: 31px;
  padding: 4px 12px;
}

.dt-search-actions-wrapper .dt-buttons > .btn span,
.dt-search-actions-wrapper .dt-buttons > .dt-button span,
.dt-download-buttons-placeholder .dt-buttons > .btn span,
.dt-download-buttons-placeholder .dt-buttons > .dt-button span {
  gap: 4px;
  line-height: 1.5;
}

.dt-search-actions-wrapper .dt-buttons > .btn sc-icons,
.dt-search-actions-wrapper .dt-buttons > .dt-button sc-icons,
.dt-download-buttons-placeholder .dt-buttons > .btn sc-icons,
.dt-download-buttons-placeholder .dt-buttons > .dt-button sc-icons {
  height: 12px;
  width: 16px;
}

.dt-search-actions-wrapper .dt-buttons > .btn .fa,
.dt-search-actions-wrapper .dt-buttons > .dt-button .fa,
.dt-download-buttons-placeholder .dt-buttons > .btn .fa,
.dt-download-buttons-placeholder .dt-buttons > .dt-button .fa {
  font-size: 12px;
}

/*
* 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;
  /* Keep horizontal scrollbar permanently visible when content overflows
     (not hover-only overlay). Match sc-multi-select-chips: do NOT set
     scrollbar-width/scrollbar-color — those force Chromium's thin overlay. */
}

div.dataTables_wrapper .sc-table-panel::-webkit-scrollbar {
  height: 10px;
}

div.dataTables_wrapper .sc-table-panel::-webkit-scrollbar-track {
  background: transparent;
}

div.dataTables_wrapper .sc-table-panel::-webkit-scrollbar-thumb {
  background: rgba(12, 10, 62, 0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

div.dataTables_wrapper .sc-table-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(12, 10, 62, 0.45);
  background-clip: padding-box;
}

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;
}

/*
* End-user attention rows use `sc-table-row--attention` / `--warning` (left accent
* below). Bootstrap `table-*` washes remain for out-of-scope surfaces (admin, billing
* edit chrome, diagnostics). Those variants opt out of the flat-white rows above so
* `--bs-table-bg` is not erased by `!important` (issue #6276).
*
* Listing every Bootstrap variant (not just the ones in use today) keeps a future
* `table-success` row from silently losing its colour the same way. The variant class on
* the `tr` outranks the flat-white selector, so these win at equal `!important` weight.
*/
div.dataTables_wrapper
  table.datatable
  > tbody
  > tr:is(
    .table-primary,
    .table-secondary,
    .table-success,
    .table-danger,
    .table-warning,
    .table-info,
    .table-light,
    .table-dark,
    .table-active
  ),
div.dataTables_wrapper
  table.datatable
  > tbody
  > tr:is(
    .table-primary,
    .table-secondary,
    .table-success,
    .table-danger,
    .table-warning,
    .table-info,
    .table-light,
    .table-dark,
    .table-active
  )
  > * {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
}

/* Hover keeps the status tint (a shade darker) instead of reverting to the neutral row hover. */
div.dataTables_wrapper
  table.datatable.table-hover
  > tbody
  > tr:is(
    .table-primary,
    .table-secondary,
    .table-success,
    .table-danger,
    .table-warning,
    .table-info,
    .table-light,
    .table-dark,
    .table-active
  ):hover
  > * {
  background-color: var(--bs-table-hover-bg) !important;
  color: var(--bs-table-hover-color) !important;
}

/*
* UI v2 attention / warning rows — left accent only (no full-row wash). Badge
* carries the status label; border matches sc-badge--negative / --warning text
* tones. Flat-white body rules still apply; we only add the inset accent and
* preserve it on hover (neutral row hover otherwise).
*/
div.dataTables_wrapper table.datatable > tbody > tr.sc-table-row--attention > td:first-child,
div.dataTables_wrapper
  table.datatable.table-hover
  > tbody
  > tr.sc-table-row--attention:hover
  > td:first-child {
  box-shadow: inset 4px 0 0 #a61300 !important;
}

div.dataTables_wrapper table.datatable > tbody > tr.sc-table-row--warning > td:first-child,
div.dataTables_wrapper
  table.datatable.table-hover
  > tbody
  > tr.sc-table-row--warning:hover
  > td:first-child {
  box-shadow: inset 4px 0 0 #a65f00 !important;
}

/* Status badges in DataTable cells — drop the design-system 130px min-width */
div.dataTables_wrapper table.datatable sc-badge::part(badge) {
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
}

/* KPI row above Live/Daily Presences tables (sc-insight-scalar cards) */
.sc-presences-stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 16px;
}

/* Name/company link + optional status badge in one cell */
.sc-table-identity {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
* 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);
}

/*
* Segmented filter pill groups (`.filter-btn-group`) that sit above the table cards.
* Canonical styling for every card so the active pill reads the same everywhere
* (mint fill, brand-blue text/border) instead of each page repeating its own colors.
* `!important` on the inactive pills keeps Bootstrap's `.btn-outline-secondary`
* hover colors from taking over the muted resting state.
*/
/* 31px matches the `-sm` search field and the compact CSV/PDF buttons beside it. */
.filter-btn-group .btn {
  min-height: 31px;
}

.filter-btn-group .btn-outline-secondary {
  border-color: #0c0a3e1a !important;
  color: #555 !important;
}

.filter-btn-group .btn.active,
.filter-btn-group .btn.active:hover {
  background-color: var(--sc-brand-mint);
  border-color: var(--sc-brand-blue);
  color: var(--sc-brand-blue);
}

/*
* Staff audit details are the last column of a wide table. The column grows
* with the nowrap summary so a long operator line is not clipped mid-id; the
* wrapper scrolls horizontally instead.
*/
#audit_logs_wrapper:has(.sc-audit-details-col) {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow-x: auto;
}

#audit_logs:has(.sc-audit-details-col) {
  min-width: 100%;
  table-layout: auto !important;
  width: auto !important;
}

#audit_logs .sc-audit-details-col {
  box-sizing: border-box;
  min-width: max-content;
}

#audit_logs .sc-audit-mutation-summary,
#audit_logs .sc-audit-mutation-summary li {
  min-width: max-content;
  white-space: nowrap;
}

/*
* Stacked info cell (macros/design-system/tables_helpers.html table_info_cell): one
* line per field, as in CCIP Claims Management. The min-width keeps a phone-width
* table from squeezing the column until dates and labels break mid-word; the table
* scrolls sideways instead. A value longer than the column still wraps.
*/
.sc-table-info-cell {
  color: var(--sc-brand-blue);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 2px;
  line-height: 18px;
  min-width: 11rem;
}

.sc-table-info-cell__line {
  overflow-wrap: break-word;
}

.sc-table-info-cell__label {
  white-space: nowrap;
}

/*
* Phone card rows for a table with a stacked info cell. Below md such a table needs several
* hundred pixels more than the screen, and the status badge and the actions sat off screen.
* Each row becomes a card: the checkbox and the status badge on its top line, every stacked
* cell at full width, a plain column as "Header: value", and the actions last. The header row
* shows the select-all checkbox and the first column's sort; the other headers stay readable
* to screen readers. getDatatableInitCompleteSettings marks the table (sc-table--stacked, from
* all its rows, so a search with no match keeps the layout; also an empty table, and a table of
* plain columns that carries data-sc-phone-cards), copies each header into its
* cells' data-sc-label and sets explicit table roles, since display: grid on a table's parts
* can drop them. Display only: exports read the cells. Without :has() the table scrolls as
* before. Bootstrap and table.css set row borders and shadows with !important, so the card's
* own do too.
*/
@supports selector(:has(*)) {
  @media (max-width: 767.98px) {
    .table-responsive:has(table.datatable.sc-table--stacked) {
      overflow-x: visible;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked {
      display: block;
      min-width: 0 !important;
      width: 100% !important;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > thead,
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody {
      display: block;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > thead > tr {
      align-items: center;
      background: var(--sc-table-header-bg);
      border-bottom: 1px solid var(--sc-table-border) !important;
      display: flex;
      gap: 16px;
      padding: 0 16px;
      position: relative;
    }

    /* Visually hidden, not display: none, so each cell keeps its column header. DataTables
       sizes each header with an inline width, hence !important. */
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > thead > tr > th {
      border: 0 !important;
      clip-path: inset(50%);
      height: 1px !important;
      min-width: 0 !important;
      overflow: hidden;
      padding: 0 !important;
      position: absolute;
      white-space: nowrap;
      width: 1px !important;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > thead > tr > th:first-child,
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > thead > tr > th:first-child:has(input[type="checkbox"], sc-form-check) + th {
      background-color: transparent;
      clip-path: none;
      height: auto !important;
      overflow: visible;
      padding: 13px 26px 12px 0 !important;
      position: relative;
      text-align: left;
      width: auto !important;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > thead > tr > th:first-child:has(input[type="checkbox"], sc-form-check) {
      padding-right: 0 !important;
      width: 20px !important;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr {
      display: grid;
      gap: 10px 16px;
      grid-template-columns: minmax(0, 1fr) auto;
      padding: 14px 16px;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr + tr {
      border-top: 1px solid var(--sc-table-border) !important;
    }

    /* Every cell runs the card's width unless placed on its top line below. The first-cell
       selectors outrank the checkbox column's divider and the row accents, hovered too. */
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr > td,
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr > td:first-child,
    div.dataTables_wrapper .sc-table-panel table.datatable.table-hover.sc-table--stacked > tbody > tr:hover > td:first-child {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      display: block;
      grid-column: 1 / -1;
      min-width: 0 !important;
      padding: 0 !important;
      text-align: left !important;
      width: auto !important;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked:has(> thead > tr > th:first-child :is(input[type="checkbox"], sc-form-check)) > tbody > tr > td:first-child {
      grid-column: 1;
      grid-row: 1;
    }

    /* The status: a lone badge just before the actions. */
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr > td:nth-last-child(2):has(> sc-badge) {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      max-width: 100%;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr > td.dataTables_empty {
      grid-column: 1 / -1 !important;
      grid-row: auto;
      text-align: center !important;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked .sc-table-info-cell {
      min-width: 0;
    }

    /* A plain column says what it holds, its header being hidden. So does a last column of data
       rather than actions (sc-table--last-column-labelled, set by sc-datatable.js). */
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr > td[data-sc-label]:not(:has(> .sc-table-info-cell, > sc-badge)):not(:last-child),
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked.sc-table--last-column-labelled > tbody > tr > td[data-sc-label]:last-child:not(:has(> .sc-table-info-cell, > sc-badge)) {
      align-items: center;
      color: var(--sc-brand-blue);
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      gap: 6px;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr > td[data-sc-label]:not(:has(> .sc-table-info-cell, > sc-badge)):not(:last-child)::before,
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked.sc-table--last-column-labelled > tbody > tr > td[data-sc-label]:last-child:not(:has(> .sc-table-info-cell, > sc-badge))::before {
      content: attr(data-sc-label) ":";
      white-space: nowrap;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr > td:last-child > div {
      align-items: center !important;
      flex-direction: row !important;
      flex-wrap: wrap;
      gap: 4px 16px !important;
      justify-content: flex-start !important;
    }

    /* The due and past-due accent moves from the first cell to the card. */
    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr.sc-table-row--attention {
      box-shadow: inset 4px 0 0 #a61300 !important;
    }

    div.dataTables_wrapper .sc-table-panel table.datatable.sc-table--stacked > tbody > tr.sc-table-row--warning {
      box-shadow: inset 4px 0 0 #a65f00 !important;
    }
  }
}