/* Dashboard metric cards, Latest Campaigns table, donut charts. Data/handlers unchanged. */

/* Pickels paints the route content as a viewport-tall white plate
   (.jss3 / content-3 min-height: calc(100vh - 52px)). On home that plate
   is the large empty region under the header until the cards paint, and
   it stays as blank canvas below a short dashboard. Size to the content. */
.securends .main-content:has(.new-dashboard),
.securends .jss3:has(.new-dashboard),
.securends [class*="WithTheme-WithWidth"]:has(.new-dashboard),
.securends [class*="content-3"]:has(.new-dashboard) {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
}

.securends .se-main-panel:has(.new-dashboard),
.securends [class*="mainPanel"]:has(.new-dashboard) {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.securends [class*="mainDash"] {
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
}

.securends .se-dashboard-welcome {
  font-family: var(--se-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--se-ink) !important;
  margin: 10px 0 16px !important;
  letter-spacing: 0;
}

/* Welcome, metric rows, and widget row share one full-width column. */
.securends .new-dashboard.row,
.securends .new-dashboard .content-view.row,
.securends .new-dashboard .content-view > .row {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.securends .new-dashboard .content-view [class*="col-"],
.securends .new-dashboard .content-view > .row > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

.securends .se-dashboard-cards {
  padding: 0 0 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: se-dash-cards;
}

.securends .se-metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 100%;
}

.securends .se-metric-link {
  text-decoration: none !important;
  display: block;
  min-width: 0;
}

.securends .se-metric--identities {
  --se-metric-accent: var(--se-metric-1);
}

.securends .se-metric--applications {
  --se-metric-accent: var(--se-metric-2);
}

.securends .se-metric--entitlements {
  --se-metric-accent: var(--se-metric-3);
}

.securends .se-metric--unmatched {
  --se-metric-accent: var(--se-metric-4);
}

.securends .se-metric--campaigns {
  --se-metric-accent: var(--se-metric-5);
}

.securends .se-metric--requests {
  --se-metric-accent: var(--se-metric-6);
}

.securends .se-metric--approvals {
  --se-metric-accent: var(--se-metric-7);
}

.securends .se-metric--all-requests {
  --se-metric-accent: var(--se-metric-8);
}

.securends .se-metric-card.dash-card,
.securends .dash-card.se-metric-card {
  position: relative;
  height: auto !important;
  min-height: 128px;
  padding: 22px 16px 18px !important;
  border-radius: var(--se-r-card) !important;
  border: 1px solid var(--se-line) !important;
  box-shadow: none !important;
  overflow: visible;
  background: var(--se-card) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: box-shadow var(--se-ease), border-color var(--se-ease);
}

.securends .se-metric-card:hover,
.securends .se-metric-card.dash-card:hover {
  box-shadow: var(--se-shadow) !important;
  border-color: var(--se-brand-line) !important;
}

.securends .se-metric-body,
.securends .se-metric-card .se-metric-body.MuiCardContent-root {
  padding: 0 !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.securends .se-metric-value,
.securends .se-metric-card .se-metric-value,
.securends .se-metric-card [class*="value"] {
  color: var(--se-metric-accent, var(--se-brand)) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
  display: block;
}

.securends .se-metric-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.securends .se-metric-icon {
  color: var(--se-metric-accent, var(--se-brand));
  margin: 0;
  line-height: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.securends .se-metric-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}

.securends .se-metric-label,
.securends .se-metric-card .se-metric-label {
  color: var(--se-metric-accent, var(--se-brand)) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.securends .se-metric-sub {
  color: var(--se-ink-3) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
}

.securends .se-metric-card .info-icon {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  font-size: 16px !important;
  color: var(--se-ink-3) !important;
  opacity: 0;
}

.securends .se-metric-card:hover .info-icon {
  opacity: 1;
}

.securends .se-quick-bar {
  display: flex;
  align-items: stretch;
  background: var(--se-card);
  border: 1px solid var(--se-line);
  border-radius: var(--se-r-card);
  overflow: hidden;
  margin-bottom: 16px;
}

.securends .se-quick-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  text-decoration: none !important;
  color: var(--se-ink) !important;
  border-right: 1px solid var(--se-line);
  position: relative;
  min-width: 0;
}

.securends .se-quick-link:last-child {
  border-right: none;
}

.securends .se-quick-link:hover {
  background: var(--se-page);
}

.securends .se-quick-count,
.securends .se-quick-link .se-quick-count {
  color: var(--se-ink) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

.securends .se-quick-icon {
  color: var(--se-ink-2);
  display: inline-flex;
  line-height: 0;
}

.securends .se-quick-icon svg {
  width: 16px;
  height: 16px;
}

.securends .se-quick-label {
  color: var(--se-ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap;
}

.securends .se-quick-link .info-icon {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  font-size: 14px !important;
  color: var(--se-ink-3) !important;
  opacity: 0;
}

.securends .se-quick-link:hover .info-icon {
  opacity: 1;
}

.securends .dash-card {
  height: 108px !important;
  border-radius: 10px !important;
  border: 1px solid var(--se-line) !important;
  box-shadow: var(--se-shadow) !important;
  transition: box-shadow var(--se-ease), border-color var(--se-ease);
}

.securends .dash-card.se-metric-card {
  height: auto !important;
  box-shadow: none !important;
}

.securends .dash-card:hover {
  box-shadow: var(--se-shadow-lg) !important;
  border-color: var(--se-brand-line) !important;
}

.securends a .dash-card .MuiTypography-root {
  color: inherit;
}

.securends a .dash-card .se-metric-value,
.securends a .dash-card .se-metric-value.MuiTypography-root {
  color: var(--se-metric-accent, var(--se-brand)) !important;
}

.securends a .dash-card .se-metric-label,
.securends a .dash-card .se-metric-label.MuiTypography-root {
  color: var(--se-metric-accent, var(--se-brand)) !important;
}

.securends .MuiCard-root {
  border: 1px solid var(--se-line);
  box-shadow: var(--se-shadow) !important;
  border-radius: 10px !important;
}

.securends .card-chart,
.securends .card-stats {
  background: var(--se-card);
}

.se-dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.securends .se-dashboard-widgets .se-dashboard-panel--campaigns {
  grid-column: span 2;
}

.se-dashboard-panel {
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  box-shadow: var(--se-shadow) !important;
  border-radius: var(--se-r-card, 14px) !important;
  overflow: hidden;
}

.securends .se-dashboard-widgets .se-dashboard-panel,
.securends .se-dashboard-widgets .se-dashboard-panel.MuiCard-root {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 360px !important;
  min-height: 360px !important;
  max-height: 360px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Donut panels: reserved title slot so charts share the same top edge */
.securends .se-donut-panel .se-donut-card-body.MuiCardContent-root,
.securends .se-donut-panel .se-donut-card-body {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 16px !important;
}

.securends .se-donut-title,
.securends .se-donut-panel .se-donut-title.MuiTypography-root,
.securends .se-campaign-title,
.securends .se-campaign-title .MuiTypography-root {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--se-ink) !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-donut-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  position: relative;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Equal chart area for Approvals Status + Latest Campaign (legend is outside canvas). */
.securends .se-donut-panel {
  min-width: 0;
  width: 100%;
}

.securends .se-donut-panel .se-donut-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 0;
}

.securends .se-donut-panel .se-donut-wrap > div,
.securends .se-donut-panel .se-donut-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

/* Fixed legend band — same height/width treatment on both donut cards */
.securends .se-donut-legend {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 4px 8px;
  width: 100%;
  min-height: 44px;
  height: 44px;
  max-height: 44px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.securends .se-donut-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 1.2;
}

.securends .se-donut-legend__swatch {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.securends .se-donut-legend__label {
  font-size: 10px;
  font-weight: 500;
  color: var(--se-ink-2);
}

/* Approvals Status: keep all 4 legends on one line */
.securends .se-donut-legend--approvals {
  flex-wrap: nowrap;
  gap: 4px 6px;
}

.securends .se-donut-legend--approvals .se-donut-legend__label {
  font-size: 8px;
}

/* Latest Campaign: 2 on top, 1 centered below */
.securends .se-donut-legend--campaign {
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
  height: 44px;
}


.securends .se-donut-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--se-ink-2);
  font-size: 13px;
}

.securends .se-campaign-card-body.MuiCardContent-root {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px !important;
  box-sizing: border-box;
}

.securends .se-campaign-title {
  float: none !important;
  flex: 0 0 auto;
  width: 100%;
}

.securends .se-campaign-table.MuiTableContainer-root,
.securends .se-campaign-table {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: none;
  /* Vertical scroll only — fit columns to card (no horizontal bar) */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--se-nav-scroll-thumb) var(--se-page);
}

.securends .se-campaign-table::-webkit-scrollbar {
  width: 8px;
  height: 0;
}

.securends .se-campaign-table::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}

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

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

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

.securends .se-campaign-table .MuiTable-root {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed;
}

.securends .se-campaign-table .MuiTableCell-root {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.securends .se-campaign-table .MuiTableCell-head {
  white-space: normal;
  line-height: 1.25;
}

.securends .se-campaign-table .MuiTableCell-root:nth-child(1) {
  width: 40%;
}

.securends .se-campaign-table .MuiTableCell-root:nth-child(2) {
  width: 16%;
}

.securends .se-campaign-table .MuiTableCell-root:nth-child(3),
.securends .se-campaign-table .MuiTableCell-root:nth-child(4) {
  width: 22%;
}

.securends .se-campaign-table .MuiTableCell-body:nth-child(1) .se-campaign-name,
.securends .se-campaign-table .MuiTableCell-body:nth-child(1) span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.securends .se-campaign-table .MuiTableCell-head {
  position: sticky;
  top: 0;
  z-index: 2;
}

.se-campaign-table .MuiTableCell-head {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--se-table-header-ink, var(--se-ink-2)) !important;
  background: var(--se-table-header-bg, var(--se-card)) !important;
  border-bottom: 1px solid var(--se-table-line, var(--se-line)) !important;
  padding: 10px 8px !important;
}

.se-campaign-table .MuiTableCell-body {
  font-size: 13px !important;
  color: var(--se-table-ink, var(--se-ink)) !important;
  border-bottom: 1px solid var(--se-line-soft) !important;
  padding: 10px 8px !important;
}

.se-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.se-status-open {
  background: var(--se-brand-tint);
  color: var(--se-brand);
}

.se-status-ready {
  background: var(--se-ok-tint);
  color: var(--se-ok);
}

.se-status-closed {
  background: var(--se-line-soft);
  color: var(--se-ink-2);
}

.se-status-initiated {
  background: var(--se-warn-tint);
  color: var(--se-warn);
}

.se-status-progress {
  background: var(--se-brand-tint);
  color: var(--se-accent);
}

/* Historic Campaign / HistoryTab Chart.js tiles — same card as Dashboard donuts.
   Beat leftover pickels .graph { width/height: 400px }. Keep class graph for print. */
.securends .graph.se-dashboard-panel,
.securends .se-historic-chart-card {
  float: none !important;
  width: auto !important;
  max-width: none;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px 16px 8px !important;
  text-align: left;
  box-sizing: border-box;
}

.securends .se-historic-chart-card .se-campaign-report-chart-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--se-ink) !important;
  margin: 0 0 8px;
  text-transform: capitalize;
  line-height: 1.3;
}

