/* Enterprise data grid — Jira / Atlassian-inspired overlay on ReactTable.
   Do not change columns, accessors, fetchData, sort, filter, or pagination handlers.
   Visual kit names: EnterpriseTable, StickyColumn, ScrollableTableContainer. */

.securends .ReactTable,
.securends .ReactTable.se-enterprise-table {
  background: var(--se-card) !important;
  border: 1px solid var(--se-table-line, var(--se-line)) !important;
  border-radius: var(--se-r-card) !important;
  box-shadow: var(--se-shadow);
  overflow: visible;
  color: var(--se-table-ink, var(--se-ink));
}

/* Freeze is class-driven (utils/seTableFreeze.js):
   .se-table-hscroll + .se-freeze-action-1 (ACTION is col 1 → freeze 2)
   .se-table-hscroll + .se-freeze-action-2 (ACTION is col 2 → freeze 3)
   No class → no freeze. Offsets --se-table-freeze-1 / --se-table-freeze-2
   are measured from resizable header cells. */

/* Scrollable body: page height stays put; extra rows scroll inside 600px */
.securends .ReactTable .rt-table {
  max-height: var(--se-table-max-h);
  overflow: auto !important;
  background: var(--se-card) !important;
  border: none !important;
  border-radius: 0;
}

/* Pickels `#epTable .campaignTemp .ReactTable .rt-table { overflow: visible }`
   (3-dots clip workaround) uses an ID and beats the overlay — rows then paint
   over pagination and the table cannot scroll. /campaignTemplates (.campaignTemp)
   must scroll the same as /listOfCampaign (.listofCampTable): inner 600px scroller.
   Keep 3-dots on action cells + placeTableActionMenu; do not unclip via .rt-table. */
.securends #epTable .campaignTemp .ReactTable .rt-table,
.securends .campaignTemp .ReactTable .rt-table {
  max-height: var(--se-table-max-h) !important;
  overflow: auto !important;
}

.securends .ReactTable .rt-table::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.securends .ReactTable .rt-table::-webkit-scrollbar-track {
  background: var(--se-page);
  border-radius: 8px;
}

.securends .ReactTable .rt-table::-webkit-scrollbar-thumb {
  background: var(--se-nav-scroll-thumb);
  border-radius: 8px;
}

.securends .ReactTable .rt-table::-webkit-scrollbar-thumb:hover {
  background: var(--se-brand);
}

.securends .ReactTable .rt-table {
  scrollbar-width: thin;
  scrollbar-color: var(--se-nav-scroll-thumb) var(--se-page);
}

/* Sticky header + filter row inside the table scroller.
   Header height MUST equal --se-table-colhead or a gap appears on scroll
   (filters stick at that offset). Beat pickels top: 100px / 150px. */
.securends .ReactTable .rt-thead.-header,
.securends .EndpointsTable .rt-thead.-header,
.securends .sorReactTable .rt-thead.-header,
.securends .listofCampTable .rt-thead.-header,
.securends .campaignTemp .rt-thead.-header,
.securends .emailTemplatesTable .rt-thead.-header,
.securends .messageTemplatesTable .rt-thead.-header,
.securends .emailAuditTable .rt-thead.-header,
.securends .messageAuditTable .rt-thead.-header,
.securends .campaignReportsTbl .rt-thead.-header,
.securends .credEnt .rt-thead.-header,
.securends .iamUsersTbl .rt-thead.-header,
.securends .peoplesReactTable .rt-thead.-header,
.securends .campaignTempEntitlement .rt-thead.-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  height: var(--se-table-colhead) !important;
  min-height: var(--se-table-colhead) !important;
  max-height: var(--se-table-colhead) !important;
  margin: 0 !important;
  background: var(--se-table-header-bg) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--se-table-line, var(--se-line));
}

.securends .ReactTable .rt-thead.-filters,
.securends .EndpointsTable .rt-thead.-filters,
.securends .sorReactTable .rt-thead.-filters,
.securends .listofCampTable .rt-thead.-filters,
.securends .campaignTemp .rt-thead.-filters,
.securends .emailTemplatesTable .rt-thead.-filters,
.securends .messageTemplatesTable .rt-thead.-filters,
.securends .emailAuditTable .rt-thead.-filters,
.securends .messageAuditTable .rt-thead.-filters,
.securends .campaignReportsTbl .rt-thead.-filters,
.securends .credEnt .rt-thead.-filters,
.securends .iamUsersTbl .rt-thead.-filters,
.securends .peoplesReactTable .rt-thead.-filters,
.securends .campaignTempEntitlement .rt-thead.-filters {
  position: sticky !important;
  top: var(--se-table-colhead) !important;
  z-index: 4 !important;
  height: var(--se-table-filter-h) !important;
  min-height: var(--se-table-filter-h) !important;
  max-height: var(--se-table-filter-h) !important;
  margin: 0 !important;
  background: var(--se-card) !important;
  box-shadow: none !important;
  border-top: none !important;
}

/* Default: fill the card so tables with no horizontal scroll do not leave
   an empty gutter after the last column (Campaign Reports, etc.). */
.securends .ReactTable .rt-thead.-header .rt-tr,
.securends .ReactTable .rt-thead.-filters .rt-tr {
  display: flex !important;
  width: 100%;
  min-width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch;
  box-sizing: border-box;
}

.securends .ReactTable .rt-tbody .rt-tr {
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

/* When columns overflow the scroller, grow rows to content width.
   Sticky thead with width:100% resolves against the scrollport, so after
   scrolling right a header resize moved labels without body columns.
   Class is set by utils/seTableFreeze.js only when scrollWidth > clientWidth. */
.securends .ReactTable.se-table-col-overflow .rt-thead.-header,
.securends .ReactTable.se-table-col-overflow .rt-thead.-filters,
.securends .ReactTable.se-table-col-overflow .rt-tbody,
.securends .ReactTable.se-table-col-overflow .rt-thead.-header .rt-tr,
.securends .ReactTable.se-table-col-overflow .rt-thead.-filters .rt-tr,
.securends .ReactTable.se-table-col-overflow .rt-tbody .rt-tr {
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.securends .ReactTable .rt-thead.-header .rt-th,
.securends .ReactTable .rt-thead.-header .rt-td,
.securends .ReactTable .rt-thead.-header .rt-th div:not(.rt-resizer):not(.custom-control):not(.custom-checkbox) {
  background: var(--se-table-header-bg) !important;
  color: var(--se-table-header-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/*
  Filter row ↔ header column alignment (app-wide).
  Each .-filters .rt-th must occupy the SAME column slot as .-header .rt-th
  (and the body .rt-td) at the same index — including empty filterable:false
  cells (ACTION, dates). Otherwise extra columns pack inputs left under the
  wrong header (Application filter under Description, etc.).
  Width lock is applied by utils/seTableFreeze.js (measured header → filter
  + body, !important). CSS here keeps the box model identical and stops
  native <input> min-width from overflowing a narrow column (STATUS).
*/
.securends .ReactTable .rt-thead.-header .rt-th,
.securends .ReactTable .rt-thead.-filters .rt-th,
.securends .ReactTable .rt-thead.-header .rt-td,
.securends .ReactTable .rt-thead.-filters .rt-td {
  box-sizing: border-box !important;
}

.securends .ReactTable .rt-thead.-filters .rt-th,
.securends .ReactTable .rt-thead.-filters .rt-td {
  padding: 4px 8px !important;
  height: var(--se-table-filter-h) !important;
  min-height: var(--se-table-filter-h) !important;
  max-height: var(--se-table-filter-h) !important;
  display: flex !important;
  align-items: center;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: var(--se-card) !important;
  border-bottom: 1px solid var(--se-table-line, var(--se-line)) !important;
}

/* DatePicker filter cells in ReactTable headers must allow popovers to overflow */
.securends .ReactTable .rt-thead.-filters .rt-th:has(.react-datepicker-wrapper),
.securends .ReactTable .rt-thead.-filters .rt-th:has(.campaignList),
.securends .ReactTable .rt-thead.-filters .rt-th:has(.delegationDate),
.securends .ReactTable .rt-thead.-filters .rt-th:has(.react-datepicker__input-container),
.securends .se-campaign-list-page .ReactTable .rt-thead.-filters .rt-th,
.securends .se-campaigns-page .ReactTable .rt-thead.-filters .rt-th,
.securends .se-open-campaigns-page .ReactTable .rt-thead.-filters .rt-th,
.securends .se-roles-page .ReactTable .rt-thead.-filters .rt-th {
  position: relative !important;
  overflow: visible !important;
}

.securends .ReactTable .rt-thead.-filters .campaignList,
.securends .ReactTable .rt-thead.-filters .react-datepicker-wrapper,
.securends .ReactTable .rt-thead.-filters .react-datepicker__input-container {
  width: 100% !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
}

.securends .ReactTable .rt-thead.-filters .react-datepicker__input-container input {
  height: 28px !important;
  font-size: 12px !important;
  padding: 0 22px 0 8px !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r) !important;
  background: var(--se-page) !important;
  color: var(--se-ink) !important;
  box-sizing: border-box !important;
}

.securends .ReactTable .rt-thead.-filters .react-datepicker-popper {
  z-index: 99999 !important;
}

/* Never flatten filter-cell wrappers (header may use display:contents) */
.securends .ReactTable .rt-thead.-filters .rt-th>div,
.securends .ReactTable .rt-thead.-filters .rt-td>div,
.securends .ReactTable .rt-thead.-filters .rt-resizable-header-content,
.securends .ReactTable .rt-thead.-filters .rt-resizable-header-content>div {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  flex: 1 1 auto;
}

.securends .ReactTable .rt-thead.-filters .react-datepicker-popper,
.securends .ReactTable .rt-thead.-filters .react-datepicker,
.securends .ReactTable .rt-thead.-filters .react-datepicker__month-container,
.securends .ReactTable .rt-thead.-filters .react-datepicker__month {
  width: auto !important;
  max-width: none !important;
  min-width: 280px;
}

.securends .ReactTable .rt-thead.-filters:has(.react-datepicker-wrapper) {
  overflow: visible !important;
}

/* Overlay the calendar on the table without growing the card or unclipping scroll by default */
.securends .ReactTable .rt-table:has(.react-datepicker-popper) {
  overflow: visible !important;
}

.se-table-datepicker-popper.react-datepicker-popper,
body > .se-table-datepicker-popper.react-datepicker-popper {
  z-index: calc(var(--se-z-modal, 1200) + 80) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* position:fixed is set by Popper (positionFixed); keep transform origin sane */
  margin: 0 !important;
}

/* Portaled table filter calendar (body) — solid card so dates are readable */
.se-table-datepicker-popper .react-datepicker,
body > .se-table-datepicker-popper .react-datepicker {
  background: var(--se-card) !important;
  color: var(--se-ink) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card) !important;
  box-shadow: var(--se-shadow-lg) !important;
  min-width: 280px !important;
  width: auto !important;
  overflow: visible !important;
}

.se-table-datepicker-popper .react-datepicker__header {
  background: var(--se-table-header-bg, var(--se-page)) !important;
  color: var(--se-ink) !important;
  border-bottom: 1px solid var(--se-line) !important;
}

.se-table-datepicker-popper .react-datepicker__current-month,
.se-table-datepicker-popper .react-datepicker__day-name,
.se-table-datepicker-popper .react-datepicker__day {
  color: var(--se-ink) !important;
}

.se-table-datepicker-popper .react-datepicker__day-name {
  color: var(--se-ink-2) !important;
}

.se-table-datepicker-popper .react-datepicker__day--outside-month {
  color: var(--se-ink-3) !important;
}

/* Empty filterable:false cells still occupy their column slot */
.securends .ReactTable .rt-thead.-filters .rt-th:not(:has(input)):not(:has(select))::before {
  content: "";
  display: block;
  width: 100%;
  min-height: 1px;
  flex: 1 1 auto;
}

.securends .ReactTable .rt-thead.-filters input,
.securends .ReactTable .rt-thead.-filters select,
.securends .iamUser-table .ReactTable .rt-thead.-filters input,
.securends .ReactTable .rt-thead.-filters input.form-control,
.securends .ReactTable .rt-thead.-filters select.form-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r) !important;
  background-color: var(--bg-input, var(--se-page)) !important;
  color: var(--se-ink) !important;
  font-family: var(--se-sans) !important;
  font-size: 13px !important;
  line-height: 26px !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
}