@media (max-width: 1100px) {
  .se-dashboard-widgets,
  .securends .se-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .securends .se-dashboard-widgets .se-dashboard-panel--campaigns {
    grid-column: span 2;
  }

  .securends .se-dashboard-widgets .se-dashboard-panel,
  .securends .se-dashboard-widgets .se-dashboard-panel.MuiCard-root {
    height: 360px !important;
    max-height: 360px !important;
  }
}

@media (max-width: 640px) {
  .securends .se-metric-row,
  .se-dashboard-widgets {
    grid-template-columns: 1fr;
  }

  .securends .se-dashboard-widgets .se-dashboard-panel--campaigns {
    grid-column: auto;
  }
}

@container se-dash-cards (max-width: 960px) {
  .securends .se-metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container se-dash-cards (max-width: 520px) {
  .securends .se-metric-row {
    grid-template-columns: 1fr;
  }
}

/* App Guide tab — visible on every page; theme with --se-brand.
   Presentation only; do not change AppGuideSideNav / BottomNav behavior or ids. */

html[data-se-theme] .guideSideNavContainer,
.securends .guideSideNavContainer {
  z-index: 1080 !important;
  top: var(--se-app-header, 60px) !important;
  margin-top: 0 !important;
  height: calc(100% - var(--se-app-header, 60px)) !important;
  padding-bottom: 0 !important;
  background: var(--se-card) !important;
  border-left: 1px solid var(--se-line);
  box-shadow: var(--se-shadow-lg, -8px 0 24px rgba(15, 23, 42, 0.18));
  overflow: visible !important;
}

html[data-se-nav="horizontal"] .guideSideNavContainer,
html[data-se-nav="horizontal"] .securends .guideSideNavContainer {
  top: calc(var(--se-app-header, 60px) + var(--se-hnav-bar-h, 48px)) !important;
  height: calc(100% - var(--se-app-header, 60px) - var(--se-hnav-bar-h, 48px)) !important;
}

/* Closed panel is width 0; offset the 28px tab into the viewport. */
html[data-se-theme] .guideSideNavButtonContainer,
.securends .guideSideNavButtonContainer {
  right: 28px !important;
}

/* Open: keep the tab on the drawer edge so it does not cover the page. */
html[data-se-theme] .guideSideNavButtonContainer.reversed,
.securends .guideSideNavButtonContainer.reversed {
  right: 0 !important;
}

html[data-se-theme] .guideSideNavContainer.is-open.is-expanded,
.securends .guideSideNavContainer.is-open.is-expanded {
  width: calc(100% - var(--se-sidebar-w, 230px)) !important;
  right: 0 !important;
}

html[data-se-nav="horizontal"] .guideSideNavContainer.is-open.is-expanded,
html[data-se-nav="horizontal"] .securends .guideSideNavContainer.is-open.is-expanded {
  width: 100% !important;
}

html[data-se-theme] .guideBottomNavContainer.is-expanded,
.securends .guideBottomNavContainer.is-expanded {
  height: calc(100% - var(--se-app-header, 60px)) !important;
  left: var(--se-sidebar-w, 230px);
  width: calc(100% - var(--se-sidebar-w, 230px));
  bottom: 0;
}

html[data-se-nav="horizontal"] .guideBottomNavContainer.is-expanded,
html[data-se-nav="horizontal"] .securends .guideBottomNavContainer.is-expanded {
  left: 0;
  width: 100%;
}

html[data-se-theme] .guideSideNavToggleButton,
.securends .guideSideNavToggleButton,
html[data-se-theme] .guideSideNavToggleButton.reversed,
.securends .guideSideNavToggleButton.reversed {
  background-image: none !important;
  background-color: var(--se-btn-bg, var(--se-brand)) !important;
  color: var(--se-btn-fg, #fff) !important;
  box-shadow: var(--se-shadow, 0 2px 6px rgba(15, 23, 42, 0.12)) !important;
  font-family: var(--se-sans) !important;
  letter-spacing: 0.04em;
}

html[data-se-theme] .guideSideNavToggleButton:hover,
.securends .guideSideNavToggleButton:hover {
  background-color: var(--se-btn-bg-hover, var(--se-brand-hover)) !important;
  color: var(--se-btn-fg, #fff) !important;
}

/* Dark: muted raise plate (avoid bright white GUIDE tab) */
html[data-se-mode="dark"] .guideSideNavToggleButton,
html[data-se-mode="dark"] .securends .guideSideNavToggleButton,
html[data-theme="dark"] .guideSideNavToggleButton,
html.dark .guideSideNavToggleButton {
  background-color: var(--se-raise, #151e2e) !important;
  color: var(--se-ink, #e5e7eb) !important;
  -webkit-text-fill-color: var(--se-ink, #e5e7eb) !important;
  border: 1px solid var(--se-line, #263348) !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .guideSideNavToggleButton:hover,
html[data-se-mode="dark"] .securends .guideSideNavToggleButton:hover,
html[data-theme="dark"] .guideSideNavToggleButton:hover,
html.dark .guideSideNavToggleButton:hover {
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--se-ink) !important;
  border-color: var(--border-strong, #334155) !important;
}

html[data-se-theme] .guideSideNavMainContent,
.securends .guideSideNavMainContent {
  right: 0 !important;
  margin-right: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--se-card) !important;
  color: var(--se-ink) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.guideSideNavContainer:not(.is-open) .guideSideNavMainContent {
  visibility: hidden;
}

html[data-se-theme] .guideSideNavButtonContainer.reversed .guideSideNavToggleButton,
.securends .guideSideNavButtonContainer.reversed .guideSideNavToggleButton {
  display: none;
}

html[data-se-theme] .guideSideNavResizeHandle,
.securends .guideSideNavResizeHandle,
html[data-se-theme] .guideSideNavResizeHandle.reversed,
.securends .guideSideNavResizeHandle.reversed {
  position: relative;
  width: 18px !important;
  margin-left: -9px;
  background-color: transparent !important;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

html[data-se-theme] .guideSideNavResizeHandle::after,
.securends .guideSideNavResizeHandle::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--se-line);
  background: var(--se-card);
  box-shadow: var(--se-shadow, 0 2px 8px rgba(15, 23, 42, 0.12));
  background-image: url(/build/assets/media/1127289ae4e6ba5bab0a.1127289a.svg);
  background-repeat: no-repeat;
  background-position: center;
}

/* Split-view guide chrome */
html[data-se-theme] .se-guide-panel,
.securends .se-guide-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 16px 18px 12px;
  box-sizing: border-box;
  font-family: var(--se-sans);
  color: var(--se-ink);
  background: var(--se-card);
}

html[data-se-theme] .se-guide-header,
.securends .se-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  flex: 0 0 auto;
}

html[data-se-theme] .se-guide-header-lead,
.securends .se-guide-header-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html[data-se-theme] .se-guide-header-icon,
.securends .se-guide-header-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--se-brand-tint);
  color: var(--se-brand);
  font-size: 14px;
}

html[data-se-theme] .se-guide-header-title,
.securends .se-guide-header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--se-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-se-theme] .se-guide-header-actions,
.securends .se-guide-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

html[data-se-theme] .se-guide-close,
.securends .se-guide-close,
html[data-se-theme] .guideSideNavMainContent .closebtn.se-guide-close,
.securends .guideSideNavMainContent .closebtn.se-guide-close,
html[data-se-theme] .se-guide-expand,
.securends .se-guide-expand,
html[data-se-theme] .se-guide-print,
.securends .se-guide-print {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--se-ink-2) !important;
  font-size: 16px !important;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-se-theme] .se-guide-close:hover,
.securends .se-guide-close:hover,
html[data-se-theme] .se-guide-expand:hover,
.securends .se-guide-expand:hover,
html[data-se-theme] .se-guide-print:hover,
.securends .se-guide-print:hover {
  background: var(--se-navy-2, var(--se-brand-tint));
  color: var(--se-ink) !important;
}

html[data-se-theme] .se-guide-print:disabled,
.securends .se-guide-print:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

html[data-se-theme] .se-guide-print-busy,
.securends .se-guide-print-busy {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: color-mix(in srgb, var(--se-card, #fff) 82%, transparent);
  color: var(--se-ink);
  font-family: var(--se-sans);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(1px);
}

html[data-se-theme] .se-guide-print-busy .fa-spinner,
.securends .se-guide-print-busy .fa-spinner {
  font-size: 22px;
  color: var(--se-brand);
}

html[data-se-theme] .se-guide-panel.is-printing,
.securends .se-guide-panel.is-printing {
  pointer-events: none;
}

html[data-se-theme] .se-guide-panel.is-printing .se-guide-header-actions,
.securends .se-guide-panel.is-printing .se-guide-header-actions {
  pointer-events: auto;
}

html[data-se-theme] .se-guide-expand:focus,
.securends .se-guide-expand:focus,
html[data-se-theme] .se-guide-close:focus,
.securends .se-guide-close:focus,
html[data-se-theme] .se-guide-print:focus,
.securends .se-guide-print:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--se-brand-tint);
}

html[data-se-theme] .se-guide-search,
.securends .se-guide-search {
  position: relative;
  display: block;
  margin: 0 0 14px;
  flex: 0 0 auto;
}

html[data-se-theme] .se-guide-search .fa-search,
.securends .se-guide-search .fa-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--se-ink-3, var(--se-ink-2));
  font-size: 13px;
  pointer-events: none;
}

html[data-se-theme] .se-guide-search .form-control,
.securends .se-guide-search .form-control {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--se-line);
  border-radius: 10px;
  background: var(--bg-input, var(--se-page, var(--se-card)));
  color: var(--se-ink);
  font-family: var(--se-sans);
  font-size: 13px;
  box-shadow: none;
}

html[data-se-theme] .se-guide-search .form-control:focus,
.securends .se-guide-search .form-control:focus {
  outline: none;
  border-color: var(--se-brand);
  box-shadow: 0 0 0 3px var(--se-brand-tint);
}

html[data-se-theme] .se-guide-split,
.securends .se-guide-split {
  display: grid;
  grid-template-columns: minmax(140px, 32%) minmax(0, 1fr);
  gap: 16px 20px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

html[data-se-theme] .se-guide-toc,
.securends .se-guide-toc {
  min-width: 0;
  overflow: auto;
  padding-right: 4px;
}

html[data-se-theme] .se-guide-toc-label,
.securends .se-guide-toc-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--se-ink-2);
}

html[data-se-theme] .se-guide-toc-list,
.securends .se-guide-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

html[data-se-theme] .se-guide-toc-list > li,
.securends .se-guide-toc-list > li {
  margin: 0 0 4px;
}

html[data-se-theme] .se-guide-toc-link,
.securends .se-guide-toc-link {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--se-ink) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
  cursor: pointer;
}

html[data-se-theme] .se-guide-toc-link:hover,
.securends .se-guide-toc-link:hover {
  background: var(--se-navy-2, var(--se-brand-tint));
  color: var(--se-ink) !important;
}

html[data-se-theme] .se-guide-toc-link.is-active,
.securends .se-guide-toc-link.is-active {
  background: var(--se-brand-tint);
  color: var(--se-brand) !important;
  font-weight: 600;
}

html[data-se-theme] .se-guide-toc-num,
.securends .se-guide-toc-num {
  flex: 0 0 auto;
}

html[data-se-theme] .se-guide-body,
.securends .se-guide-body {
  min-width: 0;
  overflow: auto;
  padding-right: 4px;
}

html[data-se-theme] .se-guide-article-title,
.securends .se-guide-article-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--se-ink) !important;
}

/* High-contrast body ink. CMS/RTE HTML often ships light-theme
   inline colors (#333 etc.) that vanish on dark backgrounds. */
html[data-se-theme] .se-guide-article-html,
.securends .se-guide-article-html,
html[data-se-theme] .se-guide-article-html.guideContent,
.securends .se-guide-article-html.guideContent,
html[data-se-theme] .guideSideNavMainContent .guideContent,
.securends .guideSideNavMainContent .guideContent,
html[data-se-theme] .guideBottomNavMainContent .guideContent,
.securends .guideBottomNavMainContent .guideContent,
html[data-se-theme] .se-guide-panel .guideContent,
.securends .se-guide-panel .guideContent {
  height: auto !important;
  max-height: none;
  margin: 0 0 16px;
  padding: 0;
  overflow: visible;
  font-size: 13px;
  line-height: 1.55;
  color: var(--se-ink) !important;
}

html[data-se-theme] .se-guide-article-html :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
.securends .se-guide-article-html :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-theme] .guideSideNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
.securends .guideSideNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-theme] .guideBottomNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
.securends .guideBottomNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-theme] .se-guide-panel .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
.securends .se-guide-panel .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article) {
  color: inherit !important;
}

html[data-se-theme] .se-guide-article-html a,
.securends .se-guide-article-html a,
html[data-se-theme] .guideSideNavMainContent .guideContent a,
.securends .guideSideNavMainContent .guideContent a,
html[data-se-theme] .guideBottomNavMainContent .guideContent a,
.securends .guideBottomNavMainContent .guideContent a,
html[data-se-theme] .se-guide-panel .guideContent a,
.securends .se-guide-panel .guideContent a {
  color: var(--se-brand) !important;
}

html[data-se-theme] .se-guide-article-html .se-guide-mark,
.securends .se-guide-article-html .se-guide-mark,
html[data-se-theme] .guideSideNavMainContent .guideContent .se-guide-mark,
.securends .guideSideNavMainContent .guideContent .se-guide-mark,
html[data-se-theme] .guideBottomNavMainContent .guideContent .se-guide-mark,
.securends .guideBottomNavMainContent .guideContent .se-guide-mark,
html[data-se-theme] .se-guide-panel .guideContent .se-guide-mark,
.securends .se-guide-panel .guideContent .se-guide-mark {
  background: var(--se-brand-tint);
  color: var(--se-ink) !important;
  border-radius: 3px;
  padding: 0 1px;
  font-weight: 600;
}

/* CMS note/callout boxes (Strapi/RTE light fills) → theme surfaces */
html[data-se-theme] .se-guide-cms-surface,
.securends .se-guide-cms-surface,
html[data-se-theme] .se-guide-article-html .se-guide-cms-surface,
.securends .se-guide-article-html .se-guide-cms-surface,
html[data-se-theme] .guideContent .se-guide-cms-surface,
.securends .guideContent .se-guide-cms-surface {
  background: var(--se-raise, var(--bg-surface-secondary)) !important;
  background-color: var(--se-raise, var(--bg-surface-secondary)) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line, var(--border-default)) !important;
}

/* CMS tables → modern data table: bordered card, header band, zebra + hover,
   single-line cells with ellipsis (full text via hover title, seTableCellTooltip). */
html[data-se-theme] .guideContent figure.table,
.securends .guideContent figure.table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  margin: 12px 0 16px;
  overflow-x: auto;
}

html[data-se-theme] .se-guide-article-html table,
.securends .se-guide-article-html table,
html[data-se-theme] .guideContent table,
.securends .guideContent table {
  display: table !important;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  margin: 12px 0 16px;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--se-line, var(--border-default)) !important;
  border-radius: var(--se-r, 10px);
  overflow: hidden;
  background: var(--se-card) !important;
  font-size: 12.5px;
}

html[data-se-theme] .guideContent figure.table > table,
.securends .guideContent figure.table > table {
  margin: 0;
}

html[data-se-theme] .se-guide-article-html :is(td, th),
.securends .se-guide-article-html :is(td, th),
html[data-se-theme] .guideContent :is(td, th),
.securends .guideContent :is(td, th) {
  height: auto !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--se-line, var(--border-default)) !important;
  text-align: left !important;
  vertical-align: middle;
  line-height: 1.4;
  color: var(--se-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-se-theme] .guideContent :is(td, th) + :is(td, th),
.securends .guideContent :is(td, th) + :is(td, th) {
  border-left: 1px solid var(--se-line, var(--border-default)) !important;
}

/* Inline CMS wrappers must not force wrapping or break the ellipsis */
html[data-se-theme] .guideContent :is(td, th) :is(p, span, strong, b, div),
.securends .guideContent :is(td, th) :is(p, span, strong, b, div) {
  display: inline;
  margin: 0 !important;
  white-space: nowrap;
}

html[data-se-theme] .se-guide-panel .guideContent :is(th, thead td),
.securends .se-guide-panel .guideContent :is(th, thead td) {
  height: var(--se-table-colhead, 36px) !important;
  background: var(--se-raise, var(--bg-surface-secondary)) !important;
  font-weight: 600;
  font-size: 12px;
  color: var(--se-ink) !important;
}

html[data-se-theme] .guideContent tbody tr:nth-child(even) > td,
.securends .guideContent tbody tr:nth-child(even) > td {
  background: var(--se-page, transparent);
}

html[data-se-theme] .guideContent tbody tr:hover > td,
.securends .guideContent tbody tr:hover > td {
  background: var(--se-row-hover, var(--bg-table-row-hover)) !important;
}

html[data-se-theme] .guideContent tr:last-child > td,
.securends .guideContent tr:last-child > td {
  border-bottom: 0 !important;
}

html[data-se-theme] .se-guide-article-html blockquote,
.securends .se-guide-article-html blockquote,
html[data-se-theme] .guideContent blockquote,
.securends .guideContent blockquote {
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--se-brand);
  background: var(--se-raise, var(--bg-surface-secondary));
  color: var(--se-ink);
}

html[data-se-theme] .se-guide-article-html :is(pre, code),
.securends .se-guide-article-html :is(pre, code),
html[data-se-theme] .guideContent :is(pre, code),
.securends .guideContent :is(pre, code) {
  background: var(--se-raise, var(--bg-surface-secondary));
  color: var(--se-ink);
  border-radius: 4px;
}

html[data-se-theme] .se-guide-article-html pre,
.securends .se-guide-article-html pre,
html[data-se-theme] .guideContent pre,
.securends .guideContent pre {
  padding: 10px 12px;
  overflow: auto;
}

html[data-se-theme] .se-guide-article-html hr,
.securends .se-guide-article-html hr,
html[data-se-theme] .guideContent hr,
.securends .guideContent hr {
  border: 0;
  border-top: 1px solid var(--se-line, var(--border-default));
  margin: 16px 0;
}

html[data-se-theme] .se-guide-article-html img,
.securends .se-guide-article-html img,
html[data-se-theme] .se-guide-article-html .se-guide-img,
.securends .se-guide-article-html .se-guide-img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: var(--se-page, var(--se-card));
}

html[data-se-theme] .se-guide-article-html p:has(> img),
.securends .se-guide-article-html p:has(> img),
html[data-se-theme] .se-guide-article-html p:has(.se-guide-figure),
.securends .se-guide-article-html p:has(.se-guide-figure),
html[data-se-theme] .guideContent p:has(> img),
.securends .guideContent p:has(> img) {
  overflow: visible !important;
  max-width: 100%;
  margin: 14px 0;
}

html[data-se-theme] .se-guide-figure,
.securends .se-guide-figure {
  position: relative;
  display: block;
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid var(--se-line);
  border-radius: var(--se-r-card, 14px);
  background: var(--se-page, var(--se-card));
  box-shadow: var(--se-shadow, 0 2px 8px rgba(15, 23, 42, 0.05));
}

html[data-se-theme] .se-guide-figure.is-loading,
.securends .se-guide-figure.is-loading {
  min-height: 160px;
  background: linear-gradient(
    90deg,
    var(--se-page, var(--se-navy-2)) 0%,
    var(--se-brand-tint) 50%,
    var(--se-page, var(--se-navy-2)) 100%
  );
  background-size: 200% 100%;
}

html[data-se-theme] .se-guide-figure.is-loading .se-guide-img,
.securends .se-guide-figure.is-loading .se-guide-img {
  opacity: 0;
}

html[data-se-theme] .se-guide-figure.is-ready .se-guide-img,
.securends .se-guide-figure.is-ready .se-guide-img {
  opacity: 1;
  transition: opacity 180ms ease;
}

html[data-se-theme] .se-guide-article-html .se-guide-img-zoom,
.securends .se-guide-article-html .se-guide-img-zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}

html[data-se-theme] .se-guide-article-html a .se-guide-img-zoom,
.securends .se-guide-article-html a .se-guide-img-zoom {
  cursor: pointer;
}

html[data-se-theme] .se-guide-img-zoom:focus,
.securends .se-guide-img-zoom:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--se-brand-tint);
}

html[data-se-theme] .se-guide-img-hint,
.securends .se-guide-img-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--se-card);
  color: var(--se-ink-2);
  border: 1px solid var(--se-line);
  box-shadow: var(--se-shadow, 0 2px 8px rgba(15, 23, 42, 0.08));
  pointer-events: none;
  font-size: 12px;
}

html[data-se-theme] .se-guide-figure.is-ready:hover .se-guide-img-hint,
.securends .se-guide-figure.is-ready:hover .se-guide-img-hint,
html[data-se-theme] .se-guide-figure.is-ready:focus-within .se-guide-img-hint,
.securends .se-guide-figure.is-ready:focus-within .se-guide-img-hint {
  display: inline-flex;
}

html[data-se-theme] .se-guide-img-fallback,
.securends .se-guide-img-fallback {
  display: none;
  padding: 28px 16px;
  text-align: center;
  color: var(--se-ink-2);
  font-size: 13px;
}

html[data-se-theme] .se-guide-figure.is-error .se-guide-img,
.securends .se-guide-figure.is-error .se-guide-img,
html[data-se-theme] .se-guide-figure.is-error .se-guide-img-hint,
.securends .se-guide-figure.is-error .se-guide-img-hint {
  display: none;
}

html[data-se-theme] .se-guide-figure.is-error .se-guide-img-fallback,
.securends .se-guide-figure.is-error .se-guide-img-fallback {
  display: block;
}

html[data-se-theme] .se-guide-lightbox,
.securends .se-guide-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--se-modal-scrim, rgba(15, 23, 42, 0.45));
}

html[data-se-theme] .se-guide-lightbox-card,
.securends .se-guide-lightbox-card {
  position: relative;
  max-width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 12px;
  border-radius: var(--se-r-modal, 16px);
  background: var(--se-card);
  box-shadow: var(--se-shadow-lg, 0 20px 45px rgba(15, 23, 42, 0.12));
}

html[data-se-theme] .se-guide-lightbox-card img,
.securends .se-guide-lightbox-card img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}

html[data-se-theme] .se-guide-lightbox-close,
.securends .se-guide-lightbox-close,
html[data-se-theme] .se-guide-lightbox-nav,
.securends .se-guide-lightbox-nav {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1px solid var(--se-line);
  border-radius: 50%;
  background: var(--se-card);
  color: var(--se-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--se-shadow, 0 2px 8px rgba(15, 23, 42, 0.08));
}

html[data-se-theme] .se-guide-lightbox-close:hover,
.securends .se-guide-lightbox-close:hover,
html[data-se-theme] .se-guide-lightbox-nav:hover,
.securends .se-guide-lightbox-nav:hover {
  background: var(--se-brand-tint);
  color: var(--se-brand);
}