.securends .ReactTable .rt-thead.-filters select,
.securends .ReactTable .rt-thead.-filters select.form-control {
  padding: 0 24px 0 8px !important;
  background-image: var(--se-select-caret) !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 7px !important;
}

.securends .ReactTable .rt-thead.-filters input::placeholder {
  color: var(--se-ink-3) !important;
  opacity: 1;
}

.securends .ReactTable .rt-thead.-filters input:hover,
.securends .ReactTable .rt-thead.-filters select:hover {
  border-color: var(--se-line-soft) !important;
}

.securends .ReactTable .rt-thead.-filters input:focus,
.securends .ReactTable .rt-thead.-filters select:focus,
.securends .ReactTable .rt-thead.-filters input:focus-visible,
.securends .ReactTable .rt-thead.-filters select:focus-visible {
  border-color: var(--se-brand) !important;
  background-color: var(--se-card) !important;
  box-shadow: 0 0 0 3px var(--se-brand-tint) !important;
}

/* Freeze only when JS added .se-table-hscroll (real horizontal overflow).
   ACTION col 1 → freeze 2. ACTION col 2 → freeze 3.
   Do not use global :has(.ActionDropdown) — that froze every list including
   tables that fit the viewport, and broke pivot assignment tables. */
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-tbody .rt-tr>.rt-td:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-tbody .rt-tr>.rt-td:nth-child(1) {
  position: sticky !important;
  left: 0 !important;
  z-index: 3;
  background: var(--se-card) !important;
}

.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-header .rt-tr>.rt-th:nth-child(1) {
  z-index: 6;
  background: var(--se-table-header-bg) !important;
}

.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-header .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-tbody .rt-tr>.rt-td:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-header .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-tbody .rt-tr>.rt-td:nth-child(2) {
  position: sticky !important;
  left: var(--se-table-freeze-1) !important;
  z-index: 3;
  background: var(--se-card) !important;
}

.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-header .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-header .rt-tr>.rt-th:nth-child(2) {
  z-index: 6;
  background: var(--se-table-header-bg) !important;
}

.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-header .rt-tr>.rt-th:nth-child(3),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-filters .rt-tr>.rt-th:nth-child(3),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-tbody .rt-tr>.rt-td:nth-child(3) {
  position: sticky !important;
  left: var(--se-table-freeze-2) !important;
  z-index: 3;
  background: var(--se-card) !important;
  box-shadow: 6px 0 8px rgba(15, 23, 42, 0.04);
}

.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-header .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-tbody .rt-tr>.rt-td:nth-child(2) {
  box-shadow: 6px 0 8px rgba(15, 23, 42, 0.04);
}

.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-header .rt-tr>.rt-th:nth-child(3) {
  z-index: 6;
  background: var(--se-table-header-bg) !important;
}

.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-thead.-filters .rt-tr>.rt-th:nth-child(3) {
  z-index: 5;
  background: var(--se-card) !important;
}

/* Disable sticky column freeze on audit/template tables, but keep header
   cells position:relative so .rt-resizer can drag (Template Name, etc.). */
.securends .messageAuditTable .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .messageAuditTable .rt-thead.-header .rt-tr>.rt-th:nth-child(2),
.securends .emailAuditTable .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .emailAuditTable .rt-thead.-header .rt-tr>.rt-th:nth-child(2),
.securends .emailTemplatesTable .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .emailTemplatesTable .rt-thead.-header .rt-tr>.rt-th:nth-child(2),
.securends .messageTemplatesTable .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .messageTemplatesTable .rt-thead.-header .rt-tr>.rt-th:nth-child(2) {
  position: relative !important;
  left: auto !important;
  box-shadow: none !important;
}

.securends .messageAuditTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .messageAuditTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .messageAuditTable .rt-tbody .rt-tr>.rt-td:nth-child(1),
.securends .messageAuditTable .rt-tbody .rt-tr>.rt-td:nth-child(2),
.securends .emailAuditTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .emailAuditTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .emailAuditTable .rt-tbody .rt-tr>.rt-td:nth-child(1),
.securends .emailAuditTable .rt-tbody .rt-tr>.rt-td:nth-child(2),
.securends .emailTemplatesTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .emailTemplatesTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .emailTemplatesTable .rt-tbody .rt-tr>.rt-td:nth-child(1),
.securends .emailTemplatesTable .rt-tbody .rt-tr>.rt-td:nth-child(2),
.securends .messageTemplatesTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(1),
.securends .messageTemplatesTable .rt-thead.-filters .rt-tr>.rt-th:nth-child(2),
.securends .messageTemplatesTable .rt-tbody .rt-tr>.rt-td:nth-child(1),
.securends .messageTemplatesTable .rt-tbody .rt-tr>.rt-td:nth-child(2) {
  position: static !important;
  left: auto !important;
  box-shadow: none !important;
}

/* 3-dots Action/ACTIONS column: 40% narrower than the former 120px.
   Do not apply to UAR flipswitch ACTION (~280px). Beat leftover
   listOfCampaign `flexGrow: 200` which compiled to inline `flex: 200 0 auto`.
   Keep filter-row ACTION slot aligned. */
.securends .ReactTable .rt-th.actionColContainer,
.securends .ReactTable .rt-td.actionColContainer,
.securends .ReactTable .rt-thead.-filters .rt-th.actionColContainer {
  flex: 0 0 var(--se-table-action-w, 74px) !important;
  flex-grow: 0 !important;
  width: var(--se-table-action-w, 74px) !important;
  min-width: var(--se-table-action-w, 74px) !important;
  max-width: var(--se-table-action-w, 74px) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

/* Rows — surfaces use --se-card so light/dark mode stay readable.
   Beats pickels `.ReactTable.-striped .rt-tr.-odd { background: #fff }`. */
.securends .ReactTable .rt-tbody,
.securends .ReactTable .rt-tbody .rt-tr-group,
.securends .ReactTable .rt-tbody .rt-tr,
.securends .ReactTable.-striped .rt-tr.-odd,
.securends .ReactTable.-striped .rt-tr.-even,
.securends .evenRow .rt-tr.-even {
  background: var(--se-card) !important;
}

/* Single divider on cells only — suppress default react-table group border */
.securends .ReactTable .rt-tbody .rt-tr-group {
  border-bottom: none !important;
}

.securends .ReactTable .rt-tbody .rt-td {
  min-height: var(--se-table-row-h);
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--se-table-line, var(--se-line)) !important;
  background: var(--se-card) !important;
  color: var(--se-table-ink, var(--se-ink)) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background var(--se-ease);
}

.securends .ReactTable .rt-tbody .rt-tr:hover>.rt-td,
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-tbody .rt-tr:hover>.rt-td:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-1 .rt-tbody .rt-tr:hover>.rt-td:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-tbody .rt-tr:hover>.rt-td:nth-child(1),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-tbody .rt-tr:hover>.rt-td:nth-child(2),
.securends .ReactTable.se-table-hscroll.se-freeze-action-2 .rt-tbody .rt-tr:hover>.rt-td:nth-child(3) {
  background: var(--se-table-hover) !important;
}

/* Open 3-dots: keep `.rt-table` overflow:auto so the table still scrolls and
   pagination stays below the scroller. Menus escape the clip via
   placeTableActionMenu.js (portal to body + position:fixed). Do not unclip
   `.rt-table` with :has(.dropdown-menu.show). */

/* Table Action 3-dots Button */
.securends .ReactTable .ActionDropdown > button.btn,
.securends .ReactTable .ActionDropdown > button.btn-default,
.securends .ReactTable .configActionDropdown > button.btn,
.securends .ReactTable .configActionDropdown > button.btn-default,
.securends .ReactTable .se-table-action-btn,
html[data-se-theme] .ReactTable .ActionDropdown > button.btn,
html[data-se-theme] .ReactTable .ActionDropdown > button.btn-default,
html[data-se-theme] .ReactTable .configActionDropdown > button.btn,
html[data-se-theme] .ReactTable .configActionDropdown > button.btn-default,
html[data-se-theme] .ReactTable .se-table-action-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: var(--se-r, 6px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--se-ink-2, #64748b) !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.securends .ReactTable .ActionDropdown > button:hover,
.securends .ReactTable .configActionDropdown > button:hover,
.securends .ReactTable .se-table-action-btn:hover,
.securends .ReactTable .ActionDropdown.open > button,
.securends .ReactTable .configActionDropdown.open > button,
.securends .ReactTable .ActionDropdown > button:focus,
.securends .ReactTable .ActionDropdown > button:focus-visible,
html[data-se-theme] .ReactTable .ActionDropdown > button:hover,
html[data-se-theme] .ReactTable .configActionDropdown > button:hover,
html[data-se-theme] .ReactTable .se-table-action-btn:hover,
html[data-se-theme] .ReactTable .ActionDropdown.open > button,
html[data-se-theme] .ReactTable .configActionDropdown.open > button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--se-ink, #0f172a) !important;
}