html[data-se-theme] .se-guide-lightbox-close:focus,
.securends .se-guide-lightbox-close:focus,
html[data-se-theme] .se-guide-lightbox-nav:focus,
.securends .se-guide-lightbox-nav:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--se-brand-tint);
}

html[data-se-theme] .se-guide-lightbox-close,
.securends .se-guide-lightbox-close {
  top: -12px;
  right: -12px;
}

html[data-se-theme] .se-guide-lightbox-nav--prev,
.securends .se-guide-lightbox-nav--prev {
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
}

html[data-se-theme] .se-guide-lightbox-nav--next,
.securends .se-guide-lightbox-nav--next {
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
}

html[data-se-theme] .se-guide-lightbox-caption,
.securends .se-guide-lightbox-caption {
  margin-top: 8px;
  text-align: center;
  color: var(--se-ink-2);
  font-size: 12px;
}

html[data-se-theme] .guideNotAvailable,
.securends .guideNotAvailable {
  color: var(--se-ink-2) !important;
  font-size: 14px !important;
  padding: 24px 8px !important;
}

html[data-se-theme] .guideBottomNavMainContent,
.securends .guideBottomNavMainContent {
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 720px) {
  html[data-se-theme] .se-guide-split,
  .securends .se-guide-split {
    grid-template-columns: 1fr;
  }

  html[data-se-theme] .se-guide-toc,
  .securends .se-guide-toc {
    max-height: 160px;
  }
}

html[data-se-theme] .guideBottomNavContainer,
.securends .guideBottomNavContainer {
  background: var(--se-card) !important;
}

html[data-se-theme] .guideBottomNavButtonContainer,
.securends .guideBottomNavButtonContainer,
html[data-se-theme] .guideBottomNavButtonContainer.reversed,
.securends .guideBottomNavButtonContainer.reversed {
  background-image: none !important;
  background-color: var(--se-brand) !important;
}

html[data-se-theme] .guideBottomNavToggleButton,
.securends .guideBottomNavToggleButton,
html[data-se-theme] .guideBottomNavIcon,
.securends .guideBottomNavIcon {
  color: #fff !important;
  font-family: var(--se-sans) !important;
}

html[data-se-theme] .guideBottomNavResizeHandle,
.securends .guideBottomNavResizeHandle,
html[data-se-theme] .guideBottomNavResizeHandle.reversed,
.securends .guideBottomNavResizeHandle.reversed {
  background-color: var(--se-brand) !important;
}

html[data-se-theme] .guideBottomNavMainContent,
.securends .guideBottomNavMainContent {
  background: var(--se-card) !important;
  color: var(--se-ink) !important;
}

/* GUIDE tab clearance is global in kit.css (--se-guide-tab-w). */

/* Forms batch — Non-Employee, Service Account, List of Forms, Add/View/Update forms.
   Routes: /nonEmployeeManagement, /addNonEmployeeForm, /serviceAccountManagement,
   /addServiceAccountForm, /Form, /listOfForms, /addForms, /viewForm/:formId, /updateForm/:formId.
   Wrapper: .se-forms-page on each root. Presentation only. */

/* ── Shared wrapper ── */
.securends .se-forms-page {
  padding: 0 !important;
}

/* ── Title bar / toolbar card (Grid.o-form-title-bar.scroll-header) ── */
.securends .se-forms-page .scroll-header,
.securends .se-forms-page .scroll-header.o-form-title-bar {
  position: sticky !important;
  top: var(--se-sticky-top, var(--se-app-header)) !important;
  z-index: 8;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card);
  box-shadow: var(--se-shadow);
  padding: 10px 20px !important;
  margin: 0 0 16px !important;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-height: var(--se-page-toolbar);
  height: auto !important;
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}

/* Beat pickels scroll-header top: 50px and text-align center */
.securends .se-forms-page .scroll-header {
  text-align: left !important;
  left: auto !important;
  right: auto !important;
}

/* Title text */
.securends .se-forms-page .scroll-header > .MuiGrid-item,
.securends .se-forms-page .scroll-header > div:first-child {
  font-size: var(--se-t-page-head) !important;
  font-weight: 600 !important;
  color: var(--se-ink) !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

/* Showing count — move into the flow, beat position: absolute */
.securends .se-forms-page .scroll-header .scroll-footer,
.securends .se-forms-page .scroll-header > div:has(.scroll-footer) {
  position: static !important;
  right: auto !important;
  margin-left: auto;
  float: none !important;
}

.securends .se-forms-page .scroll-footer {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--se-ink-2) !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center;
  float: none !important;
}

/* Add button inside toolbar */
.securends .se-forms-page .scroll-header .MuiButton-contained {
  background: var(--se-brand) !important;
  color: #fff !important;
  border: 1px solid var(--se-brand) !important;
  border-radius: var(--se-r) !important;
  height: 28px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  line-height: 26px !important;
  min-width: auto !important;
}

.securends .se-forms-page .scroll-header .MuiButton-contained:hover {
  background: var(--se-brand-hover) !important;
  border-color: var(--se-brand-hover) !important;
}

/* Filter button — beat fixed positioning */
.securends .se-forms-page .filter-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  margin: 0 0 12px;
}

.securends .se-forms-page .scroll-filters,
.securends .se-forms-page .filter-button.scroll-filters {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  color: var(--se-ink) !important;
  border-radius: var(--se-r) !important;
  height: 28px !important;
  font-size: 12px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* ── Card list items (NonEmployee / ServiceAccount / ListOfForms) ── */
.securends .se-forms-page .MuiCardContent-root {
  background: var(--se-card) !important;
  border: 1px solid var(--se-line);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-shadow);
  margin: 0 0 12px !important;
  padding: 12px 20px !important;
}

.securends .se-forms-page .MuiCardContent-root:last-child {
  padding-bottom: 12px !important;
}

/* Card text */
.securends .se-forms-page .MuiTypography-body1,
.securends .se-forms-page .MuiTypography-body2 {
  color: var(--se-ink) !important;
  font-size: 13px !important;
}

.securends .se-forms-page .MuiTypography-body1 .req-id {
  color: var(--se-brand) !important;
}

/* 3-dots icon (MoreHorizIcon) */
.securends .se-forms-page .moreHorizIcon {
  color: var(--se-ink-2) !important;
  font-size: 24px !important;
  cursor: pointer;
}

.securends .se-forms-page .moreHorizIcon:hover {
  color: var(--se-brand) !important;
}

/* Status buttons in cards */
.securends .se-forms-page .my-req-status-btn.MuiButton-contained,
.securends .se-forms-page .myReqStatusBtn.MuiButton-contained {
  background: var(--se-ok) !important;
  color: #fff !important;
  border-radius: var(--se-r) !important;
  font-size: 11px !important;
  height: 24px !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.securends .se-forms-page .my-req-status-btn.MuiButton-outlined,
.securends .se-forms-page .myReqStatusBtn.MuiButton-outlined {
  border: 1px solid var(--se-line) !important;
  color: var(--se-ink-2) !important;
  border-radius: var(--se-r) !important;
  font-size: 11px !important;
  height: 24px !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.securends .se-forms-page .my-req-status-btn-red.MuiButton-contained,
.securends .se-forms-page .myReqStatusBtn-red.MuiButton-contained {
  background: var(--se-risk) !important;
  color: #fff !important;
  border-radius: var(--se-r) !important;
  font-size: 11px !important;
  height: 24px !important;
  padding: 0 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* ── Form pages (NonEmployeeFormData / AddServiceAccountFormData) ── */
.securends .se-forms-page .row.manageApp > .o-form-title-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Back button — beat float: right */
.securends .se-forms-page .o-form-title-bar .button_alignment,
.securends .se-forms-page .o-form-title-bar > span:has(.button_alignment) {
  float: none !important;
  margin-left: auto !important;
}

/* Validation errors */
.securends .se-forms-page .validation-errors {
  background: var(--se-risk-tint);
  border: 1px solid var(--se-risk);
  border-radius: var(--se-r);
  padding: 12px 20px !important;
  margin: 0 0 16px;
  color: var(--se-risk) !important;
  font-size: 13px;
}

/* ── Form builder pages (AddNonEmployeeForms / UpdateFormBuilder) ── */
.securends .se-forms-page .non-employee-form-content,
.securends .se-forms-page .non-employee-form-view-content,
.securends .se-forms-page .access-template-form-view-content {
  padding: 0 !important;
}

/* Select form type — beat inline width: 250px */
.securends .se-forms-page .non-employee-form-content .MuiOutlinedInput-root {
  border-radius: var(--se-r) !important;
  height: 36px !important;
  font-size: 13px !important;
}

/* UpdateFormBuilder button row — beat pickels */
.securends .se-forms-page .form-btn-cnt {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
  margin-left: auto !important;
  float: none !important;
  align-items: center;
}

/* Stepper chrome */
.securends .se-forms-page .MuiStepper-root {
  background: var(--se-card) !important;
  border: 1px solid var(--se-line);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-shadow);
  padding: 16px 20px !important;
  margin: 0 0 16px !important;
}

.securends .se-forms-page .MuiStepLabel-label.MuiStepLabel-active,
.securends .se-forms-page .MuiStepLabel-label.MuiStepLabel-completed {
  color: var(--se-brand) !important;
  font-weight: 600 !important;
}

.securends .se-forms-page .MuiStepIcon-root.MuiStepIcon-active,
.securends .se-forms-page .MuiStepIcon-root.MuiStepIcon-completed {
  color: var(--se-brand) !important;
}

/* react-form-builder & Form Builder Canvas & Preview Generator */
.securends .se-forms-page .react-form-builder-form,
.securends .react-form-builder-form,
.react-form-builder-form {
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card) !important;
  box-shadow: var(--se-shadow) !important;
  padding: 20px 24px !important;
  margin: 0 0 16px !important;
}

.securends .se-forms-page .react-form-builder-form .rfb-item label,
.securends .se-forms-page .react-form-builder-form .rfb-item .form-label,
.securends .se-forms-page .react-form-builder .rfb-item label,
.securends .se-forms-page .react-form-builder .rfb-item .form-label,
.securends .react-form-builder-form .rfb-item label,
.securends .react-form-builder-form .rfb-item .form-label,
.react-form-builder-form .rfb-item label,
.react-form-builder-form .rfb-item .form-label {
  color: var(--se-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.securends .se-forms-page .react-form-builder-form .rfb-item .form-control,
.securends .se-forms-page .react-form-builder .rfb-item .form-control,
.securends .react-form-builder-form .rfb-item .form-control,
.react-form-builder-form .rfb-item .form-control,
.react-form-builder-form .rfb-item input[type="text"],
.react-form-builder-form .rfb-item select {
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r) !important;
  background: var(--bg-input, var(--se-card)) !important;
  color: var(--se-ink) !important;
  font-size: 13px !important;
  height: 36px !important;
  box-shadow: none !important;
}

.securends .se-forms-page .react-form-builder-form .rfb-item textarea.form-control,
.securends .se-forms-page .react-form-builder .rfb-item textarea.form-control,
.securends .react-form-builder-form .rfb-item textarea.form-control,
.react-form-builder-form .rfb-item textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  background: var(--bg-input, var(--se-card)) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r) !important;
  color: var(--se-ink) !important;
}

/* ── ReactFormBuilder Preview & Toolbox Modernization ── */

/* Point 1 Fix: Hide "Drop form elements here" text when form items exist, and fix top offset overlap */
.securends .se-forms-page .react-form-builder-preview.float-left .Sortable::before,
.securends .se-forms-page .react-form-builder-preview .Sortable::before,
.securends .react-form-builder-preview .Sortable::before {
  top: 0 !important;
  margin: 12px 0 !important;
}

.securends .se-forms-page .react-form-builder-preview .Sortable:has(.SortableItem)::before,
.securends .se-forms-page .react-form-builder-preview .Sortable:has(.rfb-item)::before,
.securends .react-form-builder-preview .Sortable:has(.SortableItem)::before,
.securends .react-form-builder-preview .Sortable:has(.rfb-item)::before {
  display: none !important;
  content: "" !important;
}

/* Canvas Layout - Flex container for full height left panel and sticky toolbox side-by-side */
.securends .se-forms-page .react-form-builder,
.securends .se-forms-page .react-form-builder > div,
.securends .react-form-builder,
.securends .react-form-builder > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: 600px !important;
}

/* Suppress clearfix pseudo-elements so they do not become flex items */
.securends .se-forms-page .react-form-builder::before,
.securends .se-forms-page .react-form-builder::after,
.securends .se-forms-page .react-form-builder > div::before,
.securends .se-forms-page .react-form-builder > div::after,
.securends .react-form-builder::before,
.securends .react-form-builder::after,
.securends .react-form-builder > div::before,
.securends .react-form-builder > div::after {
  display: none !important;
  content: none !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-preview,
.securends .se-forms-page .react-form-builder-preview,
.securends .react-form-builder .react-form-builder-preview {
  float: none !important;
  width: auto !important;
  flex: 1 1 0% !important;
  max-width: calc(100% - 296px) !important;
  min-height: 100% !important;
  height: auto !important;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card) !important;
  box-shadow: var(--se-shadow) !important;
  padding: 24px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Side Toolbox Panel - sticky layout with fixed width side-by-side */
.securends .se-forms-page .react-form-builder .react-form-builder-toolbar,
.securends .se-forms-page .react-form-builder-toolbar,
.securends .react-form-builder .react-form-builder-toolbar {
  float: none !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  flex: 0 0 280px !important;
  position: sticky !important;
  top: calc(var(--se-app-header) + 16px) !important;
  align-self: flex-start !important;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card) !important;
  box-shadow: var(--se-shadow) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-toolbar h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--se-ink) !important;
  background: transparent !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--se-line) !important;
  margin-bottom: 12px !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-toolbar ul li {
  background: var(--se-page) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r) !important;
  color: var(--se-ink) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  transition: all 0.15s ease !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-toolbar ul li:hover {
  background: var(--se-brand-tint) !important;
  border-color: var(--se-brand) !important;
  color: var(--se-brand) !important;
}