/* Caret / Bootstrap ::after reads as a 4th "dot" beside the ellipsis when open */
.securends .ReactTable .ActionDropdown > button::after,
.securends .ReactTable .ActionDropdown.open > button::after,
.securends .ReactTable .ActionDropdown > button .caret,
.securends .ReactTable .ActionDropdown > button .appGear::after,
.securends .ReactTable .ActionDropdown > button .fa::after,
.securends .ReactTable .configActionDropdown > button::after,
.securends .ReactTable .dropdown.badge > button::after,
.securends .ReactTable .drop-maindiv button::after {
  display: none !important;
  content: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* CampaignListPopup uses <ul class="ActionDropdown-content"> — default li
   markers paint a disc in the gap between the 3-dots and View. */
.securends .ActionDropdown-content,
.securends .ActionDropdown-content.campaignPopUp,
.securends .ActionDropdown-content.campaignPopUpCO,
html[data-se-theme] .ActionDropdown-content,
.se-table-action-menu-portaled {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 6px !important;
}

.securends .ActionDropdown-content > li,
.securends .ActionDropdown-content li,
html[data-se-theme] .ActionDropdown-content > li,
.se-table-action-menu-portaled > li {
  list-style: none !important;
  list-style-type: none !important;
}

.securends .ActionDropdown-content > li::marker,
.securends .ActionDropdown-content li::marker,
html[data-se-theme] .ActionDropdown-content > li::marker,
.se-table-action-menu-portaled > li::marker {
  content: none !important;
  display: none !important;
}

body>.se-table-action-menu-portaled,
html[data-se-theme] .se-table-action-menu-portaled,
html[data-se-mode] .se-table-action-menu-portaled,
.se-table-action-menu-portaled.dropdown-menu,
.securends .ActionDropdown-content,
html[data-se-theme] .ActionDropdown-content {
  display: block !important;
  --bs-dropdown-bg: var(--se-card);
  --bs-dropdown-color: var(--se-ink);
  --bs-dropdown-border-color: var(--se-line);
  --bs-dropdown-link-color: var(--se-ink);
  --bs-dropdown-link-hover-bg: var(--se-row-hover, var(--se-raise));
  --bs-dropdown-link-hover-color: var(--se-ink);
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  color: var(--se-ink) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--se-shadow-lg) !important;
  padding: 6px !important;
  min-width: 150px;
  overflow: visible;
  z-index: 2000 !important;
  pointer-events: auto !important;
}

.securends .ActionDropdown:not(.open) .ActionDropdown-content,
html[data-se-theme] .ActionDropdown:not(.open) .ActionDropdown-content {
  display: none !important;
}

.securends .ActionDropdown.open .ActionDropdown-content,
html[data-se-theme] .ActionDropdown.open .ActionDropdown-content {
  display: block !important;
}