/* ── Required fields badge override: replace "Required" pill text with a red asterisk '*' ── */
.securends .se-forms-page .label-required,
.securends .se-forms-page .badge-danger.label-required,
.securends .react-form-builder .label-required,
.securends .react-form-builder-form .label-required {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 2px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.securends .se-forms-page .label-required::before,
.securends .se-forms-page .badge-danger.label-required::before,
.securends .react-form-builder .label-required::before,
.securends .react-form-builder-form .label-required::before {
  content: " *" !important;
  color: var(--se-risk, #ef4444) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* ── Remove unwanted background color on input elements, field containers, and section labels ── */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .rfb-item,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .form-group,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .col-md-12,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .col-md-6,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .col-md-4,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .row > div,
.securends .se-forms-page .react-form-builder .react-form-builder-preview [class*="col-"] > div,
.securends .se-forms-page .react-form-builder-preview .SortableItem div,
.securends .se-forms-page .react-form-builder-preview .rfb-item div,
.securends .se-forms-page .react-form-builder-preview .form-group div,
.securends .se-forms-page .react-form-builder-preview [class*="col-"] > div,
.securends .non-employee-form-content .rfb-item div,
.securends .non-employee-form-content .form-field-content,
.securends .non-employee-form-content [class*="col-"],
.securends .non-employee-form-content [class*="col-"] > div,
.securends .rfb-item .form-field-content,
.securends .rfb-item [class*="col-"] > div {
  background: transparent !important;
  background-color: transparent !important;
}

/* Suppress blue highlight backgrounds on labels & headers */
.securends .se-forms-page .rfb-item h3,
.securends .se-forms-page .rfb-item h4,
.securends .non-employee-form-content .rfb-item h3,
.securends .non-employee-form-content .rfb-item h4,
.securends .rfb-item label:has(+ input),
.securends .rfb-item .form-field-content label {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Ensure clean white input fields and 100% column fill inside form entries & preview */
.securends .se-forms-page .react-form-builder .react-form-builder-preview input.form-control,
.securends .se-forms-page .react-form-builder .react-form-builder-preview input[type="text"],
.securends .se-forms-page .react-form-builder .react-form-builder-preview select,
.securends .se-forms-page .react-form-builder .react-form-builder-preview textarea,
.securends .non-employee-form-content input.form-control,
.securends .non-employee-form-content input[type="text"],
.securends .non-employee-form-content input[type="email"],
.securends .non-employee-form-content select,
.securends .non-employee-form-content textarea,
.securends .rfb-item input.form-control,
.securends .rfb-item input[type="text"],
.securends .rfb-item input[type="email"],
.securends .rfb-item select,
.securends .rfb-item textarea,
.securends .rfb-item .form-control,
.securends .rfb-item [class*="col-"] input,
.securends .rfb-item [class*="col-"] select,
.securends .rfb-item [class*="col-"] textarea,
.react-form-builder-form .rfb-item input,
.react-form-builder-form .rfb-item select,
.react-form-builder-form .rfb-item textarea {
  background: var(--bg-input, var(--se-card)) !important;
  background-color: var(--bg-input, var(--se-card)) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r) !important;
  box-shadow: none !important;
  color: var(--se-ink) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Issue 1 Fix: Section Cards with 100% visible top border ── */
.securends .se-forms-page .rfb-item,
.securends .react-form-builder-form .rfb-item,
.react-form-builder-form .rfb-item,
.securends .non-employee-form-content .rfb-item {
  position: relative !important;
  overflow: visible !important;
  margin-bottom: 12px !important;
}

/* Section Header Labels above section cards (e.g. Additional Details *, Employee Details) */
.securends .se-forms-page .rfb-item > div > label.form-label,
.securends .react-form-builder-form .rfb-item label.form-label,
.react-form-builder-form .rfb-item label.form-label,
.securends .non-employee-form-content .rfb-item label.form-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--se-ink) !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Row & Section Cards (e.g. Employee Details, Additional Details, TwoColumnRow, ThreeColumnRow) */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem.rfb-item .row,
.securends .se-forms-page .react-form-builder-form .rfb-item .row,
.securends .react-form-builder-form .rfb-item .row,
.react-form-builder-form .rfb-item .row,
.securends .non-employee-form-content .rfb-item .row,
.securends .se-forms-page .rfb-item .row,
.securends .rfb-item .row {
  border: 1px solid var(--se-line, #cbd5e1) !important;
  border-radius: var(--se-r-card, 10px) !important;
  background-color: var(--se-card, #ffffff) !important;
  box-shadow: var(--se-shadow, 0 1px 3px rgba(0,0,0,0.08)) !important;
  padding: 18px 16px 14px !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* ── Issue 2 Fix: Column grid alignment and ratio preservation ── */
.securends .se-forms-page [class*="col-"],
.securends .react-form-builder-form [class*="col-"],
.react-form-builder-form [class*="col-"],
.securends .non-employee-form-content [class*="col-"],
.securends .rfb-item [class*="col-"],
.rfb-item [class*="col-"] {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Full width columns (col-12, col-md-12, col-sm-12, col-lg-12) */
.securends .se-forms-page .col-12,
.securends .se-forms-page .col-md-12,
.securends .se-forms-page .col-sm-12,
.securends .se-forms-page .col-lg-12,
.securends .react-form-builder-form .col-12,
.securends .react-form-builder-form .col-md-12,
.securends .react-form-builder-form .col-sm-12,
.securends .react-form-builder-form .col-lg-12,
.securends .rfb-item .col-12,
.securends .rfb-item .col-md-12,
.securends .rfb-item .col-sm-12,
.securends .rfb-item .col-lg-12,
.rfb-item .col-12,
.rfb-item .col-md-12,
.rfb-item .col-sm-12,
.rfb-item .col-lg-12 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Half width columns (col-6, col-md-6, col-sm-6, col-lg-6) */
.securends .se-forms-page .col-6,
.securends .se-forms-page .col-md-6,
.securends .se-forms-page .col-sm-6,
.securends .se-forms-page .col-lg-6,
.securends .react-form-builder-form .col-6,
.securends .react-form-builder-form .col-md-6,
.securends .react-form-builder-form .col-sm-6,
.securends .react-form-builder-form .col-lg-6,
.securends .rfb-item .col-6,
.securends .rfb-item .col-md-6,
.securends .rfb-item .col-sm-6,
.securends .rfb-item .col-lg-6,
.rfb-item .col-6,
.rfb-item .col-md-6,
.rfb-item .col-sm-6,
.rfb-item .col-lg-6 {
  flex: 0 0 calc(50% - 6px) !important;
  max-width: calc(50% - 6px) !important;
  width: calc(50% - 6px) !important;
}

/* One-third width columns (col-4, col-md-4, col-sm-4, col-lg-4) */
.securends .se-forms-page .col-4,
.securends .se-forms-page .col-md-4,
.securends .se-forms-page .col-sm-4,
.securends .se-forms-page .col-lg-4,
.securends .react-form-builder-form .col-4,
.securends .react-form-builder-form .col-md-4,
.securends .react-form-builder-form .col-sm-4,
.securends .react-form-builder-form .col-lg-4,
.securends .rfb-item .col-4,
.securends .rfb-item .col-md-4,
.securends .rfb-item .col-sm-4,
.securends .rfb-item .col-lg-4,
.rfb-item .col-4,
.rfb-item .col-md-4,
.rfb-item .col-sm-4,
.rfb-item .col-lg-4 {
  flex: 0 0 calc(33.333333% - 8px) !important;
  max-width: calc(33.333333% - 8px) !important;
  width: calc(33.333333% - 8px) !important;
}

/* One-quarter width columns (col-3, col-md-3, col-sm-3, col-lg-3) */
.securends .se-forms-page .col-3,
.securends .se-forms-page .col-md-3,
.securends .se-forms-page .col-sm-3,
.securends .se-forms-page .col-lg-3,
.securends .react-form-builder-form .col-3,
.securends .react-form-builder-form .col-md-3,
.securends .react-form-builder-form .col-sm-3,
.securends .react-form-builder-form .col-lg-3,
.securends .rfb-item .col-3,
.securends .rfb-item .col-md-3,
.securends .rfb-item .col-sm-3,
.securends .rfb-item .col-lg-3,
.rfb-item .col-3,
.rfb-item .col-md-3,
.rfb-item .col-sm-3,
.rfb-item .col-lg-3 {
  flex: 0 0 calc(25% - 9px) !important;
  max-width: calc(25% - 9px) !important;
  width: calc(25% - 9px) !important;
}

.securends .rfb-item .form-group,
.securends .non-employee-form-content .form-group,
.rfb-item .form-group {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

/* Input fields inside columns take full width of column box */
.securends .se-forms-page .rfb-item [class*="col-"] input.form-control,
.securends .se-forms-page .rfb-item [class*="col-"] select,
.securends .se-forms-page .rfb-item [class*="col-"] textarea,
.securends .non-employee-form-content [class*="col-"] input.form-control,
.securends .non-employee-form-content [class*="col-"] select,
.securends .non-employee-form-content [class*="col-"] textarea,
.rfb-item [class*="col-"] input.form-control,
.rfb-item [class*="col-"] select,
.rfb-item [class*="col-"] textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Prevent text overlapping in File / Image Upload elements ── */
.securends .se-forms-page .image-upload-container,
.securends .image-upload-container,
.image-upload-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 14px 16px !important;
  border: 1px dashed var(--se-line) !important;
  border-radius: var(--se-r) !important;
  background: var(--se-card) !important;
  min-height: 90px !important;
  margin-top: 8px !important;
  box-sizing: border-box !important;
}

.securends .se-forms-page .image-upload-container > div,
.securends .image-upload-container > div,
.image-upload-container > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
}

.securends .se-forms-page .image-upload-control,
.securends .image-upload-control,
.image-upload-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  position: static !important;
  width: 100% !important;
  text-align: center !important;
}

.securends .se-forms-page .image-upload-control .btn,
.securends .se-forms-page .image-upload-control .btn-default {
  position: static !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  color: var(--se-ink) !important;
  border-radius: var(--se-r) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: var(--se-shadow) !important;
  cursor: pointer !important;
}

.securends .se-forms-page .image-upload-control p {
  position: static !important;
  margin: 2px 0 0 0 !important;
  font-size: 11px !important;
  color: var(--se-ink-2) !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
  text-align: center !important;
}

.securends .se-forms-page input.image-upload {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

/* ── Point 3 Fix: Fix Hover UI & Action Toolbar Visibility for Form Builder Containers ── */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .rfb-item {
  position: relative !important;
  overflow: visible !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  border: 1px dashed transparent !important;
  border-radius: var(--se-r) !important;
  padding: 16px 12px 10px !important;
  margin-bottom: 8px !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem:hover,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .rfb-item:hover {
  border-color: var(--se-brand) !important;
  box-shadow: 0 0 0 1px var(--se-brand-tint), var(--se-shadow) !important;
}

/* Floating Toolbar Header positioning on hover — keep inside padding box with overflow visible */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .rfb-item .toolbar-header {
  position: absolute !important;
  top: 4px !important;
  left: 8px !important;
  right: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 20 !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem:hover > .toolbar-header,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .rfb-item:hover > .toolbar-header,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem:hover .toolbar-header {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Element Type Badge pill (e.g. Header Text, TextInput) */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .badge,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .badge-secondary {
  background: var(--se-brand-tint, #eaf0f8) !important;
  color: var(--se-brand, #17457e) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  border: 1px solid var(--se-line) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  pointer-events: auto !important;
  margin: 0 !important;
}

/* Action Buttons Container (Edit, Delete, Drag Handle) */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .toolbar-header-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--se-card, #ffffff) !important;
  border: 1px solid var(--se-line, #e2e8f0) !important;
  border-radius: var(--se-r, 6px) !important;
  padding: 2px 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  pointer-events: auto !important;
  margin: 0 !important;
  z-index: 21 !important;
}

/* Action Button styling inside toolbar */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .toolbar-header-buttons .btn {
  padding: 4px 6px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--se-ink) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .toolbar-header-buttons .btn:hover {
  color: var(--se-brand) !important;
  background: var(--se-navy-2, #e8eef6) !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .toolbar-header-buttons .btn .fa-trash:hover,
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .toolbar-header-buttons .btn .fa-times:hover {
  color: var(--se-risk, #ef4444) !important;
}

/* Ensure FontAwesome icons render clearly */
.securends .se-forms-page .react-form-builder .toolbar-header-buttons i {
  font-size: 13px !important;
  display: inline-block !important;
  color: inherit !important;
}

/* Drag handle grip */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .SortableItem .toolbar-header .toolbar-header-buttons .rfb-drag-handle {
  padding: 4px 6px !important;
  color: var(--se-ink-2) !important;
  cursor: grab !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* /Form placeholder — beat marginTop: 350px */
.securends .se-forms-page[style*="marginTop"] {
  margin-top: 0 !important;
}

/* ── No data alert ── */
.securends .se-forms-page .alert-info {
  background: var(--se-brand-tint) !important;
  border: 1px solid var(--se-brand-line) !important;
  color: var(--se-ink) !important;
  border-radius: var(--se-r) !important;
  margin: 0 0 12px !important;
}

/* ── Filter menu (MUI Menu) ── */
.securends .se-forms-page .filter-menu .MuiPaper-root,
.securends .filter-menu.requestsScreenFilter .MuiPaper-root,
.securends .filter-menu.requestsErrorScreenFilter .MuiPaper-root {
  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;
  color: var(--se-ink) !important;
}

/* ── Approval Workflow Add Level Button ── */
.securends .se-forms-page .se-add-level-btn,
.securends .se-add-level-btn,
#templatesave.se-add-level-btn {
  border: 1px solid var(--se-brand) !important;
  color: var(--se-brand) !important;
  background: var(--se-card) !important;
  border-radius: var(--se-r) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 18px !important;
  transition: all var(--se-ease) !important;
  cursor: pointer !important;
}

.securends .se-forms-page .se-add-level-btn:hover,
.securends .se-add-level-btn:hover,
#templatesave.se-add-level-btn:hover {
  background: var(--se-brand-tint, #eff6ff) !important;
  border-color: var(--se-brand) !important;
  color: var(--se-brand) !important;
}

/* ── Form Preview Dialog Modal Modernization ── */
.securends .MuiDialog-paper,
.MuiDialog-paper {
  border-radius: var(--se-r-card) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid var(--se-line) !important;
  background: var(--se-card) !important;
}

.securends .MuiDialogTitle-root,
.MuiDialogTitle-root {
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--se-line) !important;
  background: var(--se-card) !important;
}

.securends .MuiDialogTitle-root .MuiTypography-root,
.MuiDialogTitle-root .MuiTypography-root {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--se-ink) !important;
}

.securends .MuiDialogContent-root,
.MuiDialogContent-root {
  padding: 20px 24px !important;
  background: var(--se-page, #f8fafc) !important;
}

.securends .MuiDialogActions-root,
.MuiDialogActions-root {
  padding: 12px 24px !important;
  border-top: 1px solid var(--se-line) !important;
  background: var(--se-card) !important;
}

.securends .MuiDialogActions-root .MuiButton-root,
.MuiDialogActions-root .MuiButton-root {
  border-radius: var(--se-r) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* ── Form Generator Submit Button Modernization (e.g. View Form Modal in /listOfForms) ── */
.securends .se-forms-page .react-form-builder-form .btn-toolbar,
.securends .react-form-builder-form .btn-toolbar,
.react-form-builder-form .btn-toolbar,
.securends .se-forms-page .react-form-builder-form .btn-submit,
.securends .react-form-builder-form .btn-submit,
.react-form-builder-form .btn-submit {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--se-line) !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.securends .se-forms-page .react-form-builder-form .btn-toolbar button,
.securends .se-forms-page .react-form-builder-form .btn-toolbar input[type="submit"],
.securends .react-form-builder-form .btn-toolbar button,
.securends .react-form-builder-form .btn-toolbar input[type="submit"],
.react-form-builder-form .btn-toolbar button,
.react-form-builder-form .btn-toolbar input[type="submit"],
.react-form-builder-form .btn-submit,
.react-form-builder-form button[type="submit"] {
  background: var(--se-brand, #17457e) !important;
  color: #ffffff !important;
  border: 1px solid var(--se-brand, #17457e) !important;
  border-radius: var(--se-r, 6px) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 20px !important;
  height: 36px !important;
  min-width: 90px !important;
  line-height: 1.4 !important;
  box-shadow: var(--se-shadow, 0 1px 3px rgba(0,0,0,0.08)) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: none !important;
  margin: 0 !important;
}

.securends .se-forms-page .react-form-builder-form .btn-toolbar button:hover:not(:disabled),
.securends .react-form-builder-form .btn-toolbar button:hover:not(:disabled),
.react-form-builder-form .btn-toolbar button:hover:not(:disabled),
.react-form-builder-form button[type="submit"]:hover:not(:disabled) {
  background: var(--se-brand-hover, #0f325e) !important;
  border-color: var(--se-brand-hover, #0f325e) !important;
}

/* Disabled Submit button state styling */
.securends .se-forms-page .react-form-builder-form .btn-toolbar button:disabled,
.securends .se-forms-page .react-form-builder-form .btn-toolbar input[type="submit"]:disabled,
.securends .react-form-builder-form .btn-toolbar button:disabled,
.securends .react-form-builder-form .btn-toolbar input[type="submit"]:disabled,
.react-form-builder-form .btn-toolbar button:disabled,
.react-form-builder-form .btn-toolbar input[type="submit"]:disabled,
.react-form-builder-form .btn-submit:disabled,
.react-form-builder-form button[type="submit"]:disabled {
  background: var(--se-navy-2, #e2e8f0) !important;
  color: var(--se-ink-2, #64748b) !important;
  border: 1px solid var(--se-line, #cbd5e1) !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
  box-shadow: none !important;
}

/* ── Bootstrap Modal View Form Overlay (access-template-modal in ListOfForms.js) ── */
.access-template-modal .modal-dialog,
.iga.access-template-modal .modal-dialog {
  border-radius: var(--se-r-card) !important;
  box-shadow: var(--se-shadow-md, 0 10px 25px -5px rgba(0,0,0,0.1)) !important;
  overflow: hidden !important;
}

.access-template-modal .modal-content,
.iga.access-template-modal .modal-content {
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card) !important;
  background: var(--se-card) !important;
}

.access-template-modal .modal-header,
.iga.access-template-modal .modal-header {
  padding: 16px 24px !important;
  border-bottom: 1px solid var(--se-line) !important;
  background: var(--se-card) !important;
}

.access-template-modal .modal-header .modal-title,
.iga.access-template-modal .modal-header .modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--se-ink) !important;
}

.access-template-modal .modal-body,
.iga.access-template-modal .modal-body {
  padding: 20px 24px !important;
  background: var(--se-page, #f8fafc) !important;
}

/* ── "Load More Applications" Button Modernization ── */
.securends .se-forms-page .catalog-container button#templatesave,
.se-forms-page .catalog-container button#templatesave {
  width: auto !important;
  min-width: 180px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: none !important;
  padding: 6px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--se-brand, #17457e) !important;
  background: var(--se-card, #ffffff) !important;
  border: 1px solid var(--se-brand, #17457e) !important;
  border-radius: var(--se-r, 6px) !important;
  box-shadow: var(--se-shadow, 0 1px 3px rgba(0,0,0,0.08)) !important;
  margin: 16px auto !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-transform: none !important;
}

.securends .se-forms-page .catalog-container button#templatesave:hover,
.se-forms-page .catalog-container button#templatesave:hover {
  background: var(--se-brand-tint, #eff6ff) !important;
  border-color: var(--se-brand-hover, #0f325e) !important;
  color: var(--se-brand-hover, #0f325e) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .securends .se-forms-page .scroll-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .securends .se-forms-page .form-btn-cnt {
    flex-wrap: wrap;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Add / Update Data Transformation Form
   Route: /addDataTransformation  |  /addDataTransformation/:id
   Wrapper: .se-add-data-transformation-page on root div.react-table
   Presentation only — no logic, API, or Redux changes.
══════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.securends .se-add-data-transformation-page {
  padding: 0 !important;
  background: var(--se-page) !important;
}

/* ── Breadcrumb / page name ── */
.se-add-data-transformation-page .strapi-pagename,
.securends .se-add-data-transformation-page .strapi-pagename,
div.se-add-data-transformation-page > span.strapi-pagename {
  display: none !important;
}

/* ── Sticky toolbar card — same white header card as Campaign Preview ── */
html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp,
.se-add-data-transformation-page .row.manageApp,
.securends .se-add-data-transformation-page .row.manageApp {
  position: sticky !important;
  top: var(--se-sticky-top, calc(var(--se-app-header, 50px) + var(--se-breadcrumb-h, 32px))) !important;
  z-index: 8 !important;
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card, 14px) !important;
  box-shadow: var(--se-shadow) !important;
  padding: 10px 20px !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  min-height: var(--se-page-toolbar, 52px) !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Title text inside toolbar — nested, no double card (like .campaign-preview-header h2) */
html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp .o-form-title-bar,
.se-add-data-transformation-page .row.manageApp .o-form-title-bar,
.securends .se-add-data-transformation-page .row.manageApp .o-form-title-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 28px !important;
  font-size: var(--se-t-page-head, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--se-ink) !important;
  font-family: var(--se-sans) !important;
}

/* Back button span — push to right */
.se-add-data-transformation-page .row.manageApp .o-form-title-bar .campaign_progress,
.securends .se-add-data-transformation-page .row.manageApp .o-form-title-bar .campaign_progress {
  margin-left: auto !important;
  float: none !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Back — solid primary like Campaign Preview (beat data-type=cancel quiet styles) */
html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp .campaign_progress .AddAppBtn,
html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp .campaign_progress input.AddAppBtn,
html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp .AddAppBtn.button-primary.blue,
html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[data-type="cancel"],
.se-add-data-transformation-page .row.manageApp .AddAppBtn.button-primary.blue,
.se-add-data-transformation-page .row.manageApp input.AddAppBtn[type="button"],
.securends .se-add-data-transformation-page .row.manageApp .AddAppBtn.button-primary.blue,
.securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[type="button"],
.securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[data-type="cancel"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 12px !important;
  line-height: 26px !important;
  font-family: var(--se-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  background-color: var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  border: 1px solid var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  border-color: var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  color: var(--se-btn-fg, #fff) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #fff) !important;
  border-radius: var(--se-r) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: background var(--se-ease, 0.15s ease), border-color var(--se-ease, 0.15s ease);
}

html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp .campaign_progress .AddAppBtn:hover,
html[data-se-theme] .securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[data-type="cancel"]:hover,
.se-add-data-transformation-page .row.manageApp .AddAppBtn.button-primary.blue:hover,
.se-add-data-transformation-page .row.manageApp input.AddAppBtn[type="button"]:hover,
.securends .se-add-data-transformation-page .row.manageApp .AddAppBtn.button-primary.blue:hover,
.securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[type="button"]:hover,
.securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[data-type="cancel"]:hover {
  background: var(--se-btn-bg-hover, var(--se-brand-fill-hover, var(--se-brand-hover))) !important;
  background-color: var(--se-btn-bg-hover, var(--se-brand-fill-hover, var(--se-brand-hover))) !important;
  border-color: var(--se-btn-bg-hover, var(--se-brand-fill-hover, var(--se-brand-hover))) !important;
  color: var(--se-btn-fg, #fff) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #fff) !important;
}

html[data-se-mode="dark"][data-se-theme] .securends .se-add-data-transformation-page .row.manageApp .campaign_progress .AddAppBtn,
html[data-se-mode="dark"][data-se-theme] .securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[data-type="cancel"],
html[data-se-mode="dark"] .securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[type="button"] {
  background: var(--se-btn-bg) !important;
  background-color: var(--se-btn-bg) !important;
  border: 1px solid var(--se-btn-bg) !important;
  border-color: var(--se-btn-bg) !important;
  color: var(--se-btn-fg) !important;
  -webkit-text-fill-color: var(--se-btn-fg) !important;
}

html[data-se-mode="dark"][data-se-theme] .securends .se-add-data-transformation-page .row.manageApp .campaign_progress .AddAppBtn:hover,
html[data-se-mode="dark"][data-se-theme] .securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[data-type="cancel"]:hover,
html[data-se-mode="dark"] .securends .se-add-data-transformation-page .row.manageApp input.AddAppBtn[type="button"]:hover {
  background: var(--se-btn-bg-hover) !important;
  background-color: var(--se-btn-bg-hover) !important;
  border-color: var(--se-btn-bg-hover) !important;
  color: var(--se-btn-fg) !important;
  -webkit-text-fill-color: var(--se-btn-fg) !important;
}

/* ── Form Card Container (endpointConfigCard) ── */
.se-add-data-transformation-page .endpointConfigCard,
.securends .se-add-data-transformation-page .endpointConfigCard {
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r-card, 14px) !important;
  box-shadow: var(--se-shadow) !important;
  padding: 32px 36px !important;
  margin: 0 0 16px 0 !important;
  max-width: 800px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Inner row wrappers */
.se-add-data-transformation-page .endpointConfigCard .row,
.se-add-data-transformation-page .endpointConfigCard .endPointRolesContainer,
.securends .se-add-data-transformation-page .endpointConfigCard .row,
.securends .se-add-data-transformation-page .endpointConfigCard .endPointRolesContainer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Field row layout ── */
.se-add-data-transformation-page .endpointConfigCard .row.form-group,
.securends .se-add-data-transformation-page .endpointConfigCard .row.form-group {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin-bottom: 22px !important;
  width: 100% !important;
}

/* Label column */
.se-add-data-transformation-page .endpointConfigCard .col-md-3.required,
.se-add-data-transformation-page .endpointConfigCard .required,
.securends .se-add-data-transformation-page .endpointConfigCard .col-md-3.required,
.securends .se-add-data-transformation-page .endpointConfigCard .required {
  flex: 0 0 130px !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 0 0 0 !important;
  margin: 0 !important;
  float: none !important;
}

.se-add-data-transformation-page .endpointConfigCard .control-label.temp-lbl,
.securends .se-add-data-transformation-page .endpointConfigCard .control-label.temp-lbl {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--se-ink, #0F172A) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-family: var(--se-sans) !important;
}

/* Required asterisk */
.se-add-data-transformation-page .endpointConfigCard .col-md-3.required .control-label::after,
.se-add-data-transformation-page .endpointConfigCard .required .control-label::after,
.securends .se-add-data-transformation-page .endpointConfigCard .col-md-3.required .control-label::after,
.securends .se-add-data-transformation-page .endpointConfigCard .required .control-label::after {
  content: " *" !important;
  color: var(--se-risk, #ef4444) !important;
  font-weight: 700 !important;
}

/* Input column — fills the remaining card width up to the right padding */
.se-add-data-transformation-page .endpointConfigCard .col-md-4.o-form-input,
.se-add-data-transformation-page .endpointConfigCard .o-form-input,
.securends .se-add-data-transformation-page .endpointConfigCard .col-md-4.o-form-input,
.securends .se-add-data-transformation-page .endpointConfigCard .o-form-input {
  flex: 1 1 0% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Input field — uses --bg-input so light stays white and dark uses standard field fill */
.se-add-data-transformation-page .endpointConfigCard .form-control,
.se-add-data-transformation-page .endpointConfigCard input[type="text"],
.se-add-data-transformation-page .endpointConfigCard textarea,
.se-add-data-transformation-page .endpointConfigCard select,
.securends .se-add-data-transformation-page .endpointConfigCard .form-control,
.securends .se-add-data-transformation-page .endpointConfigCard input[type="text"],
.securends .se-add-data-transformation-page .endpointConfigCard textarea,
.securends .se-add-data-transformation-page .endpointConfigCard select {
  height: 40px !important;
  border: 1px solid var(--se-line, #CBD5E1) !important;
  border-radius: var(--se-r-sm, 8px) !important;
  background: var(--bg-input, var(--se-card)) !important;
  background-color: var(--bg-input, var(--se-card)) !important;
  color: var(--se-ink, #0F172A) !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  box-shadow: none !important;
  width: 100% !important;
  transition: all 0.15s ease-in-out !important;
  font-family: var(--se-sans) !important;
}

.se-add-data-transformation-page .endpointConfigCard .form-control::placeholder,
.se-add-data-transformation-page .endpointConfigCard input[type="text"]::placeholder,
.se-add-data-transformation-page .endpointConfigCard textarea::placeholder,
.securends .se-add-data-transformation-page .endpointConfigCard .form-control::placeholder,
.securends .se-add-data-transformation-page .endpointConfigCard input[type="text"]::placeholder,
.securends .se-add-data-transformation-page .endpointConfigCard textarea::placeholder {
  color: var(--se-ink-3, #94A3B8) !important;
}

.se-add-data-transformation-page .endpointConfigCard .form-control:focus,
.se-add-data-transformation-page .endpointConfigCard input[type="text"]:focus,
.securends .se-add-data-transformation-page .endpointConfigCard .form-control:focus,
.securends .se-add-data-transformation-page .endpointConfigCard input[type="text"]:focus {
  border-color: var(--se-brand, #17457E) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(23, 69, 126, 0.12) !important;
}

.se-add-data-transformation-page .endpointConfigCard .form-control.invalid,
.se-add-data-transformation-page .endpointConfigCard input.invalid,
.securends .se-add-data-transformation-page .endpointConfigCard .form-control.invalid,
.securends .se-add-data-transformation-page .endpointConfigCard input.invalid {
  border-color: var(--se-risk, #ef4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* Validation error message */
.se-add-data-transformation-page .endpointConfigCard span.error,
.securends .se-add-data-transformation-page .endpointConfigCard span.error {
  display: block !important;
  font-size: 12px !important;
  color: var(--se-risk, #ef4444) !important;
  margin-top: 4px !important;
  min-height: 14px !important;
}

/* ── Button bar (o-form-button-bar) ── */
.se-add-data-transformation-page .endpointConfigCard .o-form-button-bar,
.securends .se-add-data-transformation-page .endpointConfigCard .o-form-button-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--se-line, #E2E8F0) !important;
  margin-top: 12px !important;
  width: 100% !important;
}

/* Save button */
.se-add-data-transformation-page .endpointConfigCard .button.button-primary.blue.submit-button,
.securends .se-add-data-transformation-page .endpointConfigCard .button.button-primary.blue.submit-button {
  background: var(--se-brand, #17457E) !important;
  color: #ffffff !important;
  border: 1px solid var(--se-brand, #17457E) !important;
  border-radius: var(--se-r-sm, 8px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 38px !important;
  padding: 0 28px !important;
  box-shadow: var(--se-shadow) !important;
  cursor: pointer !important;
  transition: all var(--se-ease, 0.15s ease) !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 84px !important;
}

.se-add-data-transformation-page .endpointConfigCard .button.button-primary.blue.submit-button:hover:not(:disabled),
.securends .se-add-data-transformation-page .endpointConfigCard .button.button-primary.blue.submit-button:hover:not(:disabled) {
  background: var(--se-brand-hover, #10365F) !important;
  border-color: var(--se-brand-hover, #10365F) !important;
  box-shadow: var(--se-shadow-md) !important;
}

.se-add-data-transformation-page .endpointConfigCard .button.button-primary.blue.submit-button:disabled,
.securends .se-add-data-transformation-page .endpointConfigCard .button.button-primary.blue.submit-button:disabled {
  background: #E2E8F0 !important;
  color: #94A3B8 !important;
  border-color: #CBD5E1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Spinner icon when saving */
.se-add-data-transformation-page .endpointConfigCard .fa-spinner-icon.createTemplateLoader,
.securends .se-add-data-transformation-page .endpointConfigCard .fa-spinner-icon.createTemplateLoader {
  position: static !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--se-ink-2) !important;
}

/* ── Loading spinner (edit/update mode) ── */
.securends .se-add-data-transformation-page .loaderTitle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 0 !important;
}

/* ─────────────────────────────────────────────────────────
   Data Transformation List Screen (/dataTransformation)
   Wrapper: .se-data-transformation-page
   ───────────────────────────────────────────────────────── */

.securends .se-data-transformation-page {
  padding: 0 !important;
  background: transparent !important;
}

/* Hide legacy page name breadcrumb */
.securends .se-data-transformation-page .strapi-pagename {
  display: none !important;
}

/* Header toolbar row wrapper */
.securends .se-data-transformation-page .row.manageApp {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  background: transparent !important;
  position: static !important;
  top: auto !important;
}

/* Modern Card Header with title and "Add" button inline */
.securends .se-data-transformation-page h2.o-form-title-bar,
.securends .se-data-transformation-page .o-form-title-bar {
  background: var(--se-card, #ffffff) !important;
  border: 1px solid var(--se-line, #E2E8F0) !important;
  border-radius: var(--se-r-card, 14px) !important;
  box-shadow: var(--se-shadow) !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: var(--se-page-toolbar, 52px) !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: static !important;
  font-size: var(--se-t-page-head, 18px) !important;
  font-weight: 600 !important;
  color: var(--se-ink, #0F172A) !important;
  font-family: var(--se-sans) !important;
  line-height: 1.3 !important;
}

/* Add button container */
.securends .se-data-transformation-page .campaign_progress {
  position: static !important;
  float: none !important;
  right: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* "Add" — same as Applications / kit primary Add (beat pickels; no 16px pill) */
html[data-se-theme] .securends .se-data-transformation-page .o-form-title-bar button.custom__pg.AddAppBtn,
html[data-se-theme] .securends .se-data-transformation-page button.custom__pg.AddAppBtn,
.securends .se-data-transformation-page .o-form-title-bar button.custom__pg.AddAppBtn,
.securends .se-data-transformation-page button.AddAppBtn,
.securends .se-data-transformation-page button.custom__pg.AddAppBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 12px !important;
  line-height: 26px !important;
  margin: 0 !important;
  font-family: var(--se-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  background-color: var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  border: 1px solid var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  border-color: var(--se-btn-bg, var(--se-brand-fill, var(--se-brand))) !important;
  color: var(--se-btn-fg, #fff) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #fff) !important;
  border-radius: var(--se-r) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-transform: none !important;
  float: none !important;
  position: static !important;
  box-sizing: border-box !important;
  transition: background var(--se-ease, 0.15s ease), border-color var(--se-ease, 0.15s ease);
}

html[data-se-theme] .securends .se-data-transformation-page button.custom__pg.AddAppBtn:hover,
.securends .se-data-transformation-page button.AddAppBtn:hover,
.securends .se-data-transformation-page button.custom__pg.AddAppBtn:hover {
  background: var(--se-btn-bg-hover, var(--se-brand-fill-hover, var(--se-brand-hover))) !important;
  background-color: var(--se-btn-bg-hover, var(--se-brand-fill-hover, var(--se-brand-hover))) !important;
  border-color: var(--se-btn-bg-hover, var(--se-brand-fill-hover, var(--se-brand-hover))) !important;
  color: var(--se-btn-fg, #fff) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #fff) !important;
}

html[data-se-mode="dark"][data-se-theme] .securends .se-data-transformation-page button.custom__pg.AddAppBtn,
html[data-se-mode="dark"] .securends .se-data-transformation-page button.AddAppBtn {
  background: var(--se-btn-bg) !important;
  background-color: var(--se-btn-bg) !important;
  border-color: var(--se-btn-bg) !important;
  color: var(--se-btn-fg) !important;
  -webkit-text-fill-color: var(--se-btn-fg) !important;
}

html[data-se-mode="dark"][data-se-theme] .securends .se-data-transformation-page button.custom__pg.AddAppBtn:hover,
html[data-se-mode="dark"] .securends .se-data-transformation-page button.AddAppBtn:hover {
  background: var(--se-btn-bg-hover) !important;
  background-color: var(--se-btn-bg-hover) !important;
  border-color: var(--se-btn-bg-hover) !important;
  color: var(--se-btn-fg) !important;
  -webkit-text-fill-color: var(--se-btn-fg) !important;
}

/* Table container styling */
.securends .se-data-transformation-page .campaignList.Table {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.securends .se-data-transformation-page .CampaignTable {
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Keep header / filter / body on one flex track after search.
   Action cell inline flexGrow and Description maxWidth 1000 were locking
   mismatched widths and opening a horizontal gutter. */
.securends .se-data-transformation-page .listofCampTable.ReactTable,
.securends .se-data-transformation-page .ReactTable.listofCampTable {
  width: 100% !important;
  max-width: 100% !important;
}

.securends .se-data-transformation-page .ReactTable .rt-thead.-header .rt-tr > .rt-th:first-child,
.securends .se-data-transformation-page .ReactTable .rt-thead.-filters .rt-tr > .rt-th:first-child,
.securends .se-data-transformation-page .ReactTable .rt-tbody .rt-tr > .rt-td:first-child {
  min-width: 74px;
  box-sizing: border-box;
}

.securends .se-data-transformation-page .ReactTable .rt-thead.-filters .rt-th input,
.securends .se-data-transformation-page .ReactTable .rt-thead.-filters .rt-th .form-control,
.securends .se-data-transformation-page .ReactTable .-header input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ReactTable modern card style */
.securends .se-data-transformation-page .ReactTable {
  background: var(--se-card, #ffffff) !important;
  border: 1px solid var(--se-line, #E2E8F0) !important;
  border-radius: var(--se-r-card, 14px) !important;
  box-shadow: var(--se-shadow) !important;
  overflow: hidden !important;
  font-family: var(--se-sans) !important;
}

/* Table header styling */
.securends .se-data-transformation-page .ReactTable .-header {
  background: var(--se-page, #F8FAFC) !important;
  border-bottom: 1px solid var(--se-line, #E2E8F0) !important;
  box-shadow: none !important;
}

.securends .se-data-transformation-page .ReactTable .-header .rt-th {
  color: var(--se-ink-2, #64748b) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 14px !important;
  border-right: none !important;
}

.securends .se-data-transformation-page .ReactTable .-header .rt-th > div {
  font-family: var(--se-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--se-ink-2, #64748b) !important;
}

/* Filter inputs in header */
.securends .se-data-transformation-page .ReactTable .-header input {
  border: 1px solid var(--se-line, #E2E8F0) !important;
  border-radius: var(--se-r-sm, 6px) !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  background: var(--se-card, #ffffff) !important;
  color: var(--se-ink, #0F172A) !important;
  outline: none !important;
  box-shadow: none !important;
}

.securends .se-data-transformation-page .ReactTable .-header input:focus {
  border-color: var(--se-brand, #17457E) !important;
}

/* Table rows — standard divider (--se-table-line), same as tables.css */
.securends .se-data-transformation-page .ReactTable .rt-tr-group {
  border-bottom: none !important;
}

.securends .se-data-transformation-page .ReactTable .rt-td {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: var(--se-ink, #0F172A) !important;
  font-family: var(--se-sans) !important;
  border-right: none !important;
  border-bottom: 1px solid var(--se-table-line, var(--se-line)) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}

.securends .se-data-transformation-page .ReactTable .rt-tr-group:hover .rt-td {
  background: var(--se-row-hover, #F8FAFC) !important;
}

/* Action dropdown gear styling */
.securends .se-data-transformation-page .ReactTable .dropdown.badge {
  background: transparent !important;
  padding: 0 !important;
}

.securends .se-data-transformation-page .ReactTable .btn.btn-default.dropdown-toggle {
  background: var(--se-card, #ffffff) !important;
  border: 1px solid var(--se-line, #E2E8F0) !important;
  border-radius: var(--se-r-sm, 6px) !important;
  color: var(--se-ink-2, #64748b) !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
}

.securends .se-data-transformation-page .ReactTable .btn.btn-default.dropdown-toggle:hover {
  border-color: var(--se-brand-line, #CBD5E1) !important;
  color: var(--se-brand, #17457E) !important;
}

.securends .se-data-transformation-page .ReactTable .dropdown-menu {
  background: var(--se-card, #ffffff) !important;
  border: 1px solid var(--se-line, #E2E8F0) !important;
  border-radius: var(--se-r-md, 10px) !important;
  box-shadow: var(--se-shadow-lg) !important;
  padding: 6px 0 !important;
}

.securends .se-data-transformation-page .ReactTable .dropdown-menu > li > a {
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: var(--se-ink, #0F172A) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.securends .se-data-transformation-page .ReactTable .dropdown-menu > li > a:hover {
  background: var(--se-row-hover, #F8FAFC) !important;
  color: var(--se-brand, #17457E) !important;
}

/* Pagination bar */
.securends .se-data-transformation-page .ReactTable .-pagination {
  background: var(--se-card, #ffffff) !important;
  border-top: 1px solid var(--se-line, #E2E8F0) !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}

.securends .se-data-transformation-page .ReactTable .-pagination .-btn {
  background: var(--se-card, #ffffff) !important;
  border: 1px solid var(--se-line, #E2E8F0) !important;
  border-radius: var(--se-r-sm, 6px) !important;
  color: var(--se-ink, #0F172A) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

.securends .se-data-transformation-page .ReactTable .-pagination .-btn:hover:not(:disabled) {
  background: var(--se-row-hover, #F8FAFC) !important;
  border-color: var(--se-brand-line, #CBD5E1) !important;
  color: var(--se-brand, #17457E) !important;
}

.securends .se-data-transformation-page .ReactTable .-pagination input,
.securends .se-data-transformation-page .ReactTable .-pagination select {
  border: 1px solid var(--se-line, #E2E8F0) !important;
  border-radius: var(--se-r-sm, 6px) !important;
  padding: 4px 8px !important;
  background: var(--se-card, #ffffff) !important;
  color: var(--se-ink, #0F172A) !important;
}

/* Restore library field-editor drawer (react-form-builder2 app.css).
   Visibility only — same left:0 / top:0 / 715px panel as QA. */
.securends .se-forms-page .react-form-builder .react-form-builder-preview .edit-form,
.securends .react-form-builder .react-form-builder-preview .edit-form {
  background: #fafafa !important;
  background-color: #fafafa !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-preview.is-editing .edit-form,
.securends .react-form-builder .react-form-builder-preview.is-editing .edit-form {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 715px !important;
  max-width: 715px !important;
  z-index: 11000 !important;
  padding: 30px !important;
  overflow-y: auto !important;
  border-right: 1px solid #ddd !important;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1) !important;
}

.securends .se-forms-page .react-form-builder .react-form-builder-preview .edit-form input[type="checkbox"],
.securends .se-forms-page .react-form-builder .react-form-builder-preview .edit-form input[type="radio"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}




/*# sourceMappingURL=main-4ccea979.4af2210e.css.map*/