.se-table-action-menu-portaled>li>a,
.se-table-action-menu-portaled .child,
.se-table-action-menu-portaled a.child,
.securends .ActionDropdown-content .child,
.securends .ActionDropdown-content1 .child,
html[data-se-theme] .ActionDropdown-content .child,
html[data-se-theme] .ActionDropdown-content1 .child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--se-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.securends .ActionDropdown-content .child a,
.securends .ActionDropdown-content .child span,
html[data-se-theme] .ActionDropdown-content .child a,
html[data-se-theme] .ActionDropdown-content .child span,
.se-table-action-menu-portaled .child a,
.se-table-action-menu-portaled .child span {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

.securends .ActionDropdown-content .child i.fa,
.securends .ActionDropdown-content .child .material-icons,
html[data-se-theme] .ActionDropdown-content .child i.fa,
html[data-se-theme] .ActionDropdown-content .child .material-icons,
.se-table-action-menu-portaled .child i.fa,
.se-table-action-menu-portaled .child .material-icons {
  font-size: 14px !important;
  width: 16px !important;
  text-align: center !important;
  color: var(--se-ink-2) !important;
  transition: color 0.15s ease !important;
}

/* Action Dropdown Item Hover — Default (Update, Edit, View) */
.se-table-action-menu-portaled>li>a:hover,
.se-table-action-menu-portaled .child:hover,
.se-table-action-menu-portaled a.child:hover,
.securends .ActionDropdown-content .child:hover,
.securends .ActionDropdown-content1 .child:hover,
html[data-se-theme] .ActionDropdown-content .child:hover,
html[data-se-theme] .ActionDropdown-content1 .child:hover {
  background: var(--se-row-hover, #f1f5f9) !important;
  color: var(--se-brand, #0052cc) !important;
}

.se-table-action-menu-portaled .child:hover i.fa,
.securends .ActionDropdown-content .child:hover i.fa,
html[data-se-theme] .ActionDropdown-content .child:hover i.fa {
  color: var(--se-brand, #0052cc) !important;
}

/* Action Dropdown Item Hover — Danger (Delete) */
.se-table-action-menu-portaled .child.se-action-delete:hover,
.se-table-action-menu-portaled .child:has(.fa-trash):hover,
.se-table-action-menu-portaled .child:has(.fa-trash-o):hover,
.securends .ActionDropdown-content .child.se-action-delete:hover,
.securends .ActionDropdown-content .child:has(.fa-trash):hover,
.securends .ActionDropdown-content .child:has(.fa-trash-o):hover,
html[data-se-theme] .ActionDropdown-content .child.se-action-delete:hover,
html[data-se-theme] .ActionDropdown-content .child:has(.fa-trash):hover,
html[data-se-theme] .ActionDropdown-content .child:has(.fa-trash-o):hover {
  background: var(--se-risk-tint, #fef2f2) !important;
  color: var(--se-risk, #dc2626) !important;
}

.se-table-action-menu-portaled .child.se-action-delete:hover i.fa,
.se-table-action-menu-portaled .child:has(.fa-trash):hover i.fa,
.se-table-action-menu-portaled .child:has(.fa-trash-o):hover i.fa,
.securends .ActionDropdown-content .child.se-action-delete:hover i.fa,
.securends .ActionDropdown-content .child:has(.fa-trash):hover i.fa,
.securends .ActionDropdown-content .child:has(.fa-trash-o):hover i.fa,
html[data-se-theme] .ActionDropdown-content .child.se-action-delete:hover i.fa,
html[data-se-theme] .ActionDropdown-content .child:has(.fa-trash):hover i.fa,
html[data-se-theme] .ActionDropdown-content .child:has(.fa-trash-o):hover i.fa {
  color: var(--se-risk, #dc2626) !important;
}

/* Export → Reviewers flyout (portaled 3-dots). Beat pickels
   .dropdown-content { right:-170px; height:34px; z-index:-1 } and close the
   hover gap so Reviewers stays reachable. */
.se-table-action-menu-portaled,
.se-table-action-menu-portaled>li,
.se-table-action-menu-portaled>li>a,
.se-table-action-menu-portaled .export-submenu-item,
.se-table-action-menu-portaled .dropdown.export-submenu-item {
  overflow: visible !important;
}

.se-table-action-menu-portaled .export-submenu-item,
.se-table-action-menu-portaled .dropdown.export-submenu-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.se-table-action-menu-portaled .export-submenu-item:hover>.dropdown-content,
.se-table-action-menu-portaled .export-submenu-item:focus-within>.dropdown-content,
.se-table-action-menu-portaled .dropdown-content:hover {
  display: block !important;
}

.se-table-action-menu-portaled .dropdown-content {
  display: none !important;
  position: absolute !important;
  left: calc(100% - 2px) !important;
  right: auto !important;
  top: -4px !important;
  bottom: auto !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 148px !important;
  max-width: 240px;
  margin: 0 !important;
  padding: 6px !important;
  z-index: 2100 !important;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r) !important;
  box-shadow: var(--se-shadow-md) !important;
  pointer-events: auto !important;
}

/* Invisible bridge so the cursor can cross into the flyout without losing :hover */
.se-table-action-menu-portaled .dropdown-content::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  width: 12px;
}

.se-table-action-menu-portaled .dropdown-content .child,
.se-table-action-menu-portaled .dropdown-content a.child {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
  padding: 8px 10px !important;
  min-height: 36px;
  border: none !important;
  border-radius: 8px !important;
  border-bottom: none !important;
  background: transparent !important;
  color: var(--se-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: nowrap;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.se-table-action-menu-portaled .dropdown-content .child:hover,
.se-table-action-menu-portaled .dropdown-content .child:focus {
  background: var(--se-row-hover) !important;
  color: var(--se-ink) !important;
}

/* Submenu flyout (More > in SOR / Endpoints / Campaigns).
   Hidden by default; opens ONLY on hover/focus of .ActionDropdown1.
   Flies out to the right of More, bottom-aligned so all items stay in view.
   Items stack vertically as clean rows (overriding the .child span inline-flex rule). */
.securends .ActionDropdown1 .ActionDropdown-content1,
.securends .ActionDropdown-content1,
html[data-se-theme] .ActionDropdown1 .ActionDropdown-content1,
html[data-se-theme] .ActionDropdown-content1,
.se-table-action-menu-portaled .ActionDropdown1 .ActionDropdown-content1,
.se-table-action-menu-portaled .ActionDropdown-content1,
body > .se-table-action-menu-portaled .ActionDropdown1 .ActionDropdown-content1,
body > .se-table-action-menu-portaled .ActionDropdown-content1,
.ActionDropdown-content1 {
  display: none !important;
  position: absolute !important;
  left: calc(100% + 4px) !important;
  right: auto !important;
  bottom: -6px !important;
  top: auto !important;
  min-width: 190px !important;
  max-width: 280px !important;
  width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  color: var(--se-ink) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--se-shadow-lg) !important;
  z-index: 2200 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Invisible bridge so mouse can traverse gap without losing :hover */
.securends .ActionDropdown-content1::before,
html[data-se-theme] .ActionDropdown-content1::before,
.se-table-action-menu-portaled .ActionDropdown-content1::before {
  content: "" !important;
  position: absolute !important;
  left: -8px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 10px !important;
  background: transparent !important;
}

.securends .ActionDropdown1,
html[data-se-theme] .ActionDropdown1,
.se-table-action-menu-portaled .ActionDropdown1 {
  position: relative !important;
  overflow: visible !important;
}

/* Open sub-menu ONLY when hovering or focusing the "More" item */
.securends .ActionDropdown1:hover > .ActionDropdown-content1,
.securends .ActionDropdown1:hover .ActionDropdown-content1,
.securends .ActionDropdown1:focus-within > .ActionDropdown-content1,
.securends .ActionDropdown1:focus-within .ActionDropdown-content1,
html[data-se-theme] .ActionDropdown1:hover > .ActionDropdown-content1,
html[data-se-theme] .ActionDropdown1:hover .ActionDropdown-content1,
html[data-se-theme] .ActionDropdown1:focus-within > .ActionDropdown-content1,
html[data-se-theme] .ActionDropdown1:focus-within .ActionDropdown-content1,
.se-table-action-menu-portaled .ActionDropdown1:hover > .ActionDropdown-content1,
.se-table-action-menu-portaled .ActionDropdown1:hover .ActionDropdown-content1,
.se-table-action-menu-portaled .ActionDropdown1:focus-within > .ActionDropdown-content1,
.se-table-action-menu-portaled .ActionDropdown1:focus-within .ActionDropdown-content1 {
  display: flex !important;
  flex-direction: column !important;
}

/* Inner span wrapper inside ActionDropdown-content1: MUST be column flex (not inline-flex) */
.securends .ActionDropdown-content1 span,
.securends .ActionDropdown-content1 > span,
html[data-se-theme] .ActionDropdown-content1 span,
html[data-se-theme] .ActionDropdown-content1 > span,
.se-table-action-menu-portaled .ActionDropdown-content1 span,
.se-table-action-menu-portaled .ActionDropdown-content1 > span,
.se-table-action-menu-portaled .child .ActionDropdown-content1 span,
html[data-se-theme] .ActionDropdown-content .child .ActionDropdown-content1 span {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Submenu items: full-width rows with icon and text */
.securends .ActionDropdown-content1 .child,
.securends .ActionDropdown-content1 a.child,
html[data-se-theme] .ActionDropdown-content1 .child,
html[data-se-theme] .ActionDropdown-content1 a.child,
.se-table-action-menu-portaled .ActionDropdown-content1 .child,
.se-table-action-menu-portaled .ActionDropdown-content1 a.child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--se-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.securends .ActionDropdown-content1 .child:hover,
.securends .ActionDropdown-content1 a.child:hover,
html[data-se-theme] .ActionDropdown-content1 .child:hover,
html[data-se-theme] .ActionDropdown-content1 a.child:hover,
.se-table-action-menu-portaled .ActionDropdown-content1 .child:hover,
.se-table-action-menu-portaled .ActionDropdown-content1 a.child:hover {
  background: var(--se-row-hover, #f1f5f9) !important;
  color: var(--se-brand, #0052cc) !important;
}

.securends .ActionDropdown-content1 .child i.fa,
html[data-se-theme] .ActionDropdown-content1 .child i.fa,
.se-table-action-menu-portaled .ActionDropdown-content1 .child i.fa {
  font-size: 14px !important;
  width: 16px !important;
  min-width: 16px !important;
  text-align: center !important;
  color: var(--se-ink-2) !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

.securends .ActionDropdown-content1 .child:hover i.fa,
html[data-se-theme] .ActionDropdown-content1 .child:hover i.fa,
.se-table-action-menu-portaled .ActionDropdown-content1 .child:hover i.fa {
  color: var(--se-brand, #0052cc) !important;
}

.securends .ReactTable .rt-tbody .rt-tr.-selected .rt-td,
.securends .ReactTable .rt-tr.selected .rt-td {
  background: var(--se-table-selected, var(--se-brand-tint)) !important;
}

/* Action column — reusable: centered 3-dots, never clip the trigger or panel */
.securends .ReactTable:has(.rt-td .ActionDropdown) .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable:has(.rt-td .configActionDropdown) .rt-thead.-header .rt-tr>.rt-th:nth-child(1),
.securends .ReactTable .rt-thead.-header .rt-th.actionColContainer,
.securends .ReactTable .rt-tbody .rt-td.actionColContainer,
.securends .ReactTable .rt-tbody .rt-td:has(.ActionDropdown),
.securends .ReactTable .rt-tbody .rt-td:has(.configActionDropdown) {
  overflow: visible !important;
  text-overflow: unset;
  white-space: normal !important;
  text-align: center !important;
  vertical-align: middle;
}

.securends .ReactTable .rt-tbody .rt-tr-group,
.securends .ReactTable .rt-tbody .rt-tr:has(.ActionDropdown),
.securends .ReactTable .rt-tbody .rt-tr:has(.configActionDropdown) {
  overflow: visible !important;
}

.securends .ReactTable .rt-tbody .rt-td .ActionDropdown,
.securends .ReactTable .rt-tbody .rt-td .configActionDropdown,
.securends .ReactTable .rt-tbody .rt-td .dropdown.badge,
.securends .ReactTable .rt-tbody .rt-td .drop-maindiv,
.securends .ReactTable .rt-tbody .rt-td .drop-maindiv.drop-extra {
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  white-space: normal;
  float: none !important;
  position: relative;
}

.securends .ReactTable .rt-tbody .rt-td .configActionDropdown,
.securends .ReactTable .rt-tbody .rt-td .dropdown.badge,
.securends .ReactTable .rt-tbody .rt-td .drop-maindiv,
.securends .ReactTable .rt-tbody .rt-td .drop-maindiv.drop-extra {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.securends .ReactTable .rt-tbody .rt-td .ActionDropdown {
  width: auto !important;
  display: inline-flex !important;
}

.securends .ReactTable .rt-tbody .rt-td.actionColContainer .mobileView,
.securends .ReactTable .rt-tbody .rt-td:has(.ActionDropdown) .mobileView,
.securends .ReactTable .rt-tbody .rt-td .configActionDropdown .mobileView {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.securends .ReactTable .rt-tbody .rt-td .configActionDropdown .mobileView>div,
.securends .ReactTable .rt-tbody .rt-td .ActionDropdown {
  width: auto !important;
  display: inline-flex !important;
}

.securends .ReactTable .rt-tbody .rt-td:has(.ActionDropdown.open),
.securends .ReactTable .rt-tbody .rt-td:has(.dropdown.open),
.securends .ReactTable .rt-tbody .rt-td:has(.dropdown-menu.show),
.securends .ReactTable .rt-tbody .rt-td:has(.ActionDropdown.show),
.securends .ReactTable .rt-tbody .rt-td:has(.configActionDropdown.show),
.securends .ReactTable .rt-tbody .rt-td:has(.dropdown.badge.show) {
  z-index: 30 !important;
  overflow: visible !important;
}

.securends .ReactTable .actionsDropDown,
.securends .ReactTable .configActionDropdown,
.securends .ReactTable .dropdown.badge {
  z-index: 2 !important;
}

.securends .ReactTable .ActionDropdown.show,
.securends .ReactTable .configActionDropdown.show,
.securends .ReactTable .dropdown.badge.show,
.securends .ReactTable .dropdown.show {
  z-index: 30 !important;
}

.securends .ReactTable .rt-tbody .rt-td .ActionDropdown.open .ActionDropdown-content {
  display: block;
}

.securends .ReactTable a,
.securends .ReactTable a.endpoints {
  color: var(--se-brand) !important;
}

.securends .ReactTable .ActionDropdown-content a,
.securends .ReactTable .ActionDropdown-content .child,
.securends .ReactTable .ActionDropdown-content1 a,
.securends .ReactTable .ActionDropdown-content1 .child {
  color: var(--se-ink) !important;
}

/* Status chips (existing labels / badges — do not drop text) */
.securends .ReactTable .badge-success,
.securends .ReactTable .label-success,
.securends .ReactTable .applications.status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--se-r-pill);
  font-size: 11px !important;
  font-weight: 600;
  background: var(--se-ok-tint) !important;
  color: var(--se-ok) !important;
  text-transform: none !important;
}

.securends .ReactTable .badge-warning,
.securends .ReactTable .label-warning {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--se-r-pill);
  font-size: 11px !important;
  background: var(--se-warn-tint) !important;
  color: var(--se-warn) !important;
}

.securends .ReactTable .badge-danger,
.securends .ReactTable .label-danger {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--se-r-pill);
  font-size: 11px !important;
  background: var(--se-risk-tint) !important;
  color: var(--se-risk) !important;
}

.securends .ReactTable .badge-info,
.securends .ReactTable .label-info {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--se-r-pill);
  font-size: 11px !important;
  background: var(--se-brand-tint) !important;
  color: var(--se-brand) !important;
}

.securends .ReactTable .badge-default,
.securends .ReactTable .label-default {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--se-r-pill);
  font-size: 11px !important;
  background: var(--se-raise) !important;
  color: var(--se-table-muted, var(--se-ink-2)) !important;
}

/* Empty */
.securends .ReactTable .rt-noData {
  padding: 48px 24px !important;
  color: var(--se-table-muted, var(--se-ink-2)) !important;
  font-size: 14px !important;
  font-weight: 500;
}

/* Pagination footer — keep Page / rows / Prev / Next on one horizontal line */
.securends .ReactTable .-pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid var(--se-table-line, var(--se-line)) !important;
  background: var(--se-card) !important;
  padding: 10px 16px !important;
}

.securends .ReactTable .-pagination .-previous,
.securends .ReactTable .-pagination .-next {
  flex: 0 0 auto !important;
  text-align: left !important;
}

.securends .ReactTable .-pagination .-center {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 12px !important;
  min-width: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.securends .ReactTable .-pagination .-btn {
  min-width: 72px;
  height: 32px !important;
  border-radius: 8px !important;
  width: auto !important;
}

.securends .ReactTable .-pagination .-pageInfo,
.securends .ReactTable .-pagination .-pageJump,
.securends .ReactTable .-pagination .-pageSizeOptions {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  float: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  color: var(--se-table-muted, var(--se-ink-2));
  font-size: 13px;
}

/* inline-flex drops JSX whitespace, which glued "Page187of198". Restore
   spaces: after Page, before of, and between of and the page count. */
.securends .ReactTable .-pagination .-pageInfo,
html[data-se-theme] .ReactTable .-pagination .-pageInfo {
  gap: 0.4em !important;
}

.securends .ReactTable .-pagination select {
  width: auto !important;
  min-width: 88px !important;
  max-width: 120px !important;
  height: 32px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

@media (max-width: 960px) {
  .securends .ReactTable .rt-table {
    max-height: 70vh;
  }
}

/* Nested tables (UAR expand rows): no 600px trap, no extra freeze */
.securends .ReactTable .rt-tbody .ReactTable {
  border: none !important;
  box-shadow: none !important;
}

.securends .ReactTable .rt-tbody .ReactTable .rt-table {
  max-height: none !important;
  overflow: visible !important;
}

.securends .ReactTable .rt-tbody .ReactTable .rt-thead .rt-th:nth-child(1),
.securends .ReactTable .rt-tbody .ReactTable .rt-thead .rt-th:nth-child(2),
.securends .ReactTable .rt-tbody .ReactTable .rt-tbody .rt-td:nth-child(1),
.securends .ReactTable .rt-tbody .ReactTable .rt-tbody .rt-td:nth-child(2) {
  position: static !important;
  left: auto !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .securends .ReactTable .rt-tbody .rt-td {
    transition: none !important;
    animation: none !important;
  }
}

/* Assignment pivot table: no zebra; hover is per-row only */
.securends .se-campaign-assignment-page .campaignAssinment.-striped .rt-tr.-odd,
.securends .se-campaign-assignment-page .campaignAssinment.-striped .rt-tr.-even,
.securends .se-campaign-assignment-page .campaignAssinment .rt-tbody .rt-tr-group,
.securends .se-campaign-assignment-page .campaignAssinment.-striped .rt-tbody .rt-tr.-odd>.rt-td,
.securends .se-campaign-assignment-page .campaignAssinment.-striped .rt-tbody .rt-tr.-even>.rt-td,
.securends .se-campaign-assignment-page .campaignAssinment .rt-tbody .rt-tr>.rt-td {
  background: var(--se-card) !important;
}

.securends .se-campaign-assignment-page .campaignAssinment .rt-tbody .rt-tr:hover>.rt-td {
  background: var(--se-table-hover) !important;
}

.securends .se-campaign-election-page .ReactTable.-striped .rt-tr.-odd,
.securends .se-campaign-election-page .ReactTable.-striped .rt-tr.-even,
.securends .se-direct-elections-page .ReactTable.-striped .rt-tr.-odd,
.securends .se-direct-elections-page .ReactTable.-striped .rt-tr.-even,
.securends .se-campaign-election-page .ReactTable.-striped .rt-tbody .rt-tr.-odd>.rt-td,
.securends .se-campaign-election-page .ReactTable.-striped .rt-tbody .rt-tr.-even>.rt-td,
.securends .se-direct-elections-page .ReactTable.-striped .rt-tbody .rt-tr.-odd>.rt-td,
.securends .se-direct-elections-page .ReactTable.-striped .rt-tbody .rt-tr.-even>.rt-td,
.securends .se-campaign-election-page .ReactTable .rt-tbody .rt-tr>.rt-td,
.securends .se-direct-elections-page .ReactTable .rt-tbody .rt-tr>.rt-td {
  background: var(--se-card) !important;
}

.securends .se-campaign-election-page .ReactTable .rt-tbody .rt-tr:hover>.rt-td,
.securends .se-direct-elections-page .ReactTable .rt-tbody .rt-tr:hover>.rt-td,
.securends .se-campaign-election-page .ReactTable .rt-tbody .rt-tr:hover>.rt-td:last-child,
.securends .se-direct-elections-page .ReactTable .rt-tbody .rt-tr:hover>.rt-td:last-child,
.securends .se-campaign-election-page .ReactTable .rt-tbody .rt-tr:has(.s-btns:hover)>.rt-td,
.securends .se-direct-elections-page .ReactTable .rt-tbody .rt-tr:has(.s-btns:hover)>.rt-td,
.securends .se-campaign-election-page .ReactTable .rt-tbody .rt-tr:has(.flipswitch:hover)>.rt-td,
.securends .se-direct-elections-page .ReactTable .rt-tbody .rt-tr:has(.flipswitch:hover)>.rt-td,
.securends .se-campaign-election-page .ReactTable .rt-tbody .rt-tr:has(.flipswitch-red:hover)>.rt-td,
.securends .se-direct-elections-page .ReactTable .rt-tbody .rt-tr:has(.flipswitch-red:hover)>.rt-td,
.securends .se-campaign-election-page .ReactTable .rt-tbody .rt-tr:has(.revoke-action-button:hover)>.rt-td,
.securends .se-direct-elections-page .ReactTable .rt-tbody .rt-tr:has(.revoke-action-button:hover)>.rt-td {
  background: var(--se-table-hover) !important;
}

/* Header labels: show the complete column name (Service Account, not Service A…).
   Body cells still ellipsis. seTableFreeze.js grows column min-width to the label. */
.securends .ReactTable .rt-thead.-header .rt-th,
.securends .ReactTable .rt-thead.-header .rt-th.rt-resizable-header {
  overflow: visible !important;
  position: relative !important;
}

.securends .ReactTable .rt-thead.-header .rt-resizable-header-content,
.securends .ReactTable .rt-thead.-header .rt-resizable-header-content>div:not(.custom-control) {
  overflow: hidden;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/*
  Sort caret: pickels draws ::after on the Header <div>. kit.css uses
  display:contents on that div, so the chevron overlaps the label (CAMPAIGN).
  Hide the pickels caret and place a token-colored one on the content box.
*/
.securends .ReactTable .rt-thead.-header .rt-th.-sort-asc .rt-resizable-header-content,
.securends .ReactTable .rt-thead.-header .rt-th.-sort-desc .rt-resizable-header-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  overflow: visible !important;
}

.securends .ReactTable .rt-thead.-header .rt-th.-sort-asc .rt-resizable-header-content::after,
.securends .ReactTable .rt-thead.-header .rt-th.-sort-desc .rt-resizable-header-content::after {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 0 !important;
  height: 0 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  vertical-align: middle;
}

.securends .ReactTable .rt-thead.-header .rt-th.-sort-asc .rt-resizable-header-content::after {
  border-style: solid !important;
  border-width: 0 4px 5px 4px !important;
  border-color: transparent transparent var(--se-table-header-ink, var(--se-ink-2)) transparent !important;
}

.securends .ReactTable .rt-thead.-header .rt-th.-sort-desc .rt-resizable-header-content::after {
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: var(--se-table-header-ink, var(--se-ink-2)) transparent transparent transparent !important;
}

.securends .ReactTable .-sort-asc .rt-resizable-header-content div::after,
.securends .ReactTable .-sort-desc .rt-resizable-header-content div::after,
.securends .ReactTable .rt-thead.-header .rt-th.-sort-asc .rt-resizable-header-content > div::after,
.securends .ReactTable .rt-thead.-header .rt-th.-sort-desc .rt-resizable-header-content > div::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

/* App-wide: header labels left-align. Checkbox-only headers stay centered below. */
.securends .ReactTable .rt-thead.-header .rt-th:not(.se-checkbox-col):not(:has(#selectAll)):not(:has(.custom-checkbox)):not(:has(input[type="checkbox"])),
.securends .ReactTable .rt-thead.-header .rt-th:not(.se-checkbox-col):not(:has(#selectAll)):not(:has(.custom-checkbox)) .rt-resizable-header,
.securends .ReactTable .rt-thead.-header .rt-th:not(:has(#selectAll)):not(:has(.custom-checkbox)) .rt-resizable-header-content,
.securends .ReactTable .rt-thead.-header .rt-th:not(:has(#selectAll)):not(:has(.custom-checkbox)) .rt-resizable-header-content > div:not(.custom-control):not(.custom-checkbox):not(.rt-resizer),
.securends .se-campaign-preview-page .ReactTable .rt-thead.-header .rt-th,
.securends .se-campaign-preview-page .ReactTable .rt-thead.-header .rt-th.se-cp-col-num,
.securends .se-campaign-preview-page .ReactTable .rt-thead.-header .rt-th.se-cp-col-num .rt-resizable-header-content,
.securends .se-campaign-assignment-page .campaignAssinment .rt-thead.-header .rt-th,
.securends .se-campaign-assignment-page .campaignAssinment .rt-thead.-header .rt-th.se-ca-col-num,
.securends .se-campaign-assignment-page .campaignAssinment .rt-thead.-header .rt-th.se-ca-col-review,
.securends .se-campaign-assignment-page .campaignAssinment .rt-thead.-header .rt-th.se-ca-col-num .rt-resizable-header-content {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Table checkbox column (Header #selectAll & Row checkboxes) — centered, aligned, and 100% accurate click hit area */
.securends .ReactTable .se-checkbox-col,
.securends .ReactTable .rt-th.se-checkbox-col,
.securends .ReactTable .rt-td.se-checkbox-col,
.securends .ReactTable .rt-thead.-header .rt-th:has(#selectAll),
.securends .ReactTable .rt-thead.-header .rt-th:has(> .rt-resizable-header-content .custom-checkbox),
.securends .ReactTable .rt-thead.-header .rt-th:has(.custom-checkbox),
.securends .ReactTable .rt-thead.-header .rt-th:has(input[type="checkbox"]),
.securends .ReactTable .rt-tbody .rt-td:has(.custom-checkbox),
.securends .ReactTable .rt-tbody .rt-td:has(.credentials),
.securends .ReactTable .rt-tbody .rt-td:has(input[type="checkbox"]),
.securends .ReactTable.endpoint-credential .rt-thead.-header .rt-tr > .rt-th:first-child,
.securends .ReactTable.endpoint-credential .rt-tbody .rt-tr > .rt-td:first-child {
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  min-width: 52px;
  box-sizing: border-box !important;
  cursor: pointer;
}

.securends .ReactTable .se-checkbox-col .rt-resizable-header-content,
.securends .ReactTable .rt-th.se-checkbox-col .rt-resizable-header-content,
.securends .ReactTable .rt-thead.-header .rt-th:has(#selectAll) .rt-resizable-header-content,
.securends .ReactTable .rt-thead.-header .rt-th:has(.custom-checkbox) .rt-resizable-header-content,
.securends .ReactTable.endpoint-credential .rt-thead.-header .rt-tr > .rt-th:first-child .rt-resizable-header-content {
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.securends .ReactTable .se-checkbox-col .custom-control.custom-checkbox,
.securends .ReactTable .rt-thead.-header .custom-control.custom-checkbox,
.securends .ReactTable .rt-tbody .rt-td .custom-control.custom-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: 0 auto !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  text-transform: none;
  letter-spacing: 0;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Label is locked to 24px container so ::before (top: 50%, left: 50%) is mathematically dead-center */
.securends .ReactTable .se-checkbox-col .custom-control-label,
.securends .ReactTable .rt-thead.-header .custom-control-label,
.securends .ReactTable .rt-tbody .rt-td .custom-control-label {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* Centered input hit target covers full cell width & height without shifting visual checkbox */
.securends .ReactTable .se-checkbox-col .custom-control-input,
.securends .ReactTable .rt-thead.-header .custom-control-input,
.securends .ReactTable .rt-tbody .rt-td .custom-control-input {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 38px !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 5 !important;
}

/* Visual checkbox box (::before) and checkmark (::after) centered in the 24px container */
.securends .ReactTable .se-checkbox-col .custom-control-label::before,
.securends .ReactTable .se-checkbox-col .custom-control-label::after,
.securends .ReactTable .rt-thead.-header .custom-control-label::before,
.securends .ReactTable .rt-thead.-header .custom-control-label::after,
.securends .ReactTable .rt-tbody .rt-td .custom-control-label::before,
.securends .ReactTable .rt-tbody .rt-td .custom-control-label::after {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

/* Subtle hover halo to show active interactivity */
.securends .ReactTable .rt-thead.-header .custom-control.custom-checkbox:hover .custom-control-label::before,
.securends .ReactTable .rt-tbody .rt-td .custom-control.custom-checkbox:hover .custom-control-label::before {
  border-color: var(--se-brand) !important;
  box-shadow: 0 0 0 3px var(--se-brand-tint) !important;
}

.securends .ReactTable .rt-tbody .rt-td:has(.custom-checkbox),
.securends .ReactTable .rt-tbody .rt-td:has(.credentials),
.securends .ReactTable .rt-tbody .rt-td:has(input[type="checkbox"]) {
  overflow: visible !important;
  text-overflow: unset;
}

/* Header columns are extendable — keep the ReactTable resizer hittable.
   Kit used display:contents on .rt-th > div which flattened .rt-resizer. */

.securends .ReactTable .rt-thead.-header .rt-resizer {
  display: block !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 10px !important;
  height: 100% !important;
  cursor: col-resize !important;
  z-index: 12 !important;
  pointer-events: auto !important;
  user-select: none;
}

.securends .ReactTable .rt-thead.-header .rt-resizer:hover {
  background: var(--se-brand) !important;
  opacity: 0.28;
}

.securends .ReactTable .rt-thead.-header .rt-resizer::before,
.securends .ReactTable .rt-thead.-header .rt-resizer::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Column config — floating icon at top-right corner of the table frame
   (not a column; not sticky last-col). Overlay only.
   Also theme via html[data-se-theme] / .modal — portaled drawers sit outside
   .securends and otherwise render an unstyled tiny button (looks like a dash).
   -------------------------------------------------------------------------- */
html[data-se-theme] .se-rt-colcfg-host,
.securends .se-rt-colcfg-host,
.modal .se-rt-colcfg-host {
  position: relative;
  width: 100%;
  overflow: visible;
}

html[data-se-theme] .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-header,
.securends .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-header,
.modal .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-header {
  /* Room so the corner icon does not cover the last header label */
  padding-right: 0;
}

/* Clear the last header / filter cell — thead padding alone does not shift .rt-th text */
html[data-se-theme] .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-header .rt-th:last-child,
html[data-se-theme] .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-filters .rt-th:last-child,
.securends .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-header .rt-th:last-child,
.securends .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-filters .rt-th:last-child,
.modal .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-header .rt-th:last-child,
.modal .se-rt-colcfg-host.has-colcfg .ReactTable.se-rt-has-colcfg .rt-thead.-filters .rt-th:last-child {
  padding-right: 44px !important;
}

html[data-se-theme] .se-rt-colcfg-corner,
.securends .se-rt-colcfg-corner,
.modal .se-rt-colcfg-corner {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  height: var(--se-table-colhead, 36px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  box-sizing: border-box;
  pointer-events: none;
}

/* Portaled to body so table overflow cannot clip the bars icon */
html[data-se-theme] .se-rt-colcfg-corner.se-rt-colcfg-corner--fixed,
.securends .se-rt-colcfg-corner.se-rt-colcfg-corner--fixed,
.modal .se-rt-colcfg-corner.se-rt-colcfg-corner--fixed,
body > .se-rt-colcfg-corner.se-rt-colcfg-corner--fixed {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 25 !important;
  pointer-events: none;
}

html[data-se-theme] .se-rt-colcfg-corner .se-rt-colcfg,
.securends .se-rt-colcfg-corner .se-rt-colcfg,
.modal .se-rt-colcfg-corner .se-rt-colcfg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: auto;
}

html[data-se-theme] .se-rt-colcfg-btn,
.securends .se-rt-colcfg-btn,
.modal .se-rt-colcfg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: var(--se-r-sm, 8px);
  border: 1.5px solid var(--se-ink-3);
  background: var(--se-card);
  color: var(--se-brand);
  cursor: pointer;
  box-shadow: var(--se-shadow);
  appearance: none;
  -webkit-appearance: none;
}

html[data-se-theme] .se-rt-colcfg-btn:hover,
html[data-se-theme] .se-rt-colcfg-btn.is-open,
.securends .se-rt-colcfg-btn:hover,
.securends .se-rt-colcfg-btn.is-open,
.modal .se-rt-colcfg-btn:hover,
.modal .se-rt-colcfg-btn.is-open {
  border-color: var(--se-brand);
  background: var(--se-brand-tint);
}

html[data-se-theme] .se-rt-colcfg-bars,
.securends .se-rt-colcfg-bars,
.modal .se-rt-colcfg-bars {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 12px;
}

html[data-se-theme] .se-rt-colcfg-bars>span,
.securends .se-rt-colcfg-bars>span,
.modal .se-rt-colcfg-bars>span {
  display: block;
  width: 2.5px;
  border-radius: 1px;
  background: var(--se-ink-2);
}

html[data-se-theme] .se-rt-colcfg-bars>span:nth-child(1),
.securends .se-rt-colcfg-bars>span:nth-child(1),
.modal .se-rt-colcfg-bars>span:nth-child(1) {
  height: 7px;
}

html[data-se-theme] .se-rt-colcfg-bars>span:nth-child(2),
.securends .se-rt-colcfg-bars>span:nth-child(2),
.modal .se-rt-colcfg-bars>span:nth-child(2) {
  height: 10px;
}

html[data-se-theme] .se-rt-colcfg-bars>span:nth-child(3),
.securends .se-rt-colcfg-bars>span:nth-child(3),
.modal .se-rt-colcfg-bars>span:nth-child(3) {
  height: 12px;
}

/* Portal panel (appended to body — theme via :root / html[data-se-theme]) */
.se-rt-colcfg-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: var(--se-z-toast, 1200);
  width: 280px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  margin: 0;
  transform: none;
  background: var(--se-card, #fff);
  color: var(--se-ink, #151a21);
  border: 1px solid var(--se-line, #e5e8ec);
  border-radius: var(--se-r-card, 14px);
  box-shadow: var(--se-shadow-lg, 0 20px 45px rgba(15, 23, 42, 0.12));
  font-family: var(--se-sans, Inter, sans-serif);
  overflow: hidden;
  box-sizing: border-box;
}

.se-rt-colcfg-search {
  position: relative;
  padding: 10px 12px 6px;
}

.se-rt-colcfg-search .fa-search {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-40%);
  color: var(--se-ink-3, #8c949f);
  font-size: 12px;
  pointer-events: none;
}

.se-rt-colcfg-search .form-control {
  height: 32px !important;
  padding: 0 10px 0 30px !important;
  border-radius: var(--se-r-pill, 20px) !important;
  border: 1px solid var(--se-line, #e5e8ec) !important;
  background: var(--se-page, #f6f7f9) !important;
  box-shadow: none !important;
  font-size: 13px;
  color: var(--se-ink, #151a21);
}

.se-rt-colcfg-search .form-control:focus {
  border-color: var(--se-brand, #17457e) !important;
  box-shadow: 0 0 0 3px var(--se-brand-tint, #eaf0f8) !important;
  outline: none;
}

.se-rt-colcfg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--se-ink, #151a21);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.se-rt-colcfg-row:hover {
  background: var(--se-row-hover, #eaf0f8);
}

.se-rt-colcfg-row--all {
  border-bottom: 1px solid var(--se-line, #e5e8ec);
  font-weight: 600;
}

.se-rt-colcfg-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--se-brand, #17457e);
  cursor: pointer;
}

.se-rt-colcfg-row span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Match table header names (exact Header text, same uppercase chrome). */
.se-rt-colcfg-list .se-rt-colcfg-row span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.se-rt-colcfg-list {
  flex: 1 1 auto;
  overflow: auto;
  max-height: 260px;
  padding: 4px 0;
}

.se-rt-colcfg-empty {
  padding: 16px;
  text-align: center;
  color: var(--se-ink-3, #8c949f);
  font-size: 13px;
}

.se-rt-colcfg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--se-line, #e5e8ec);
  background: var(--se-page, #f6f7f9);
}

.se-rt-colcfg-restore {
  border: none;
  background: none;
  padding: 0;
  color: var(--se-brand, #17457e);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.se-rt-colcfg-restore:hover {
  text-decoration: underline;
}

.se-rt-colcfg-count {
  font-size: 12px;
  color: var(--se-ink-3, #8c949f);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Progress column — shared ProgressBarCell (track + fill + %)
   Beats pickels `.progress-bar-custom { background: #e9e9e9 !important }`
   -------------------------------------------------------------------------- */

.securends .ReactTable .se-progress-cell,
.securends .se-progress-cell {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 100px;
  max-width: 148px;
  padding: 2px 0;
  box-sizing: border-box;
}

.securends .ReactTable .se-progress-track,
.securends .se-progress-track {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--se-page) !important;
  border: 1px solid var(--se-line) !important;
  box-sizing: border-box;
}

.securends .ReactTable .se-progress-fill,
.securends .se-progress-fill {
  height: 100%;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: inherit;
  background: var(--se-brand) !important;
  transition: width 180ms ease;
}

.securends .ReactTable .se-progress-pct,
.securends .se-progress-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--se-ink) !important;
  pointer-events: none;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

.securends .se-progress-empty .se-progress-track {
  border-color: var(--se-risk) !important;
}

.securends .se-progress-empty .se-progress-fill {
  background: var(--se-risk-tint, #fecaca) !important;
}

.securends .se-progress-empty .se-progress-pct {
  color: var(--se-risk) !important;
}

.securends .se-progress-low .se-progress-fill {
  background: var(--se-risk) !important;
}

.securends .se-progress-mid .se-progress-fill {
  background: var(--se-warn) !important;
}

.securends .se-progress-high .se-progress-fill {
  background: var(--se-info) !important;
}

.securends .se-progress-done .se-progress-fill {
  background: var(--se-ok) !important;
}

.securends .se-progress-done .se-progress-pct {
  color: #fff !important;
}

/* Legacy Bootstrap progress bars still rendered in some cells */
.securends .ReactTable .progress-bar.progress-bar-custom {
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Header progress pill — track left + % right (Campaign Preview / UAR toolbars)
   Matches Campaign Assignment pill; shared via ProgressBarCell variant="header"
   -------------------------------------------------------------------------- */

.securends .se-header-progress {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  min-width: 0;
  height: 28px !important;
  padding: 0 10px;
  margin: 0 4px 0 0 !important;
  border-radius: 999px;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  box-sizing: border-box;
  flex-shrink: 0;
  position: static !important;
  float: none !important;
}

.securends .se-header-progress-track {
  width: 72px;
  height: 8px !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: var(--se-raise, var(--se-page)) !important;
  border: none !important;
  position: relative !important;
  flex-shrink: 0;
}

.securends .se-header-progress-fill {
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 999px;
  background: var(--se-brand) !important;
  transition: width 180ms ease;
}

.securends .se-header-progress-label {
  position: static !important;
  inset: auto;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--se-ink-2) !important;
  line-height: 1;
  min-width: 28px;
  font-variant-numeric: tabular-nums;
}

.securends .se-header-progress.se-progress-empty .se-header-progress-fill {
  background: var(--se-risk-tint) !important;
}

.securends .se-header-progress.se-progress-empty .se-header-progress-label {
  color: var(--se-risk) !important;
}

.securends .se-header-progress.se-progress-brand .se-header-progress-fill,
.securends .se-header-progress.se-progress-low .se-header-progress-fill,
.securends .se-header-progress.se-progress-mid .se-header-progress-fill,
.securends .se-header-progress.se-progress-high .se-header-progress-fill {
  background: var(--se-brand) !important;
}

.securends .se-header-progress.se-progress-brand .se-header-progress-label,
.securends .se-header-progress.se-progress-low .se-header-progress-label,
.securends .se-header-progress.se-progress-mid .se-header-progress-label,
.securends .se-header-progress.se-progress-high .se-header-progress-label {
  color: var(--se-risk) !important;
}

.securends .se-header-progress.se-progress-done .se-header-progress-fill {
  background: var(--se-ok) !important;
}

.securends .se-header-progress.se-progress-done .se-header-progress-label {
  color: var(--se-ok) !important;
}

/* --------------------------------------------------------------------------
   Detail progress — wide bar + "% Complete" caption (Campaign Details card)
   -------------------------------------------------------------------------- */

.securends .se-detail-progress {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 14px 0 4px;
}

.securends .se-detail-progress-track {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--se-raise, var(--se-page)) !important;
  border: 1px solid var(--se-line) !important;
  box-sizing: border-box;
}

.securends .se-detail-progress-fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--se-brand) !important;
  transition: width 180ms ease;
}

.securends .se-detail-progress-caption {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--se-ink) !important;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.securends .se-detail-progress.se-progress-empty .se-detail-progress-fill {
  background: var(--se-risk-tint) !important;
}

.securends .se-detail-progress.se-progress-empty .se-detail-progress-caption {
  color: var(--se-risk) !important;
}

.securends .se-detail-progress.se-progress-done .se-detail-progress-fill {
  background: var(--se-ok) !important;
}

.securends .se-detail-progress.se-progress-done .se-detail-progress-caption {
  color: var(--se-ok) !important;
}
/* App-wide toasts — overlay react-notifications.
   Keep NotificationContainer / NotificationManager.success|error|warning|info.
   Do not change duration, click-to-dismiss, or message text. */

.securends .notification-container,
.notification-container {
  box-sizing: border-box;
  position: fixed !important;
  top: calc(var(--se-sticky-top, var(--se-app-header, 60px)) + 12px) !important;
  right: 20px !important;
  left: auto !important;
  width: 380px !important;
  max-width: calc(100vw - 40px) !important;
  padding: 0 !important;
  z-index: 20000 !important;
  max-height: calc(100% - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
}

/* Direct Elections: toast sat on sticky-top and covered Save / Next Review / Approve All.
   Sit in the header band (right) so the full toast clears the sticky action bar. */
.securends:has(.se-direct-elections-page) > .notification-container,
.securends:has(.se-direct-elections-page) .notification-container {
  top: 10px !important;
}

.securends .notification,
.notification {
  pointer-events: auto;
  box-sizing: border-box;
  position: relative;
  padding: 12px 16px 12px 52px !important;
  margin-top: 10px !important;
  border-radius: var(--se-r) !important;
  border: 1px solid var(--se-line) !important;
  box-shadow: var(--se-shadow-lg) !important;
  color: var(--se-ink) !important;
  background: var(--se-card) !important;
  font-family: var(--se-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
  cursor: pointer;
}

.securends .notification .title,
.notification .title {
  font-family: var(--se-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--se-ink) !important;
  margin: 0 0 2px !important;
}

.securends .notification .message,
.notification .message,
.securends .notification-message,
.notification-message {
  font-family: var(--se-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--se-ink) !important;
}

.securends .notification:before,
.notification:before {
  font-family: "Notification" !important;
  color: inherit;
  top: 50%;
  left: 14px;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  font-size: 22px;
  line-height: 24px;
}

.securends .notification-success,
.notification-success {
  background: var(--se-ok-tint) !important;
  border-color: var(--se-ok) !important;
  color: var(--se-ink) !important;
}

.securends .notification-success:before,
.notification-success:before {
  color: var(--se-ok) !important;
}

.securends .notification-error,
.notification-error {
  background: var(--se-risk-tint) !important;
  border-color: var(--se-risk) !important;
  color: var(--se-ink) !important;
}

.securends .notification-error:before,
.notification-error:before {
  color: var(--se-risk) !important;
}

.securends .notification-warning,
.notification-warning {
  background: var(--se-warn-tint) !important;
  border-color: var(--se-warn) !important;
  color: var(--se-ink) !important;
}

.securends .notification-warning:before,
.notification-warning:before {
  color: var(--se-warn) !important;
}

.securends .notification-info,
.notification-info {
  background: var(--se-brand-tint) !important;
  border-color: var(--se-brand-line, var(--se-brand)) !important;
  color: var(--se-ink) !important;
}

.securends .notification-info:before,
.notification-info:before {
  color: var(--se-info, var(--se-brand)) !important;
}

.securends .notification-enter,
.notification-enter {
  visibility: hidden;
  transform: translate3d(16px, 0, 0) !important;
  opacity: 0;
}

.securends .notification-enter.notification-enter-active,
.notification-enter.notification-enter-active {
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
  opacity: 1;
  transition: transform var(--se-ease), opacity var(--se-ease);
}

.securends .notification-exit,
.notification-exit {
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
  opacity: 1;
}

.securends .notification-exit.notification-exit-active,
.notification-exit.notification-exit-active {
  visibility: hidden;
  transform: translate3d(16px, 0, 0) !important;
  opacity: 0;
  transition: transform var(--se-ease), opacity var(--se-ease);
}

@media (max-width: 480px) {
  .securends .notification-container,
  .notification-container {
    right: 12px !important;
    width: calc(100vw - 24px) !important;
  }
}

/* Profile menu + nested Theme color flyout (presentation only). */

.se-profile-popper,
body>.se-profile-popper,
body>.securends.se-profile-popper {
  overflow: visible !important;
  z-index: 2000 !important;
  position: fixed !important;
  top: var(--se-profile-top, calc(var(--se-app-header) + 8px)) !important;
  left: auto !important;
  right: var(--se-profile-right, 16px) !important;
  width: max-content !important;
  transform: none !important;
  will-change: auto !important;
  pointer-events: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-se-nav="horizontal"] .securends .se-profile-popper,
html[data-se-nav="horizontal"] body>.se-profile-popper {
  position: fixed !important;
  top: var(--se-profile-top, var(--se-hnav-profile-top, calc(var(--se-app-header) + var(--se-hnav-bar-h) + 8px))) !important;
  right: var(--se-profile-right, var(--se-hnav-profile-right, calc(var(--se-header-inset-x) + 16px))) !important;
  left: auto !important;
  z-index: 2000 !important;
}

/* Beat pickels `#menu-list-grow { top: 13px }` — that gap made the panel float. */
.securends #menu-list-grow,
.securends .se-profile-popper #menu-list-grow,
.se-profile-popper #menu-list-grow,
body>.se-profile-popper #menu-list-grow {
  position: static !important;
  top: 0 !important;
}

.se-profile-menu {
  overflow: visible !important;
  border-radius: 12px !important;
  box-shadow: var(--se-shadow-md) !important;
  border: 1px solid var(--border-strong, var(--se-line));
  min-width: 280px;
  background: var(--bg-surface-elevated, var(--se-card)) !important;
  background-color: var(--bg-surface-elevated, var(--se-card)) !important;
  opacity: 1 !important;
  padding: 0 !important;
}

.securends .se-profile-menu .account-menu,
.securends .se-profile-menu ul.account-menu {
  overflow: visible !important;
  background: var(--bg-surface-elevated, var(--se-card)) !important;
}

.account-menu {
  min-width: 280px;
  width: auto !important;
  padding: 0 !important;
  background: var(--bg-surface-elevated, var(--se-card)) !important;
}

/* Beat pickels-v3 `.SidebarMobile ul.account-menu li { width: 130px }` */
.securends .SidebarMobile ul.account-menu,
.securends .se-profile-menu ul.account-menu {
  min-width: 280px;
  width: auto !important;
  padding: 0 0 8px !important;
  background: var(--se-page) !important;
}

.securends .SidebarMobile ul.account-menu .se-settings-item button.se-settings-trigger {
  width: 100% !important;
  padding: 0px !important;

}

.securends .SidebarMobile ul.account-menu>li:not(.se-profile-head):not(.se-profile-divider),
.securends .SidebarMobile ul.account-menu>a,
.securends .SidebarMobile ul.account-menu .se-theme-item,
.securends .SidebarMobile ul.account-menu .se-settings-item,
.securends .se-profile-menu ul.account-menu li:not(.se-profile-head):not(.se-profile-divider),
.securends .se-profile-menu ul.account-menu a {
  width: 100% !important;
  min-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block;
  box-sizing: border-box !important;
}

.securends .se-profile-menu a,
.securends .se-profile-menu a:hover,
.securends .se-profile-menu a:focus {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

.securends .SidebarMobile .se-profile-menu li,
.securends .SidebarMobile .se-profile-menu li div,
.securends.SidebarMobile.se-profile-popper .se-profile-menu li,
.securends.SidebarMobile.se-profile-popper .se-profile-menu li div,
.securends.SidebarMobile.se-profile-popper .se-profile-menu .se-profile-label {
  margin-left: 0 !important;
  width: auto !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.securends .se-profile-menu [class*="dropdownItem"],
.securends .se-profile-menu .dropdownItem,
.securends .se-profile-menu .MuiMenuItem-root,
.securends .se-profile-menu .MuiListItem-root,
.securends .se-profile-menu [role="menuitem"],
.securends .se-profile-menu .se-theme-trigger,
.securends .se-profile-menu .se-settings-trigger,
.securends .se-profile-menu .se-profile-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 0px !important;
  position: relative !important;
  border-radius: 0 !important;
  font-family: var(--se-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--se-ink) !important;
  background: transparent !important;
  box-sizing: border-box !important;
  border-left: 3px solid transparent !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  cursor: pointer;
}

.securends .se-profile-menu .MuiTouchRipple-root {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
}

.se-profile-ico,
.securends .se-profile-menu .se-profile-ico,
.securends .se-profile-menu .se-profile-row>.fa:not(.se-settings-chevron),
.securends .se-profile-menu .MuiMenuItem-root>.fa:not(.se-settings-chevron) {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--se-ink-2);
  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center !important;
  position: static !important;
  float: none !important;
  transition: color 0.15s ease !important;
}

.securends .se-profile-menu .se-profile-ico::before,
.securends .se-profile-menu .se-profile-row>.fa:not(.se-settings-chevron)::before {
  display: block;
  width: 20px;
  text-align: center;
  margin: 0 !important;
}

.securends .se-profile-menu .se-profile-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MUI internal ListItemText wrapper — force it to be transparent so flex layout wins */
.securends .se-profile-menu .MuiListItemText-root,
.securends .se-profile-menu .MuiListItemText-primary {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* MUI v4 applies paddingLeft/paddingRight via MuiListItem-gutters — strip them */
.securends .se-profile-menu .MuiListItem-gutters {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.securends .se-profile-menu .MuiMenuItem-root.MuiListItem-gutters,
.securends .se-profile-menu [class*="dropdownItem"].MuiListItem-gutters {
  padding: 10px 16px !important;
}

.securends .se-profile-menu [class*="dropdownItem"]:hover,
.securends .se-profile-menu .dropdownItem:hover,
.securends .se-profile-menu .MuiMenuItem-root:hover,
.securends .se-profile-menu [role="menuitem"]:hover,
.securends .se-profile-menu [class*="dropdownItem"]:focus,
.securends .se-profile-menu .dropdownItem:focus,
.securends .se-profile-menu .MuiMenuItem-root:focus,
.securends .se-profile-menu [role="menuitem"]:focus,
.securends .se-theme-trigger:hover,
.securends .se-theme-item.is-open .se-theme-trigger,
.securends .se-settings-trigger:hover,
.securends .se-settings-item.is-open .se-settings-trigger {
  background: var(--se-brand-tint, #EAF0F8) !important;
  color: var(--se-brand) !important;
  border-left-color: var(--se-brand) !important;
}

.securends .se-profile-menu [class*="dropdownItem"]:hover .se-profile-ico,
.securends .se-profile-menu [class*="dropdownItem"]:hover .fa,
.securends .se-profile-menu .MuiMenuItem-root:hover .se-profile-ico,
.securends .se-profile-menu .MuiMenuItem-root:hover .fa,
.securends .se-profile-menu [role="menuitem"]:hover .se-profile-ico,
.securends .se-profile-menu [role="menuitem"]:hover .fa,
.securends .se-settings-trigger:hover .se-profile-ico,
.securends .se-settings-trigger:hover .fa,
.securends .se-settings-item.is-open .se-settings-trigger .se-profile-ico,
.securends .se-settings-item.is-open .se-settings-trigger .fa {
  color: var(--se-brand) !important;
}

.securends .se-theme-option:hover {
  background: var(--se-brand-tint, #EAF0F8) !important;
  color: var(--se-brand) !important;
}

/* Link wrapper hover passthrough — hover on <a> shows menu row highlight */
.securends .se-profile-menu ul.account-menu>a:hover .MuiMenuItem-root,
.securends .se-profile-menu ul.account-menu>a:focus .MuiMenuItem-root {
  background: var(--se-brand-tint, #EAF0F8) !important;
  color: var(--se-brand) !important;
  border-left-color: var(--se-brand) !important;
}

.securends .se-profile-menu ul.account-menu>a:hover .MuiMenuItem-root .se-profile-ico,
.securends .se-profile-menu ul.account-menu>a:hover .MuiMenuItem-root .fa,
.securends .se-profile-menu ul.account-menu>a:focus .MuiMenuItem-root .se-profile-ico,
.securends .se-profile-menu ul.account-menu>a:focus .MuiMenuItem-root .fa {
  color: var(--se-brand) !important;
}

.securends .SidebarMobile li.se-theme-item,
.securends .se-profile-menu li.se-theme-item,
.securends .SidebarMobile ul.account-menu .se-theme-item {
  list-style: none;
  position: relative;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  width: auto !important;
  min-width: 100%;
  overflow: visible !important;
}

.se-theme-trigger,
.se-theme-option {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--se-ink);
  font-family: var(--se-sans);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  padding: 12px 18px;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--se-ease);
}

.securends .se-profile-menu .se-theme-trigger .se-profile-ico {
  margin: 0 !important;
}

.se-theme-option .fa-check {
  width: 18px;
  color: var(--se-ink-2);
  font-size: 16px;
  text-align: center;
}

.se-theme-chevron {
  font-size: 11px;
  color: var(--se-ink-3);
  margin-left: auto;
  flex-shrink: 0;
}

.se-theme-flyout {
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  right: 100% !important;
  margin: 0 8px 0 0 !important;
  min-width: 188px;
  padding: 8px 0;
  list-style: none;
  background: var(--se-card);
  border: 1px solid var(--se-line);
  border-radius: 10px;
  box-shadow: var(--se-shadow-md);
  z-index: 1400;
}

.se-theme-option {
  min-height: 40px;
  padding: 10px 14px;
  gap: 0;
}

.se-theme-option.is-selected {
  background: var(--se-brand-tint);
  color: var(--se-brand);
}

.se-theme-swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  margin-right: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
}

.se-theme-option--white .se-theme-swatch {
  border-color: rgba(15, 23, 42, 0.22);
}

.se-theme-check {
  margin-left: auto;
  color: var(--se-brand) !important;
}

/* Light swatches (White / B&W) — deep contrast for label + checkmark */
.se-theme-option--white.is-selected,
.securends .se-theme-option--white.is-selected,
.se-theme-option--white.is-selected:hover,
.securends .se-theme-option--white.is-selected:hover,
.se-theme-option--bw.is-selected,
.securends .se-theme-option--bw.is-selected,
.se-theme-option--bw.is-selected:hover,
.securends .se-theme-option--bw.is-selected:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.se-theme-option--white.is-selected .se-theme-check,
.securends .se-theme-option--white.is-selected .se-theme-check,
.se-theme-option--white.is-selected .fa-check,
.securends .se-theme-option--white.is-selected .fa-check,
.se-theme-option--bw.is-selected .se-theme-check,
.securends .se-theme-option--bw.is-selected .se-theme-check,
.se-theme-option--bw.is-selected .fa-check,
.securends .se-theme-option--bw.is-selected .fa-check {
  color: #0f172a !important;
}

@media (max-width: 720px) {
  .se-theme-flyout {
    right: 0;
    left: 0;
    top: 100%;
  }
}

/* --------------------------------------------------------------------------
   Profile header (avatar + name + email)
   -------------------------------------------------------------------------- */
.securends .se-profile-menu ul.account-menu>li.se-profile-head,
.securends .SidebarMobile ul.account-menu>li.se-profile-head {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  margin: 0 0 4px !important;
  background: var(--se-raise) !important;
  border-bottom: 1px solid var(--se-line);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

.se-profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--se-btn-bg, var(--se-brand));
  color: var(--se-btn-fg, #fff) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #fff) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--se-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.se-profile-head-meta {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}

.se-profile-name {
  font-family: var(--se-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--se-ink);
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

.se-profile-email {
  font-family: var(--se-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--se-ink-2);
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

.se-profile-divider {
  height: 1px !important;
  min-height: 1px !important;
  margin: 6px 16px !important;
  padding: 0 !important;
  background: var(--se-line) !important;
  list-style: none;
  width: auto !important;
}

/* --------------------------------------------------------------------------
   Settings expander (in-menu, down arrow when open)
   -------------------------------------------------------------------------- */
.securends .SidebarMobile li.se-settings-item,
.securends .se-profile-menu li.se-settings-item,
.securends .SidebarMobile ul.account-menu .se-settings-item {
  list-style: none;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 100%;
}

.se-settings-trigger {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative;
  width: 100% !important;
  border: none;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  color: var(--se-ink);
  font-family: var(--se-sans);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  padding: 10px 16px !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  box-sizing: border-box !important;
}

.securends .se-profile-menu .se-settings-trigger .se-profile-ico {
  margin: 0 !important;
}

.se-settings-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.securends .se-profile-menu .se-settings-trigger .se-settings-chevron,
.se-settings-chevron {
  flex-shrink: 0;
  margin-left: auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin-right: 0 !important;
  transform: none !important;
  font-size: 11px;
  color: var(--se-ink-3);
  width: 16px;
  text-align: center;
  float: none !important;
}

.se-settings-panel {
  padding: 4px 14px 12px;
  background: var(--se-page);
  border-top: 1px solid var(--se-line-soft);
  border-bottom: 1px solid var(--se-line-soft);
}

.se-settings-section+.se-settings-section {
  margin-top: 12px;
}

.se-settings-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--se-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--se-ink);
  letter-spacing: 0.01em;
}

.se-settings-label::after {
  content: none;
  display: none;
}

.se-settings-label .fa {
  color: var(--se-ink-2);
  width: 16px;
  margin-right: 2px;
  text-align: center;
}

.se-settings-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.se-settings-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 8px 6px;
  border: 1.5px solid var(--se-line);
  border-radius: 10px;
  background: var(--se-card);
  color: var(--se-ink-2);
  font-family: var(--se-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--se-ease), color var(--se-ease), background var(--se-ease);
}

.se-settings-tile .fa {
  font-size: 18px;
  line-height: 1;
}

.se-settings-tile:hover {
  border-color: var(--se-brand-line);
  color: var(--se-ink);
}

.se-settings-tile.is-selected {
  border-color: var(--se-btn-bg, var(--se-brand)) !important;
  color: var(--se-btn-fg, #fff);
  background: var(--se-btn-bg, var(--se-brand));
}

.se-settings-tile.is-selected .fa,
.se-settings-tile.is-selected span {
  color: inherit;
}

.se-settings-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.se-settings-swatch {
  width: 100%;
  height: 28px;
  min-height: 0;
  aspect-ratio: auto;
  border: 1.5px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.se-settings-swatch.se-theme-option--white {
  border-color: rgba(15, 23, 42, 0.22);
}

.se-settings-swatch.is-selected {
  box-shadow: 0 0 0 1px var(--se-card), 0 0 0 2.5px var(--se-brand);
}

.se-settings-swatch-check {
  color: #fff;
  font-size: 9px;
  text-shadow: 0 0 2px rgba(15, 23, 42, 0.45);
}

.se-settings-swatch.se-theme-option--white.is-selected .se-settings-swatch-check,
.se-settings-swatch.se-theme-option--bw.is-selected .se-settings-swatch-check {
  color: #0f172a;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   Portaled profile (body > .securends.SidebarMobile.se-profile-popper)
   Beat pickels `.SidebarMobile li { margin-left: 40px }` and
   `ul.account-menu li { width: 130px }` which shrink Logout into a card
   and let Request Access / GUIDE paint through the panel in dark mode.
   -------------------------------------------------------------------------- */
body > .securends.se-profile-popper,
body > .securends.SidebarMobile.se-profile-popper,
.securends.SidebarMobile.se-profile-popper {
  z-index: 20050 !important;
  isolation: isolate;
  background: var(--bg-surface-elevated, var(--se-card)) !important;
  background-color: var(--bg-surface-elevated, var(--se-card)) !important;
  border: 1px solid var(--border-strong, var(--se-line)) !important;
  border-radius: 12px;
  box-shadow: var(--se-shadow-md) !important;
}

body > .securends.se-profile-popper .se-profile-menu,
body > .securends.se-profile-popper .MuiPaper-root,
body > .securends.se-profile-popper ul.account-menu,
.securends.SidebarMobile.se-profile-popper .se-profile-menu,
.securends.SidebarMobile.se-profile-popper ul.account-menu {
  width: 100% !important;
  min-width: 280px !important;
  max-width: none !important;
  background: var(--bg-surface-elevated, var(--se-card)) !important;
  background-color: var(--bg-surface-elevated, var(--se-card)) !important;
  box-shadow: none !important;
}

body > .securends.SidebarMobile.se-profile-popper ul.account-menu li,
body > .securends.SidebarMobile.se-profile-popper ul.account-menu a,
body > .securends.SidebarMobile.se-profile-popper .se-profile-menu li,
body > .securends.SidebarMobile.se-profile-popper .se-profile-menu a,
body > .securends.SidebarMobile.se-profile-popper .MuiMenuItem-root,
body > .securends.SidebarMobile.se-profile-popper .MuiListItem-root,
.securends.SidebarMobile.se-profile-popper ul.account-menu li,
.securends.SidebarMobile.se-profile-popper ul.account-menu a {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body > .securends.SidebarMobile.se-profile-popper ul.account-menu > a,
body > .securends.SidebarMobile.se-profile-popper a#logout,
body > .securends.SidebarMobile.se-profile-popper a#changePassword,
body > .securends.SidebarMobile.se-profile-popper a[id^="myaccss"],
.securends.SidebarMobile.se-profile-popper ul.account-menu > a,
.securends.SidebarMobile.se-profile-popper a#logout {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}

body > .securends.SidebarMobile.se-profile-popper .se-profile-menu .MuiMenuItem-root,
body > .securends.SidebarMobile.se-profile-popper .se-profile-menu .se-settings-trigger,
body > .securends.SidebarMobile.se-profile-popper .se-profile-menu .se-profile-row,
.securends.SidebarMobile.se-profile-popper .se-profile-menu .MuiMenuItem-root,
.securends.SidebarMobile.se-profile-popper .se-profile-menu .se-settings-trigger,
.securends.SidebarMobile.se-profile-popper .se-profile-menu .se-profile-row {
  padding: 10px 16px !important;
}

body > .securends.SidebarMobile.se-profile-popper li.se-profile-divider,
.securends.SidebarMobile.se-profile-popper li.se-profile-divider {
  width: auto !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 6px 16px !important;
  padding: 0 !important;
  background: var(--se-line) !important;
}

/*# sourceMappingURL=main-f4a72caa.5cfd63b5.css.map*/