/* Intelligent Forms stylesheet bundle: extensions.css. Keep feature-specific rules grouped under their source banner. */

/* ==========================================================================
   SOURCE: intelligent-forms-extensions.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS - CORE UI EXTENSIONS
   Authoritative overrides for:
   - compact masthead account controls
   - notification dropdown
   - floating admin navigation
   - sortable table headers
   - KB role chips

   Load AFTER intelligent-forms.css.
   ============================================================ */

/* ============================================================
   MASTHEAD - COMPACT USER PILL
   ============================================================ */

.if-user-cluster {
  display: inline-flex !important;
  align-items: center !important;

  gap: 3px !important;

  padding: 3px !important;

  border: 1px solid rgba(4, 30, 66, 0.09) !important;
  border-radius: 999px !important;

  background: #ffffff !important;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13) !important;
}

.builder-category-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: stretch;
}

.category-manager-backdrop {
  z-index: 10000 !important;
  pointer-events: auto !important;
}

.builder-form-settings-panel-card .builder-card-preview-column {
  min-width: 0;
  align-self: stretch;
}

.builder-form-settings-panel-card {
  overflow: visible !important;
}

.builder-form-settings-panel-card .builder-card-preview-wrap {
  position: sticky !important;
  top: 40px !important;
  height: fit-content;
}

@media (max-width: 980px) {
  .builder-form-settings-panel-card .builder-card-preview-column {
    align-self: auto;
  }

  .builder-form-settings-panel-card .builder-card-preview-wrap {
    position: static !important;
  }
}

.category-manager-modal {
  display: grid;
  pointer-events: auto;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(720px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 96px));
  overflow: hidden;
  border: 1px solid var(--if-border);
  border-radius: 18px;
  background: var(--if-surface);
  box-shadow: 0 30px 90px rgba(4, 30, 66, 0.3);
}

.category-manager-header,
.category-manager-toolbar,
.category-manager-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--if-border);
}

.category-manager-header {
  grid-row: 1;
}

.category-manager-alert {
  grid-row: 2;
}

.category-manager-toolbar {
  grid-row: 3;
}

.category-manager-body {
  grid-row: 4;
}

.category-manager-footer {
  grid-row: 5;
}

.category-manager-header {
  background: linear-gradient(135deg, var(--if-surface), var(--if-surface-subtle));
}

.category-manager-header > div,
.category-manager-toolbar > div {
  display: grid;
  gap: 4px;
}

.category-manager-header h2,
.category-manager-header p {
  margin: 0;
}

.category-manager-header h2 {
  color: var(--if-primary);
}

.category-manager-header > div > p:last-child,
.category-manager-toolbar span,
.category-manager-footer > span {
  color: var(--if-text-muted);
  font-size: 0.86rem;
}

.category-manager-toolbar {
  background: var(--if-surface-subtle);
}

.category-manager-toolbar strong {
  color: var(--if-primary);
  font-size: 1.2rem;
}

.category-manager-alert {
  margin: 14px 18px 0;
}

.category-manager-body {
  min-height: 160px;
  padding: 14px 16px;
  overflow-y: auto;
}

.category-manager-editor {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--if-secondary), transparent 68%);
  border-radius: 13px;
  background: color-mix(in srgb, var(--if-secondary-soft), white 45%);
}

.category-manager-editor-heading,
.category-manager-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.category-manager-editor-heading h3,
.category-manager-editor-heading p {
  margin: 0;
}

.category-manager-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 90px;
  gap: 12px;
}

.category-manager-form-grid > label {
  display: grid;
  align-content: start;
  gap: 6px;
  color: var(--if-text-strong);
  font-size: 0.84rem;
  font-weight: 740;
}

.category-manager-description {
  grid-column: 1 / -1;
}

.category-manager-description textarea {
  min-height: 76px;
}

.category-manager-color .builder-color-input {
  width: 100%;
}

.category-manager-editor-actions {
  justify-content: flex-end;
}

.category-manager-list {
  display: grid;
  gap: 9px;
}

.category-manager-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid var(--if-border);
  border-radius: 11px;
  background: var(--if-surface);
}

.category-manager-item.is-inactive {
  opacity: 0.68;
  background: var(--if-surface-subtle);
}

.category-manager-swatch {
  width: 13px;
  height: 42px;
  border-radius: 999px;
  background: var(--category-color, var(--if-secondary));
}

.category-manager-item-copy,
.category-manager-item-copy > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.category-manager-item-copy {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.category-manager-item-copy strong {
  color: var(--if-primary);
}

.category-manager-item-copy p,
.category-manager-item-copy small {
  margin: 0;
  color: var(--if-text-muted);
  line-height: 1.4;
}

.category-manager-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 230px;
  color: var(--if-text-muted);
  text-align: center;
}

.category-manager-footer {
  border-top: 1px solid var(--if-border);
  border-bottom: 0;
}

@media (max-width: 680px) {
  .builder-category-select-row,
  .category-manager-form-grid {
    grid-template-columns: 1fr;
  }

  .category-manager-description {
    grid-column: auto;
  }

  .category-manager-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .category-manager-item > .if-btn {
    grid-column: 1 / -1;
  }

  .category-manager-footer {
    align-items: stretch;
    flex-direction: column;
  }

}

/* Masthead identity marks are logo-like, legible, and intentionally varied so
   adjacent accounts are easier to distinguish without relying on tiny text. */
.if-user-cluster,
.if-notification-center,
.if-notification-bell {
  overflow: visible !important;
}

.if-user-cluster .if-avatar {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border: 1px solid color-mix(in srgb, currentColor, transparent 78%);
  font-size: 0.875rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.if-avatar-tone-0 { background: #e8f4fa !important; color: #075f8b !important; }
.if-avatar-tone-1 { background: #eef7e8 !important; color: #356b16 !important; }
.if-avatar-tone-2 { background: #f4ecfb !important; color: #6b3a8f !important; }
.if-avatar-tone-3 { background: #fff2df !important; color: #99520b !important; }
.if-avatar-tone-4 { background: #e9f6f3 !important; color: #116b5b !important; }
.if-avatar-tone-5 { background: #fbeaec !important; color: #9b3040 !important; }

.if-user-cluster .if-notification-count {
  top: 1px !important;
  right: 1px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding-inline: 4px !important;
  border-width: 2px !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  box-sizing: border-box;
}

/* Search-first access selectors keep large user and group directories out of
   the settings page while sharing the app's global modal and table language. */
.builder-audience-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.builder-audience-selector-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--if-border);
  border-radius: 12px;
  color: var(--if-text);
  background: var(--if-surface-subtle);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.builder-audience-selector-card:hover {
  border-color: color-mix(in srgb, var(--if-secondary), transparent 45%);
  box-shadow: var(--if-shadow-card-hover);
  transform: translateY(-1px);
}

.builder-audience-selector-card > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.builder-audience-selector-card small {
  color: var(--if-text-muted);
  font-size: 0.82rem;
}

.builder-audience-selector-card b {
  color: var(--if-secondary);
  font-size: 0.82rem;
}

.builder-audience-selector-icon,
.builder-audience-result-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  color: var(--if-secondary);
  background: color-mix(in srgb, var(--if-secondary-soft), white 28%);
  font-weight: 800;
}

.builder-audience-modal-backdrop {
  z-index: 1300;
}

.builder-audience-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(680px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid var(--if-border);
  border-radius: 18px;
  background: var(--if-surface);
  box-shadow: 0 30px 90px rgba(4, 30, 66, 0.3);
}

.builder-audience-modal-header,
.builder-audience-modal-toolbar,
.builder-audience-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--if-border);
}

.builder-audience-modal-header h2,
.builder-audience-modal-header p {
  margin: 0;
}

.builder-audience-modal-header > div {
  display: grid;
  gap: 5px;
}

.builder-audience-modal-header > div > p:last-child,
.builder-audience-modal-toolbar > span,
.builder-audience-modal-footer > span {
  color: var(--if-text-muted);
  font-size: 0.85rem;
}

.builder-audience-modal-toolbar {
  background: var(--if-surface-subtle);
}

.builder-audience-modal-toolbar .if-table-search {
  flex: 1;
  max-width: none;
}

.builder-audience-modal-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 220px;
  padding: 14px 18px;
  overflow-y: auto;
}

.builder-audience-result {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--if-border);
  border-radius: 11px;
  background: var(--if-surface);
  cursor: pointer;
}

.builder-audience-result.is-selected {
  border-color: color-mix(in srgb, var(--if-secondary), transparent 50%);
  background: color-mix(in srgb, var(--if-secondary-soft), white 48%);
}

.builder-audience-result > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.builder-audience-result small {
  overflow: hidden;
  color: var(--if-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-audience-result input {
  width: 18px;
  height: 18px;
  accent-color: var(--if-secondary);
}

.builder-audience-result-avatar[style] {
  color: var(--audience-color, var(--if-secondary));
  background: color-mix(in srgb, var(--audience-color, var(--if-secondary)), transparent 88%);
}

.builder-audience-modal-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 210px;
  color: var(--if-text-muted);
  text-align: center;
}

.builder-audience-modal-footer {
  border-top: 1px solid var(--if-border);
  border-bottom: 0;
}

@media (max-width: 620px) {
  .builder-audience-selector-grid {
    grid-template-columns: 1fr;
  }

  .builder-audience-modal-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

.if-user-segment {
  min-height: 34px !important;

  gap: 7px !important;

  padding: 0 11px !important;

  border-radius: 999px !important;

  font-size: 0.875rem !important;
  font-weight: 720 !important;
}

.if-user-identity {
  padding-left: 6px !important;
}

.if-avatar {
  width: 24px !important;
  height: 24px !important;

  flex: 0 0 24px !important;

  font-size: 0.72rem !important;
}

.if-user-identity > span:last-child,
.if-user-link > span:last-child {
  display: inline-block;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.if-user-logout {
  padding-inline: 10px !important;
}

/* ============================================================
   NOTIFICATION BELL + TRUE DROPDOWN
   ============================================================ */

.if-notification-center {
  position: relative;

  flex: 0 0 auto;
}

.if-notification-center > summary {
  list-style: none;
}

.if-notification-center > summary::-webkit-details-marker {
  display: none;
}

.if-notification-bell {
  position: relative;

  width: 34px !important;
  min-width: 34px !important;

  padding: 0 !important;

  display: inline-grid !important;
  place-items: center !important;
}

.if-notification-bell-icon {
  display: block;

  color: var(--if-primary, #041e42);

  font-size: 0.76rem;
  line-height: 1;
}

.if-notification-count {
  position: absolute;
  top: -3px;
  right: -3px;

  min-width: 16px;
  height: 16px;

  display: grid;
  place-items: center;

  padding: 0 3px;

  border: 2px solid #ffffff;
  border-radius: 999px;

  background: var(--if-danger, #b42318);
  color: #ffffff;

  font-size: 0.42rem;
  font-weight: 850;
  line-height: 1;
}

/*
 * Browser <details> supplies open/close behavior.
 * The popover is removed from normal layout and hangs below the pill.
 */
.if-notification-center:not([open]) .if-notification-popover {
  display: none !important;
}

.if-notification-center[open] .if-notification-popover {
  display: flex !important;
}

.if-notification-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: -72px !important;

  z-index: 1000 !important;

  width: min(460px, calc(100vw - 28px)) !important;
  max-height: min(600px, calc(100dvh - 100px)) !important;

  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 11px;

  background: #ffffff;

  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
}

.if-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 14px 16px;

  border-bottom: 1px solid var(--if-border, #e2e8f0);

  background: #f8fafc;
}

.if-notification-header > div {
  display: grid;
  gap: 2px;
}

.if-notification-header strong {
  color: var(--if-primary, #041e42);

  font-size: 0.9rem;
  font-weight: 800;
}

.if-notification-header span {
  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem;
}

.if-notification-clear-form {
  margin: 0;
}

.if-notification-clear {
  min-height: 27px;
  padding: 5px 9px;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 7px;
  background: #ffffff;
  color: var(--if-primary, #041e42);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 750;
  cursor: pointer;
}

.if-notification-clear:hover {
  border-color: var(--if-secondary, #0a7cb4);
  color: var(--if-secondary, #0a7cb4);
}

.if-notification-list {
  overflow-y: auto;

  overscroll-behavior: contain;
}

.if-notification-item {
  position: relative;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    7px;

  gap: 9px;

  align-items: start;

  padding: 13px 15px;

  border-bottom: 1px solid #edf1f5;

  background: #ffffff;

  text-decoration: none;
}

.if-notification-item:last-child {
  border-bottom: 0;
}

.if-notification-item:hover {
  background: #f8fafc;
}

.if-notification-item-unread {
  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 96%);
}

.if-notification-type {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid #dce5ed;
  border-radius: 7px;

  background: #f8fafc;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
  font-weight: 850;
}

.if-notification-type-review {
  border-color: #bedceb;
  background: #edf8fd;
  color: #086c9c;
}

.if-notification-type-success {
  border-color: #b9e0ca;
  background: #f1fbf5;
  color: #177245;
}

.if-notification-type-warning {
  border-color: #e7d49d;
  background: #fff8e8;
  color: #805a00;
}

.if-notification-type-danger,
.if-notification-type-incident {
  border-color: #f0c7c3;
  background: #fef3f2;
  color: #b42318;
}

.if-notification-copy {
  min-width: 0;

  display: grid;

  gap: 3px;
}

.if-notification-copy strong {
  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
  font-weight: 780;
  line-height: 1.3;
}

.if-notification-copy > span {
  color: var(--if-text-strong, #475569);

  font-size: 0.875rem;
  line-height: 1.4;
}

.if-notification-copy small {
  color: var(--if-text-muted, #94a3b8);

  font-size: 0.875rem;
}

.if-notification-unread-dot {
  width: 7px;
  height: 7px;

  align-self: center;

  border-radius: 999px;

  background: var(--if-secondary, #0a7cb4);
}

.if-notification-empty {
  min-height: 170px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 24px;

  text-align: center;
}

.if-notification-empty > span {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  margin-bottom: 8px;

  border-radius: 999px;

  background: #f1fbf5;
  color: #177245;

  font-size: 0.875rem;
  font-weight: 850;
}

.if-notification-empty strong {
  color: var(--if-primary, #041e42);

  font-size: 0.875rem;
}

.if-notification-empty p {
  max-width: 250px;

  margin: 5px 0 0;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem;
  line-height: 1.45;
}

/* ============================================================
   SORTABLE TABLE HEADERS
   Inactive columns have NO glyph at all.
   ============================================================ */

.if-table-sort:not(.if-table-sort-active) > span {
  display: none !important;
}

.if-table-sort-active > span {
  display: inline-grid !important;
}

/* Keep the active chip behavior from the canonical tables. */
.if-table-sort-active {
  color: #ffffff !important;
}

@media (max-width: 850px) {
  .if-user-cluster {
    width: auto !important;
  }

  .if-user-segment {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 680px) {
  .if-notification-popover {
    position: fixed !important;
    top: 72px !important;
    right: 12px !important;
    left: 12px !important;

    width: auto !important;
  }

  .knowledge-category-role-options {
    grid-template-columns: 1fr;
  }
}
.if-notice-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--if-accent, #94f553) 22%, white);
  border-bottom: 1px solid
    color-mix(in srgb, var(--if-primary, #041e42) 18%, transparent);
  color: var(--if-primary, #041e42);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.if-notice-banner {
  color: var(--if-notice-text, #3d3400);
  background: var(--if-notice-bg, #fff4ce);
}
.if-notice-banner-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 1.5rem;
  font-size: 1.05rem;
}
.if-site-footer {
  position: static;
  flex: 0 0 auto;
  display: flex;
  justify-content: var(--if-footer-align, center);
  align-items: center;
  width: 100%;
  min-height: 54px;
  margin: auto 0 0;
  padding: 14px clamp(18px, 4vw, 56px);
  color: var(--if-footer-text, #fff);
  background: var(--if-footer-bg, #041e42);
  font-family: var(--if-footer-font, var(--if-font-body-config, inherit));
  font-weight: var(--if-footer-font-weight, 400);
  text-align: var(--if-footer-text-align, center);
}
.if-site-footer-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: inherit;
  width: min(100%, 1360px);
}
.if-site-footer-content {
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: 14px;
  width: min(100%, 1360px);
}
.if-site-footer-content span {
  max-width: 1200px;
  white-space: pre-line;
}
.if-site-footer-image {
  flex: 0 0 auto;
  max-width: 160px;
  max-height: 48px;
  object-fit: contain;
}
.if-site-footer-version {
  position: absolute;
  right: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}
.brand-footer-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--if-border);
  border-radius: 10px;
  background: var(--if-surface-subtle);
}
.brand-footer-toggle-row > div,
.brand-footer-toggle-row strong,
.brand-footer-toggle-row > div > span {
  display: grid;
  gap: 4px;
}
.brand-footer-toggle-row strong {
  color: var(--if-text-strong);
  font-size: 0.875rem;
}
.brand-footer-toggle-row > div > span {
  color: var(--if-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
}
.brand-footer-preview-shell {
  display: grid;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--if-border);
  border-radius: 12px;
  background: var(--if-surface-subtle);
}
.brand-footer-preview-shell > span {
  padding: 9px 12px 0;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  font-weight: 750;
}
.brand-footer-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 14px 20px;
}
.brand-footer-preview img {
  max-width: 130px;
  max-height: 46px;
  object-fit: contain;
}
.branding-preview-footer {
  gap: 4px;
}
.branding-preview-footer > span {
  padding: 6px 10px 0;
}
.branding-preview-footer .brand-footer-preview {
  min-height: 38px;
  gap: 7px;
  padding: 6px 10px;
  font-size: 0.875rem;
}
.branding-preview-footer .brand-footer-preview img {
  max-width: 70px;
  max-height: 25px;
}
.branding-preview-footer-disabled {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  font-weight: 650;
}
.brand-footer-image-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--if-border);
  border-radius: 10px;
  background: var(--if-surface-subtle);
}
.brand-footer-image-editor .brand-field {
  flex: 1 1 260px;
}
.brand-footer-image-editor img {
  max-width: 120px;
  max-height: 54px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .if-site-footer-content,
  .brand-footer-preview {
    align-items: flex-start;
    flex-direction: column;
  }
  .if-site-footer-image {
    max-width: 120px;
  }
}
@media print {
  .if-site-footer,
  .if-notice-banner {
    display: none !important;
  }
}

/* Categories own the colored pill treatment for forms. */
.if-category-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--category-color, #0a7cb4), white 50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--category-color, #0a7cb4), white 88%);
  color: color-mix(in srgb, var(--category-color, #0a7cb4), black 28%);
  font-size: 0.875rem;
  font-weight: 760;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Groups are shown as plain names, never as pills. */
.if-group-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--if-text-strong);
  font-weight: 650;
}

.if-group-name-icon {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* ==========================================================================
   SOURCE: form-builder-extensions.css
   ========================================================================== */
/* ============================================================
   INTELLIGENT FORMS - FORM SETTINGS MODAL POLISH
   ============================================================ */

/* ============================================================
   MODAL SHELL
   ============================================================ */

.builder-form-settings-modal {
  width: min(980px, calc(100vw - 48px)) !important;
  height: min(88dvh, 940px) !important;
  max-height: min(88dvh, 940px) !important;

  border-radius: 14px !important;
}

.builder-form-settings-modal-header {
  padding: 20px 24px 18px !important;
}

.builder-form-settings-modal-header h2 {
  margin: 3px 0 0 !important;

  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.builder-form-settings-modal-header p:last-child {
  max-width: 700px;

  margin: 6px 0 0 !important;

  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ============================================================
   TABS
   ============================================================ */

.builder-form-settings-tabs {
  flex: 0 0 auto;

  display: flex !important;
  align-items: stretch !important;

  gap: 0 !important;

  overflow-x: auto;

  border-bottom: 1px solid var(--if-border, #dce5ed);

  background: #ffffff;
}

.builder-form-settings-tabs > button {
  min-height: 43px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 0 16px !important;

  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: var(--if-text-muted, #64748b) !important;

  font: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 760 !important;

  white-space: nowrap;

  cursor: pointer;
}

.builder-form-settings-tabs > button:hover {
  background: var(--if-surface-subtle, #f8fafc) !important;

  color: var(--if-primary, #041e42) !important;
}

.builder-form-settings-tabs > button[aria-selected="true"] {
  border-bottom-color: var(--if-secondary, #0a7cb4) !important;

  background: color-mix(
    in srgb,
    var(--if-secondary, #0a7cb4),
    white 97%
  ) !important;

  color: var(--if-primary, #041e42) !important;
}

/* ============================================================
   BODY
   ============================================================ */

.builder-form-settings-modal-body {
  background: #f7f9fb !important;
}

.builder-form-settings-modal-body > div > .builder-properties-body,
.builder-form-settings-modal-body .builder-properties-body {
  width: 100%;

  box-sizing: border-box;

  padding: 20px 22px 26px !important;
}

.builder-form-settings-tab-panel {
  width: 100%;
}

/* ============================================================
   TAB HEADING
   ============================================================ */

.builder-form-settings-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  margin: 0 0 14px !important;
  padding: 0 2px;
}

.builder-form-settings-panel-heading h3 {
  margin: 3px 0 0 !important;

  color: var(--if-primary, #041e42);

  font-size: 0.875rem !important;
  font-weight: 780 !important;
  line-height: 1.25;
}

.builder-form-settings-panel-heading p:last-child {
  max-width: 720px;

  margin: 5px 0 0 !important;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ============================================================
   SECTION CARDS
   ============================================================ */

.builder-form-settings-modal-body .builder-settings-section {
  width: 100%;

  box-sizing: border-box;

  margin: 0 0 14px !important;
  padding: 16px !important;

  border: 1px solid var(--if-border, #dce5ed) !important;
  border-radius: 10px !important;

  background: #ffffff !important;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.builder-form-settings-modal-body .builder-settings-section-flat {
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.builder-form-settings-modal-body .builder-settings-section-title {
  margin: 0 0 11px !important;

  color: var(--if-primary, #041e42) !important;

  font-size: 0.875rem !important;
  font-weight: 800 !important;
  line-height: 1.3;
}

.builder-form-settings-modal-body .builder-settings-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 12px;
}

.builder-form-settings-modal-body .builder-settings-subsection {
  margin-top: 13px;
  padding-top: 13px;

  border-top: 1px solid #edf1f5;
}

.builder-form-settings-modal-body .builder-settings-subsection-title {
  margin: 0 0 9px;

  color: var(--if-text-strong, #334155);

  font-size: 0.875rem !important;
  font-weight: 780 !important;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */

.builder-form-settings-modal-body .builder-property-field {
  min-width: 0;

  display: grid;

  grid-template-rows:
    auto
    minmax(36px, auto)
    auto;

  align-content: start;

  gap: 5px;
}

.builder-form-settings-modal-body .builder-property-field > label {
  min-height: 16px;

  display: flex;
  align-items: flex-end;

  margin: 0 !important;

  color: var(--if-text-strong, #334155) !important;

  font-size: 0.875rem !important;
  font-weight: 760 !important;
  line-height: 1.25;
}

.builder-form-settings-modal-body .builder-property-help {
  margin: 1px 0 0 !important;

  color: var(--if-text-muted, #64748b) !important;

  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

.builder-form-settings-modal-body .builder-property-input,
.builder-form-settings-modal-body
  input:not([type="checkbox"]):not([type="radio"]),
.builder-form-settings-modal-body select {
  width: 100% !important;
  max-width: none !important;
  min-height: 37px !important;

  box-sizing: border-box;

  font-size: 0.875rem !important;
}

.builder-form-settings-modal-body .builder-property-textarea,
.builder-form-settings-modal-body textarea {
  width: 100% !important;
  max-width: none !important;
  min-height: 88px;

  box-sizing: border-box;

  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

.builder-form-settings-modal-body .builder-property-readonly {
  min-height: 37px;

  display: flex;
  align-items: center;

  padding: 0 11px;

  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 7px;

  background: var(--if-surface-subtle, #f8fafc);

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem;
}

/* ============================================================
   CONSISTENT TWO-COLUMN LAYOUT
   ============================================================ */

.builder-form-settings-modal-body .builder-notification-rule-grid,
.builder-form-settings-modal-body .builder-workflow-target-action {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;

  align-items: start !important;
}

/* ============================================================
   NOTIFICATION RULES
   ============================================================ */

.builder-form-settings-modal-body .builder-notification-rule-list {
  display: grid;

  gap: 11px;
}

.builder-form-settings-modal-body .builder-notification-rule {
  overflow: hidden;

  border: 1px solid var(--if-border, #dce5ed) !important;
  border-radius: 9px !important;

  background: #ffffff !important;
}

.builder-form-settings-modal-body .builder-notification-rule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 11px 13px !important;

  border-bottom: 1px solid #edf1f5;

  background: #fafbfc;
}

.builder-form-settings-modal-body .builder-notification-rule-header strong {
  color: var(--if-primary, #041e42);

  font-size: 0.875rem !important;
  font-weight: 780 !important;
}

/*
 * The legacy builder-toggle-row is still used elsewhere. Inside the
 * Form Settings modal, normalize it so it does not inherit odd compact
 * right-panel spacing.
 */
.builder-form-settings-modal-body .builder-toggle-row {
  width: 100%;

  box-sizing: border-box;

  margin: 0 !important;
  padding: 11px 12px !important;

  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 9px;

  background: var(--if-surface-subtle, #f8fafc);

  font-size: 0.875rem !important;
}

.builder-form-settings-modal-body .builder-notification-rule-note {
  margin-top: 9px;
  padding: 9px 10px;

  border-radius: 7px;

  background: #f8fafc;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

/* ============================================================
   PLACEHOLDERS
   ============================================================ */

.builder-form-settings-modal-body .builder-settings-placeholder {
  padding: 18px !important;

  border: 1px dashed var(--if-border, #dce5ed);
  border-radius: 9px;

  background: #fafbfc;

  text-align: center;
}

.builder-form-settings-modal-body .builder-settings-placeholder-title {
  color: var(--if-primary, #041e42);

  font-size: 0.875rem !important;
  font-weight: 780 !important;
}

.builder-form-settings-modal-body .builder-settings-placeholder p {
  max-width: 540px;

  margin: 5px auto 0 !important;

  color: var(--if-text-muted, #64748b);

  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.builder-form-settings-modal-footer {
  min-height: 62px;

  padding: 12px 22px !important;
}

.builder-form-settings-modal-footer > span {
  max-width: 620px;

  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}

.builder-form-settings-modal-actions {
  display: inline-flex;
  align-items: center;

  gap: 8px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {
  .builder-form-settings-modal {
    width: calc(100vw - 24px) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .builder-form-settings-modal-body .builder-notification-rule-grid,
  .builder-form-settings-modal-body .builder-workflow-target-action {
    grid-template-columns: 1fr !important;
  }

  .builder-form-settings-tabs > button {
    padding: 0 12px !important;
  }

  .builder-form-settings-modal-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

}

/* ============================================================
   FORM BUILDER -HISTORY + PUBLISH READY
   These rules intentionally come last and are authoritative.
   ============================================================ */

.form-builder-header-actions {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: nowrap;
}

.builder-history-actions {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  flex: 0 0 auto;
}

.form-builder-header-actions .builder-history-button {
  min-height: 34px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 0 10px;

  white-space: nowrap;
}

.form-builder-header-actions .builder-history-button > span {
  font-size: 0.875rem;
  line-height: 1;
}

.form-builder-header-actions .builder-history-button:disabled {
  opacity: 0.42;

  cursor: not-allowed;
}

/*
 * High specificity + !important is intentional here.
 *
 * The global .if-btn and .if-btn-primary rules are used throughout the
 * application and may load after individual Builder rules depending on
 * App.razor order. Publish-ready must always be visually green.
 */
.form-builder-shell
  .form-builder-header
  .form-builder-header-actions
  button.builder-publish-ready-button {
  border: 1px solid #177245 !important;

  background: #177245 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(23, 114, 69, 0.2) !important;
}

.form-builder-shell
  .form-builder-header
  .form-builder-header-actions
  button.builder-publish-ready-button:hover:not(:disabled) {
  border-color: #12603a !important;

  background: #12603a !important;

  color: #ffffff !important;
}

.form-builder-shell
  .form-builder-header
  .form-builder-header-actions
  button.builder-publish-ready-button:focus-visible {
  outline: 2px solid #177245 !important;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .builder-history-actions {
    width: 100%;

    justify-content: flex-end;
  }

  .builder-form-settings-modal-body .builder-workflow-target-action {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FORM BUILDER -AUTHORITATIVE EXTENSIONS
   This file also owns Database Lookup styling inside Form Builder.
   ============================================================ */

/* Preview shell */
.form-builder-canvas .builder-form-preview {
  overflow: hidden !important;

  border: 1px solid var(--if-border, #dce5ed) !important;
  border-radius: 14px !important;

  background: #ffffff !important;

  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.055) !important;
}

.form-builder-canvas .builder-form-preview-header {
  overflow: hidden;

  border-radius: 14px 14px 0 0 !important;
}

/* Every form element remains visually bounded. */
.form-builder-canvas .builder-canvas-field {
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;

  background: #ffffff !important;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025) !important;
}

.form-builder-canvas .builder-canvas-field:hover {
  border-color: #c2ceda !important;
}

.form-builder-canvas .builder-canvas-field.selected {
  border-color: var(--if-secondary, #0a7cb4) !important;

  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--if-secondary, #0a7cb4), transparent 84%) !important;
}

.form-builder-canvas .builder-preview-input,
.form-builder-canvas .builder-preview-textarea,
.form-builder-canvas .builder-preview-select,
.form-builder-canvas select.builder-preview-input {
  border: 1px solid #cbd5e1 !important;

  background: #fafbfc !important;
}

.form-builder-canvas .builder-preview-input:disabled,
.form-builder-canvas .builder-preview-textarea:disabled,
.form-builder-canvas select:disabled {
  opacity: 1 !important;

  color: #64748b !important;

  -webkit-text-fill-color: #64748b;
}

/* ============================================================
   DATABASE LOOKUP -PALETTE / PREVIEW
   ============================================================ */

.builder-field-button .builder-field-icon {
  transition:
    border-color 130ms ease,
    background-color 130ms ease,
    color 130ms ease;
}

.builder-field-button:hover .builder-field-icon {
  border-color: color-mix(
    in srgb,
    var(--if-secondary, #0a7cb4),
    transparent 55%
  );

  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 95%);
}

.form-builder-canvas .builder-preview-database-lookup {
  width: 100%;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  gap: 8px;

  align-items: center;

  box-sizing: border-box;

  min-height: 40px;

  padding: 5px 6px 5px 11px !important;

  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;

  background: #fafbfc !important;

  color: #64748b;

  font-size: 0.875rem !important;
}

.form-builder-canvas .builder-preview-database-lookup > span {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-builder-canvas .builder-preview-database-lookup > button {
  min-width: 62px;
  min-height: 29px;

  padding: 0 10px !important;

  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;

  background: #ffffff !important;

  color: #475569 !important;

  font: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 750 !important;

  opacity: 1 !important;
}

/* ============================================================
   DATABASE LOOKUP -FIELD SETTINGS
   ============================================================ */

.builder-settings-section .builder-database-column-list {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;

  max-height: 210px;

  padding: 8px;

  overflow-y: auto;

  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 8px;

  background: #f8fafc;
}

.builder-database-configuration-warning {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #e8b4ae;
  border-left: 4px solid var(--if-danger, #b42318);
  border-radius: 8px;
  background: #fff7f6;
  color: #7f1d1d;
  font-size: 0.8rem;
  line-height: 1.4;
}

.builder-database-configuration-warning strong {
  color: #991b1b;
  font-weight: 800;
}

.builder-settings-section .builder-database-column-option {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;

  min-height: 34px;

  padding: 6px 8px;

  border: 1px solid #e7ecf1;
  border-radius: 6px;

  background: #ffffff;

  color: var(--if-text-strong, #334155);

  font-size: 0.875rem;
  font-weight: 680;

  cursor: pointer;
}

.builder-settings-section .builder-database-column-option:hover {
  border-color: color-mix(
    in srgb,
    var(--if-secondary, #0a7cb4),
    transparent 55%
  );

  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 97%);
}

.builder-settings-section .builder-database-column-option input {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  margin: 0;

  accent-color: var(--if-secondary, #0a7cb4);
}

/* ============================================================
   DATABASE LOOKUP -PUBLISHED FORM
   ============================================================ */

.published-database-lookup {
  width: 100%;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  gap: 8px;

  align-items: stretch;
}

.published-database-lookup-value {
  min-width: 0;
  min-height: 42px;

  display: flex;
  align-items: center;

  box-sizing: border-box;

  padding: 9px 12px !important;

  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;

  background: #ffffff !important;

  color: #334155 !important;

  font-size: 0.875rem !important;
  line-height: 1.4;
}

.published-database-lookup-empty-value {
  color: #64748b !important;

  font-style: italic;
}

.published-database-lookup-actions {
  display: inline-flex !important;
  align-items: stretch;

  gap: 6px;
}

.published-database-lookup-actions .if-btn {
  min-height: 42px;
}

.published-database-lookup-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: end;
  min-height: 42px;
}

.published-database-lookup-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--if-secondary, #0a7cb4), transparent 72%);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--if-secondary, #0a7cb4), white 95%), var(--if-surface, #fff));
}

.published-database-lookup-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--if-secondary, #0a7cb4), white 88%);
  color: var(--if-secondary, #0a7cb4);
}

.published-database-lookup-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.published-database-lookup-prompt {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.published-database-lookup-prompt strong {
  color: var(--if-text-strong, #1e293b);
  font-size: 0.94rem;
}

.published-database-lookup-prompt span {
  color: var(--if-text-muted, #64748b);
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .published-database-lookup-empty {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .published-database-lookup-icon {
    width: 42px;
    height: 42px;
  }

  .published-database-lookup-search {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }
}

/* ============================================================
   DATABASE LOOKUP -RESULT MODAL
   ============================================================ */

.database-lookup-backdrop {
  position: fixed;
  inset: 0;

  z-index: 5000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: color-mix(in srgb, var(--if-primary), transparent 48%);

  backdrop-filter: blur(2px);
}

.database-lookup-modal {
  width: min(940px, calc(100vw - 40px));
  height: min(680px, calc(var(--if-ui-viewport-height, 100dvh) - 40px));
  max-height: calc(var(--if-ui-viewport-height, 100dvh) - 40px);
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);

  background: var(--if-surface);

  box-shadow: 0 26px 75px color-mix(in srgb, var(--if-primary), transparent 73%);
}

.database-lookup-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding: 20px 22px;

  border-bottom: 1px solid var(--if-border);
  background: linear-gradient(
    135deg,
    var(--if-brand-soft),
    var(--if-surface) 72%
  );
}

.database-lookup-modal-header h2 {
  margin: 2px 0 0;

  color: var(--if-primary);

  font-size: 1.05rem;
  font-weight: 780;
}

.database-lookup-modal-header p:last-child {
  margin: 4px 0 0;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  line-height: 1.45;
}

.database-lookup-close {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  flex: 0 0 32px;

  min-height: 32px;
  padding: 0;
  font-size: 1rem;
}

.database-lookup-search {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 8px;

  padding: 13px 20px;

  border-bottom: 1px solid var(--if-border);

  background: var(--if-surface-subtle);
}

.database-lookup-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.database-lookup-table-wrapper {
  min-width: 0;
  overflow: visible;
}

.database-lookup-empty {
  padding: 42px 20px;

  color: var(--if-text-muted);

  font-size: 0.875rem;
  text-align: center;
}

.database-lookup-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.875rem;
}

.database-lookup-table th,
.database-lookup-table td {
  padding: 10px 12px;

  border-bottom: 1px solid var(--if-border);

  text-align: left;
  vertical-align: middle;
}

.database-lookup-table th {
  position: sticky;
  top: 0;

  z-index: 1;

  background: var(--if-surface-subtle);

  color: var(--if-text-muted);

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.database-lookup-table .database-lookup-primary-column {
  background: color-mix(in srgb, var(--if-secondary), white 92%);
  color: var(--if-primary);
}

.database-lookup-table td.database-lookup-primary-column {
  border-inline-start: 3px solid var(--if-secondary);
  font-size: 0.925rem;
}

.database-lookup-primary-badge {
  display: inline-flex;
  margin-inline-start: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--if-secondary);
  color: var(--if-surface);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.database-lookup-table tbody tr {
  transition: background-color var(--if-transition-fast);
}

.database-lookup-table tbody tr:hover {
  background: var(--if-secondary-soft);
}

/* ============================================================
   PUBLISH READY + HISTORY
   ============================================================ */

.form-builder-header-actions button.builder-publish-ready-button {
  border-color: #177245 !important;

  background: #177245 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(23, 114, 69, 0.2) !important;
}

.form-builder-header-actions
  button.builder-publish-ready-button:hover:not(:disabled) {
  border-color: #12603a !important;

  background: #12603a !important;
}

.builder-history-actions {
  display: inline-flex;
  align-items: center;

  gap: 5px;
}

.builder-history-button {
  min-height: 34px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 0 10px;

  white-space: nowrap;
}

@media (max-width: 760px) {
  .builder-settings-section .builder-database-column-list {
    grid-template-columns: 1fr;
  }

  .published-database-lookup,
  .database-lookup-search {
    grid-template-columns: 1fr !important;
  }

  .published-database-lookup-actions {
    width: 100%;
  }

  .published-database-lookup-actions .if-btn {
    flex: 1 1 0;
  }
}
/* ============================================================
   SCALE-AWARE MODAL VIEWPORT

   Fixed elements inside the user-scaled application shell otherwise
   use the browser's unscaled vw/vh dimensions and are enlarged beyond
   the visible screen. Keep every overlay within the effective viewport.
   ============================================================ */

div[class*="modal-backdrop"],
.submissions-export-backdrop,
.database-lookup-backdrop {
  inset: 0 auto auto 0 !important;

  width: var(--if-ui-viewport-width, 100vw) !important;
  height: var(--if-ui-viewport-height, 100dvh) !important;
  max-width: var(--if-ui-viewport-width, 100vw) !important;
  max-height: var(--if-ui-viewport-height, 100dvh) !important;

  overflow: auto !important;
  overscroll-behavior: contain;
}

.builder-publish-modal,
.builder-form-settings-modal,
.group-modal,
.group-member-modal,
.submission-status-modal,
.submissions-action-modal,
.forms-delete-modal,
.forms-import-modal,
.builder-delete-form-modal,
.user-delete-modal,
.group-delete-modal,
.ai-modal,
.knowledge-modal,
.notification-confirm-modal,
.notification-preview-modal,
.notification-delivery-modal,
.email-editor-modal,
.email-delete-modal,
.email-test-modal,
.webhook-editor-modal,
.webhook-delete-modal,
.database-lookup-modal {
  max-width: calc(var(--if-ui-viewport-width, 100vw) - 32px) !important;
  max-height: calc(var(--if-ui-viewport-height, 100dvh) - 32px) !important;
}

.builder-publish-modal,
.group-modal:not(.group-member-modal),
.submission-status-modal,
.submissions-action-modal,
.forms-delete-modal,
.forms-import-modal,
.builder-delete-form-modal,
.user-delete-modal,
.group-delete-modal,
.ai-modal,
.knowledge-modal,
.notification-confirm-modal,
.notification-preview-modal,
.notification-delivery-modal,
.email-editor-modal,
.email-delete-modal,
.email-test-modal,
.webhook-editor-modal,
.webhook-delete-modal {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.database-lookup-modal {
  overflow: hidden !important;
}
.builder-content-color-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.builder-content-color-row input[type="color"] {
  width: 46px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--if-border-strong, #cbd5e1);
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
}
.builder-card-settings-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(480px, 1.28fr);
  gap: 22px;
  align-items: start;
}
.builder-card-settings-controls {
  display: grid;
  gap: 16px;
}
.builder-color-input {
  width: 100%;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control);
  background: var(--if-surface);
  cursor: pointer;
}
.builder-color-input:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.builder-card-preview-wrap {
  position: sticky;
  top: 62px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
  background: var(--if-surface-subtle);
}
.builder-card-preview {
  width: 100%;
  min-height: 300px;
}

.builder-card-preview:hover {
  border-color: var(--if-border);
  box-shadow: var(--if-shadow-card);
  transform: none;
}
@media (max-width: 980px) {
  .builder-card-settings-layout {
    grid-template-columns: 1fr;
  }
  .builder-card-preview-wrap {
    position: static;
  }
}
/* Dedicated form settings workspace. */
.form-settings-page {
  width: min(calc(100% - 32px), 1540px);
  margin: 0 auto;
  padding-block: 1.5rem 3rem;
}

/* ============================================================
   FORM BUILDER -COMPACT ACTION HEADER
   ============================================================ */

.form-builder-header {
  min-height: 62px;
  gap: 16px;
  padding: 8px 22px;
}

.form-builder-heading {
  gap: 10px;
}

.form-builder-heading .if-eyebrow {
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.1;
}

.form-builder-heading h1 {
  margin-top: 0;
  font-size: 0.96rem;
  line-height: 1.15;
}

.form-builder-version {
  margin-top: 1px;
  font-size: 0.875rem;
  line-height: 1.15;
}

.form-builder-back {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 0.875rem;
}

.form-builder-header-actions {
  gap: 6px;
}

.form-builder-header-actions .if-btn,
.form-builder-header-actions .builder-history-button {
  min-width: 0;
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.875rem;
}

.form-builder-header-actions .builder-history-actions {
  gap: 3px;
  margin-right: 2px;
  padding-right: 6px;
}

.form-builder-header-actions .builder-header-menu-trigger {
  width: 44px;
  height: 44px;
  min-height: 44px;
}

.form-settings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.form-settings-page-header h1,
.form-settings-page-header p {
  margin-bottom: 0.35rem;
}

.form-settings-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.form-settings-workspace {
  display: grid;
  grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.form-settings-page-content {
  min-width: 0;
  max-height: calc(var(--if-ui-viewport-height, 100dvh) - 280px);
  padding: 1rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
  background: var(--if-surface);
  box-shadow: var(--if-shadow-card);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.form-settings-page-content .builder-form-settings-content {
  max-height: none;
  overflow: visible;
}

@media (max-width: 900px) {
  .form-settings-page-header {
    display: grid;
  }

  .form-settings-workspace {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   FORM SETTINGS -APPLICATION-ALIGNED WORKSPACE
   ============================================================ */

.form-settings-page {
  width: min(calc(100% - 48px), 1440px);
  padding-top: 30px;
}

.form-settings-page-header {
  padding: 0 2px 20px;
  border-bottom: 1px solid var(--if-border);
}

.form-settings-page-header > div:first-child {
  max-width: 820px;
}
.form-settings-page-header > div:first-child > p:last-child {
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.form-settings-page-actions {
  align-items: center;
}

.form-settings-page-content {
  border-color: var(--if-border);
  border-radius: var(--if-radius-card, 14px);
  background: var(--if-surface, #fff);
  box-shadow: var(--if-shadow-card);
  margin-bottom: 1.5rem;
  max-height: calc(var(--if-ui-viewport-height, 100dvh) - 304px);
}

.form-settings-page-content .builder-form-settings-tab-panel {
  padding: 26px;
}
.form-settings-page-content .builder-form-settings-panel-heading {
  margin: -26px -26px 24px;
  padding: 22px 26px;
  align-items: center;
  border-bottom: 1px solid var(--if-border);
  background: linear-gradient(
    180deg,
    #fff 0%,
    var(--if-surface-subtle, #f8fafc) 100%
  );
}

.form-settings-page-content .builder-form-settings-panel-heading h3 {
  margin: 3px 0 0;
  color: var(--if-primary);
  font-size: 0.9rem;
  font-weight: 760;
}

.form-settings-page-content .builder-form-settings-panel-heading p:last-child {
  max-width: 760px;
  margin-top: 5px;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-settings-page-content .builder-settings-section {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--if-border);
  border-radius: 11px;
  background: var(--if-surface);
}

.form-settings-page-content .builder-property-field > label,
.workflow-modal-section label,
.workflow-recipient-card label {
  color: var(--if-text-strong);
  font-size: 0.875rem;
  font-weight: 740;
  line-height: 1.35;
}

.form-settings-page-content .builder-property-input,
.form-settings-page-content .builder-property-textarea,
.workflow-step-modal .builder-property-input,
.workflow-step-modal .builder-property-textarea {
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-control, 8px);
  background: #fff;
  color: var(--if-text);
  font-family: var(--if-font-body-config, inherit);
  font-size: 0.875rem;
}

.form-settings-page-content .builder-property-textarea,
.workflow-step-modal .builder-property-textarea {
  min-height: 96px;
  resize: vertical;
}

.ordered-workflow-editor {
  gap: 16px;
  margin: 0;
}
.ordered-workflow-editor > .builder-form-settings-panel-heading {
  margin-bottom: 0;
}

.ordered-workflow-add-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  width: min(100%, 520px);
}

.workflow-add-button {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--if-secondary), white 66%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--if-secondary-soft), white 40%);
  color: var(--if-primary);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.workflow-add-button:hover {
  border-color: var(--if-secondary);
  box-shadow: 0 5px 15px rgba(4, 30, 66, 0.09);
  transform: translateY(-1px);
}

.workflow-add-button > span:last-child,
.workflow-add-button strong,
.workflow-add-button small {
  display: grid;
  gap: 2px;
}
.workflow-add-button strong {
  font-size: 0.875rem;
  font-weight: 780;
}
.workflow-add-button small {
  color: var(--if-text-muted);
  font-family: var(--if-font-body-config, inherit);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}
.workflow-add-button-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--if-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.workflow-add-button-docusign {
  border-color: #bfd8f2;
  background: #f4f8fd;
}
.workflow-add-button-docusign .workflow-add-button-icon {
  background: #1769aa;
}

.ordered-workflow-empty {
  padding: 26px;
  border: 1px dashed var(--if-border-strong);
  border-radius: 11px;
  background: var(--if-surface-subtle);
  font-size: 0.875rem;
}

.ordered-workflow-step {
  padding: 14px 16px !important;
  border-radius: 10px !important;
  background: #fff;
  box-shadow: var(--if-shadow-card) !important;
}
.ordered-workflow-summary strong {
  color: var(--if-primary);
  font-size: 0.875rem;
}
.ordered-workflow-summary span {
  font-size: 0.875rem;
}
.ordered-workflow-summary small {
  margin-top: 3px;
  font-size: 0.875rem;
}
.ordered-workflow-actions {
  align-items: center;
  justify-content: flex-end;
}
.ordered-workflow-actions > button {
  cursor: pointer;
}
.ordered-workflow-actions > button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.workflow-step-modal {
  width: min(calc(100vw - 36px), 1060px);
  max-height: min(calc(100dvh - 36px), 900px);
  border: 1px solid color-mix(in srgb, var(--if-primary), transparent 82%);
  border-radius: 14px;
  background: #f7f9fb;
  box-shadow: 0 28px 80px rgba(4, 20, 42, 0.32);
}

.workflow-step-modal-header {
  min-height: 78px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--if-border);
  background: #fff;
}
.workflow-step-modal-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.workflow-step-modal-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--if-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}
.workflow-step-modal.is-docusign .workflow-step-modal-icon {
  background: #1769aa;
}
.workflow-step-modal-heading h2 {
  color: var(--if-primary);
  font-size: 0.92rem;
  font-weight: 780;
}
.workflow-step-modal-heading p:last-child {
  margin-top: 4px;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}
.workflow-step-modal-header > button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--if-text-muted);
  cursor: pointer;
}
.workflow-step-modal-header > button:hover {
  background: var(--if-surface-subtle);
  color: var(--if-primary);
}

.workflow-step-modal-body {
  gap: 14px;
  padding: 18px 20px 24px;
}
.workflow-modal-section {
  gap: 14px;
  padding: 18px;
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--if-shadow-card);
}
.workflow-modal-section > h3,
.workflow-modal-section-heading h3 {
  color: var(--if-primary);
  font-size: 0.875rem;
  font-weight: 780;
}
.workflow-modal-section-heading p {
  margin-top: 4px;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}
.workflow-modal-grid {
  gap: 14px;
}
.workflow-recipient-card {
  padding: 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}
.workflow-recipient-remove {
  min-width: 44px;
  padding-inline: 12px;
  font-size: 0.875rem;
  font-weight: 740;
  cursor: pointer;
}
.workflow-recipient-remove:hover {
  color: #fff;
  background: var(--if-danger, #b42318);
}
.workflow-step-modal .builder-toggle-row {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--if-border);
  border-radius: 8px;
  background: var(--if-surface-subtle);
}
.workflow-step-modal-footer {
  padding: 13px 20px;
  border-top: 1px solid var(--if-border);
  background: #fff;
  box-shadow: 0 -5px 15px rgba(4, 30, 66, 0.035);
}

@media (max-width: 900px) {
  .form-settings-page {
    width: min(calc(100% - 24px), 1440px);
  }
  .form-settings-page-content .builder-form-settings-tab-panel {
    padding: 18px;
  }
  .form-settings-page-content .builder-form-settings-panel-heading {
    margin: -18px -18px 18px;
    padding: 18px;
  }
  .ordered-workflow-add-actions {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .form-settings-page {
    width: min(calc(100% - 16px), 1440px);
    padding-top: 18px;
  }
  .ordered-workflow-add-actions {
    grid-template-columns: 1fr;
  }
  .workflow-step-modal-heading {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .workflow-step-modal-icon {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================
   LARGE-TEXT AND REFLOW SAFETY

   Builder actions and settings controls grow with their labels.
   Icon-only controls retain a square target while text controls
   wrap instead of overflowing their panels.
   ============================================================ */

.form-builder-header {
  height: auto;
  flex-wrap: wrap;
}

.form-builder-heading,
.form-builder-heading > div,
.form-builder-header-actions {
  min-width: 0;
}

.form-builder-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.form-builder-header-actions .if-btn,
.form-builder-header-actions .builder-history-button,
.builder-form-settings-tabs > button,
.builder-form-settings-modal-actions .if-btn,
.builder-header-menu-item,
.workflow-add-button,
.workflow-recipient-remove {
  height: auto;
  min-height: 44px;
  padding-block: 0.625rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.builder-field-button,
.builder-flow-field-option,
.builder-notification-rule-header,
.builder-toggle-row,
.workflow-toggle-row {
  height: auto;
  min-height: 44px;
  line-height: 1.35;
}

.builder-field-button,
.builder-flow-field-option,
.builder-notification-rule-header,
.builder-toggle-row,
.workflow-toggle-row,
.builder-property-field,
.builder-condition-card,
.workflow-condition-card {
  min-width: 0;
}

.builder-field-button,
.builder-flow-field-option {
  white-space: normal;
  overflow-wrap: anywhere;
}

.builder-canvas-field-toolbar {
  min-height: 44px;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.builder-field-actions button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

@media (max-width: 1100px) {
  .form-builder-header {
    align-items: flex-start;
  }

  .form-builder-header-actions {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .form-builder-header {
    padding-inline: 1rem;
  }

  .form-builder-heading {
    width: 100%;
  }

  .form-builder-header-actions,
  .builder-history-actions {
    justify-content: stretch;
  }

  .form-builder-header-actions > :not(.builder-header-menu),
  .builder-history-actions,
  .builder-history-actions > * {
    flex: 1 1 10rem;
  }

  .builder-form-settings-modal-actions {
    align-items: stretch !important;
  }

  .builder-form-settings-modal-actions .if-btn {
    width: 100%;
  }
}

.builder-database-friendly-names {
  min-width: 0;
  padding: 0.875rem;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 0.625rem;
  background: var(--if-surface-subtle, #f8fafc);
}

.builder-database-friendly-name-heading {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.builder-database-friendly-name-heading strong {
  color: var(--if-primary, #041e42);
  font-size: 0.875rem;
  line-height: 1.35;
}

.builder-database-friendly-name-heading span {
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.builder-database-friendly-name-list {
  min-width: 0;
  display: grid;
  gap: 0.625rem;
}

.builder-database-friendly-name-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 0.5rem;
  background: var(--if-surface, #fff);
}

.builder-database-friendly-name-source,
.builder-database-friendly-name-editor {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.builder-database-friendly-name-source > span,
.builder-database-friendly-name-editor > span {
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.35;
}

.builder-database-friendly-name-source strong {
  min-width: 0;
  color: var(--if-text-strong, #334155);
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.builder-database-friendly-name-editor .builder-property-input {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.builder-database-friendly-names > .builder-property-help {
  margin: 0;
}

@media (max-width: 420px) {
  .form-builder-canvas,
  .builder-canvas-fields,
  .builder-form-preview-header {
    padding-inline: 1rem !important;
  }

  .builder-canvas-field-toolbar {
    align-items: flex-start;
  }

  .builder-field-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* The workflow is a full settings panel, not a modal card nested inside one. */
.form-settings-page-content .ordered-workflow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--if-border);
}

.form-settings-page-content .ordered-workflow-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.form-settings-page-content .ordered-workflow-toolbar > div:first-child strong {
  color: var(--if-text-strong);
  font-size: 0.875rem;
}

.form-settings-page-content .ordered-workflow-toolbar > div:first-child span {
  color: var(--if-text-muted);
  font-size: 0.875rem;
}

.form-settings-page-content .ordered-workflow-add-actions {
  flex: 0 1 500px;
  justify-content: flex-end;
}

.form-settings-page-content .workflow-add-button {
  flex: 1 1 210px;
  padding: 8px 10px;
  box-shadow: none;
}

.form-settings-page-content .ordered-workflow-list,
.form-settings-page-content .ordered-workflow-empty {
  margin: 16px 20px 20px;
}

.form-settings-page-content .ordered-workflow-step {
  min-height: 62px;
  padding: 11px 13px !important;
}

.form-settings-page-content .ordered-workflow-actions {
  flex-wrap: nowrap;
}

.form-settings-page-content
  .ordered-workflow-actions
  .builder-small-button:last-child {
  color: var(--if-danger);
}

@media (max-width: 820px) {
  .form-settings-page-content .ordered-workflow-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .form-settings-page-content .ordered-workflow-add-actions {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 620px) {
  .form-settings-page-content .ordered-workflow-toolbar {
    padding: 14px;
  }

  .form-settings-page-content .ordered-workflow-list,
  .form-settings-page-content .ordered-workflow-empty {
    margin: 14px;
  }

  .form-settings-page-content .ordered-workflow-actions {
    flex-wrap: wrap;
  }
}

/* Dedicated settings page aligned with the floating AdminNav. */
.form-settings-page .form-settings-page-header {
  margin-bottom: 22px;
}
.form-settings-page .form-settings-page-header h1 {
  color: var(--if-primary);
  font-size: 1.45rem;
  font-weight: 760;
}
.form-settings-workspace {
  display: block;
}
.form-settings-page-content {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--if-border);
  border-radius: 12px;
  box-shadow: var(--if-shadow-card);
}
.form-settings-page-content .builder-form-settings-tab-panel {
  padding: 22px;
}
.form-settings-page-content .builder-form-settings-panel-heading {
  margin: -22px -22px 20px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--if-border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--if-primary), white 97%),
    var(--if-surface)
  );
}
.form-settings-page-content .builder-form-settings-panel-heading h2 {
  color: var(--if-primary);
  font-size: 0.9rem;
  font-weight: 760;
}
.form-settings-page-content .builder-settings-section {
  border-radius: 10px;
  box-shadow: none;
}
.form-settings-page-content .builder-property-input,
.form-settings-page-content .builder-property-textarea {
  min-height: 44px;
  border-color: var(--if-border-strong);
  font-size: 0.875rem;
}
.form-settings-page-content .ordered-workflow-step {
  padding: 12px 14px;
  border-radius: 9px;
  box-shadow: none;
}

@media (max-width: 560px) {
  .form-settings-page-actions,
  .ordered-workflow-add-actions,
  .workflow-step-modal-footer {
    width: 100%;
  }

  .form-settings-page-actions .if-btn,
  .ordered-workflow-add-actions .if-btn,
  .workflow-step-modal-footer .if-btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .workflow-step-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .workflow-step-modal-header,
  .workflow-step-modal-body,
  .workflow-step-modal-footer {
    padding-inline: 0.8rem;
  }
}

.ordered-workflow-editor {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ordered-workflow-add-actions,
.ordered-workflow-actions,
.workflow-step-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ordered-workflow-empty {
  padding: 1.5rem;
  border: 1px dashed var(--if-border-strong);
  border-radius: var(--if-radius-card);
  color: var(--if-text-muted);
  text-align: center;
}

.ordered-workflow-list {
  display: grid;
  gap: 0.65rem;
}

.ordered-workflow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
  background: var(--if-surface);
}

.ordered-workflow-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: white;
  background: var(--if-primary);
  font-weight: 700;
}

.ordered-workflow-summary,
.ordered-workflow-summary span,
.ordered-workflow-summary small {
  display: grid;
  gap: 0.15rem;
}

.ordered-workflow-summary span,
.ordered-workflow-summary small {
  color: var(--if-text-muted);
}

.ordered-workflow-actions > button:not(.builder-small-button) {
  width: 2rem;
  min-height: 2rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);
  background: var(--if-surface);
}

.workflow-step-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(calc(100vw - 32px), 1180px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border-radius: var(--if-radius-card);
  background: var(--if-surface);
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.28);
}

.workflow-step-modal-header,
.workflow-step-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--if-border);
}

.workflow-step-modal-header h2,
.workflow-step-modal-header p {
  margin: 0;
}

.workflow-step-modal-header > button {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
}

.workflow-step-modal-body {
  display: grid;
  gap: 1rem;
  overflow-y: auto;
  padding: 1rem 1.2rem;
}

.workflow-step-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--if-border);
  border-bottom: 0;
}

.workflow-modal-section {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
}

.workflow-modal-section h3,
.workflow-modal-section p {
  margin: 0;
}

.workflow-modal-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.workflow-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.workflow-modal-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-modal-section label,
.workflow-recipient-card label {
  display: grid;
  gap: 0.35rem;
}

.workflow-recipient-card {
  display: grid;
  grid-template-columns:
    90px minmax(130px, 0.7fr) minmax(170px, 1fr) minmax(180px, 1.2fr)
    auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  border-radius: var(--if-radius-control);
  background: var(--if-surface-subtle);
}

.workflow-recipient-remove {
  min-height: 2.5rem;
  border: 1px solid var(--if-danger, #b42318);
  border-radius: var(--if-radius-control);
  color: var(--if-danger, #b42318);
  background: transparent;
}

@media (max-width: 900px) {
  .ordered-workflow-step,
  .workflow-modal-grid,
  .workflow-modal-grid-three,
  .workflow-recipient-card {
    grid-template-columns: 1fr;
  }
}

/* Final scoped modal layer; intentionally follows the historical rules above. */
.form-settings-page .workflow-step-modal {
  width: min(calc(100vw - 36px), 780px);
  max-height: min(calc(100dvh - 48px), 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--if-primary), transparent 82%);
  border-radius: 14px;
  background: #f7f9fb;
  box-shadow: 0 28px 80px rgba(4, 20, 42, 0.32);
}
.form-settings-page .workflow-step-modal.is-docusign {
  width: min(calc(100vw - 36px), 900px);
}
.form-settings-page .workflow-step-modal-header {
  min-height: 78px;
  padding: 16px 20px;
  background: #fff;
}
.form-settings-page .workflow-step-modal-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.form-settings-page .workflow-step-modal-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--if-primary);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}
.form-settings-page .workflow-step-modal.is-docusign .workflow-step-modal-icon {
  background: #1769aa;
}
.form-settings-page .workflow-step-modal-heading h2 {
  color: var(--if-primary);
  font-size: 0.92rem;
  font-weight: 780;
}
.form-settings-page .workflow-step-modal-heading p:last-child {
  margin-top: 4px;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}
.form-settings-page .workflow-step-modal-header > button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--if-text-muted);
  cursor: pointer;
}
.form-settings-page .workflow-step-modal-header > button:hover {
  background: var(--if-surface-subtle);
  color: var(--if-primary);
}
.form-settings-page .workflow-step-modal-body {
  min-height: 0;
  gap: 14px;
  padding: 18px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.form-settings-page .workflow-modal-section {
  gap: 14px;
  padding: 18px;
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--if-shadow-card);
}
.form-settings-page .workflow-modal-section > h3,
.form-settings-page .workflow-modal-section-heading h3 {
  color: var(--if-primary);
  font-size: 0.875rem;
  font-weight: 780;
}
.form-settings-page .workflow-recipient-card {
  padding: 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}
.form-settings-page .workflow-step-modal-footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 13px 20px;
  background: #fff;
  box-shadow: 0 -5px 15px rgba(4, 30, 66, 0.035);
}
.workflow-toggle-row {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--if-border);
  border-radius: 8px;
  background: var(--if-surface-subtle);
}
.workflow-toggle-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.workflow-toggle-row strong {
  color: var(--if-text-strong);
  font-size: 0.875rem;
}
.workflow-toggle-row > div > span {
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}
.builder-toggle-row > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 34px;
  width: 34px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--if-border-strong);
  border-radius: 999px;
  background:
    radial-gradient(circle at 8px 50%, #fff 0 5px, transparent 5.5px),
    var(--if-slate-400, #94a3b8);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.builder-toggle-row > input[type="checkbox"]:checked {
  border-color: var(--if-primary);
  background:
    radial-gradient(
      circle at calc(100% - 8px) 50%,
      #fff 0 5px,
      transparent 5.5px
    ),
    var(--if-primary);
}
.builder-toggle-row > input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--if-secondary), transparent 45%);
  outline-offset: 2px;
}
.form-builder-properties .builder-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  line-height: 1.35;
  cursor: pointer;
}

.form-builder-properties .builder-toggle-row > span {
  min-width: 0;
}
.workflow-condition-list {
  display: grid;
  gap: 9px;
}
.workflow-condition-card {
  display: grid;
  grid-template-columns:
    minmax(160px, 1fr) minmax(130px, 0.7fr) minmax(160px, 1fr)
    auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}
.workflow-condition-card > label,
.workflow-condition-card > .builder-property-field {
  min-width: 0;
}
@media (max-width: 760px) {
  .workflow-condition-card {
    grid-template-columns: 1fr;
  }
  .workflow-condition-card .workflow-recipient-remove {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .form-settings-page .workflow-step-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .form-settings-page .workflow-step-modal-heading {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .form-settings-page .workflow-step-modal-icon {
    width: 34px;
    height: 34px;
  }
}

/* ============================================================
   FORM SETTINGS PAGE -CANONICAL PAGE LAYER

   Form Settings was originally rendered in a modal. These selectors are
   intentionally page-scoped and supersede the historical modal rules.
   ============================================================ */

.form-settings-page {
  padding-top: 22px;
}

.form-settings-page .form-settings-page-header {
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 16px;
  padding: 0 0 16px;
  border-bottom: 0;
}

.form-settings-page .form-settings-page-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.form-settings-page .form-builder-save-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--if-success), transparent 68%);
  border-radius: var(--if-radius-control);
  background: color-mix(in srgb, var(--if-success), white 92%);
}

.form-settings-page .form-settings-page-nav {
  margin-bottom: 16px;
}

.form-settings-page .form-settings-page-content {
  width: min(100%, 1120px);
  margin-inline: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.form-settings-page-content .builder-properties-body {
  padding: 0;
}

.form-settings-page-content .builder-form-settings-tab-panel {
  padding: 0;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
  background: var(--if-surface);
  box-shadow: var(--if-shadow-card);
}

.form-settings-page-content .builder-form-settings-panel-heading {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--if-border);
  border-radius: var(--if-radius-card) var(--if-radius-card) 0 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--if-primary), white 97%),
    var(--if-surface)
  );
}

.form-settings-page-content .builder-form-settings-panel-heading h3 {
  font-size: 0.88rem;
}

.form-settings-page-content .builder-form-settings-panel-heading p:last-child {
  font-size: 0.875rem;
}

.form-settings-page-content
  .builder-form-settings-panel-heading
  + .builder-property-field,
.form-settings-page-content
  .builder-form-settings-panel-heading
  + .builder-card-settings-layout,
.form-settings-page-content
  .builder-form-settings-panel-heading
  + .builder-settings-section,
.form-settings-page-content
  .builder-form-settings-panel-heading
  + .ordered-workflow-editor {
  margin-top: 0;
}

.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-property-field,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-card-settings-layout,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-settings-section,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .ordered-workflow-editor {
  margin-inline: 20px;
}

.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-property-field:first-of-type,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-card-settings-layout,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-settings-section:first-of-type,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .ordered-workflow-editor {
  margin-top: 20px;
}

.form-settings-page-content .builder-form-settings-tab-panel > :last-child {
  margin-bottom: 20px;
}

.form-settings-page-content .builder-settings-section,
.form-settings-page-content .builder-settings-section-flat {
  gap: 14px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.form-settings-page-content .builder-settings-section-title,
.form-settings-page-content .builder-settings-subsection-title {
  color: var(--if-primary);
  font-size: 0.875rem;
  font-weight: 780;
}

.form-settings-page-content .builder-settings-subsection {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--if-border);
  border-radius: 10px;
  background: var(--if-surface-subtle);
}

.form-settings-page-content .builder-property-field {
  gap: 6px;
}

.form-settings-page-content
  .builder-property-field
  > label:not(.builder-toggle-row) {
  color: var(--if-text-strong);
  font-size: 0.875rem;
  font-weight: 740;
}

.form-settings-page-content .builder-property-help {
  margin: 0;
  color: var(--if-text-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Text comes first and the switch closes the row, matching System Settings. */
.form-settings-page-content .builder-toggle-row {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
  color: var(--if-text-strong);
  font-family: var(--if-font-body-config, inherit);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.form-settings-page-content .builder-toggle-row > span {
  order: 1;
  min-width: 0;
}

.form-settings-page-content .builder-toggle-row > input[type="checkbox"] {
  order: 2;
  flex: 0 0 34px;
}

.form-settings-page-content .builder-property-field:has(> .builder-toggle-row) {
  gap: 5px;
}

.form-settings-page-content
  .builder-property-field
  > .builder-toggle-row
  + .builder-property-help {
  padding-inline: 2px;
}

.form-settings-page-content .builder-small-button {
  min-height: 34px;
  padding: 0 11px;
  border-color: var(--if-border-strong);
  border-radius: var(--if-radius-control);
  font-family: var(--if-font-button-config, inherit);
  font-size: 0.875rem;
}

.form-settings-page-content .builder-notification-rule,
.form-settings-page-content .builder-rule-card,
.form-settings-page-content .ordered-workflow-step {
  overflow: hidden;
  border: 1px solid var(--if-border);
  border-radius: 10px;
  background: var(--if-surface);
  box-shadow: none;
}

.form-settings-page-content .builder-notification-rule-header {
  padding: 11px 13px;
  border-bottom: 1px solid var(--if-border);
  background: var(--if-surface-subtle);
}

.form-settings-page-content .builder-settings-placeholder,
.form-settings-page-content .ordered-workflow-empty {
  padding: 20px;
  border: 1px dashed var(--if-border-strong);
  border-radius: 10px;
  background: var(--if-surface-subtle);
}

.form-settings-page-content .builder-card-settings-layout {
  padding-bottom: 20px;
}

.form-settings-page-content .builder-card-settings-controls {
  gap: 12px;
}

@media (max-width: 620px) {
  .form-settings-page {
    padding-top: 16px;
  }

  .form-settings-page-content .builder-form-settings-panel-heading,
  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .builder-property-field,
  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .builder-card-settings-layout,
  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .builder-settings-section,
  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .ordered-workflow-editor {
    margin-inline: 14px;
  }

  .form-settings-page-content .builder-form-settings-panel-heading {
    margin-inline: 0;
    padding: 16px;
  }

  .form-settings-page-content .builder-toggle-row {
    gap: 12px;
  }
}

/* Final workflow page placement: keep the section header and rows full-width. */
.form-settings-page-content
  .builder-form-settings-panel-workflow
  > .ordered-workflow-editor {
  gap: 0;
  margin: 0;
}

.form-settings-page-content
  .builder-form-settings-panel-workflow
  .ordered-workflow-editor
  > .builder-form-settings-panel-heading {
  margin: 0;
}

.form-settings-page-content
  .builder-form-settings-panel-workflow
  .ordered-workflow-list,
.form-settings-page-content
  .builder-form-settings-panel-workflow
  .ordered-workflow-empty {
  margin: 16px 20px 20px;
}

/* ============================================================
   FORM SETTINGS -PUBLISH READY BUTTON
   ============================================================ */

.form-settings-page
  .form-settings-page-actions
  button.builder-publish-ready-button {
  border: 1px solid #177245 !important;
  background: #177245 !important;
  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(23, 114, 69, 0.2) !important;
}

.form-settings-page
  .form-settings-page-actions
  button.builder-publish-ready-button:hover:not(:disabled) {
  border-color: #12603a !important;
  background: #12603a !important;
  color: #ffffff !important;
}

.form-settings-page
  .form-settings-page-actions
  button.builder-publish-ready-button:focus-visible {
  outline: 2px solid #177245 !important;
  outline-offset: 2px;
}

/* DocuSign workflow editor */
.docusign-workflow-settings {
  gap: 16px;
}

.docusign-workflow-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #cfe0ee;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3f9fd 0%, #fff 72%);
}

.docusign-workflow-heading h3 {
  margin: 2px 0 4px;
  color: #092d4d;
  font-size: 1.05rem;
}

.docusign-workflow-heading p,
.docusign-email-editor-heading span,
.docusign-insert-fields > div:first-child span,
.docusign-brand-note span {
  color: #526a7f;
  font-size: 0.875rem;
  line-height: 1.5;
}

.docusign-workflow-heading p {
  margin: 0;
}

.docusign-workflow-kicker {
  color: #0876ad;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.docusign-workflow-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: #07567f;
  background: #dff2fb;
  font-size: 0.78rem;
  font-weight: 700;
}

.docusign-email-editor {
  display: grid;
  gap: 13px;
  padding: 17px;
  border: 1px solid #cad8e5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(21, 57, 86, 0.06);
}

.docusign-email-editor-heading strong,
.docusign-insert-fields > div:first-child strong {
  display: block;
  color: #173c5b;
  font-size: 0.9rem;
}

.docusign-email-editor-heading span,
.docusign-insert-fields > div:first-child span {
  display: block;
  margin-top: 3px;
}

.docusign-email-message {
  min-height: 130px !important;
  resize: vertical;
  line-height: 1.5;
}

.docusign-insert-fields {
  display: grid;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid #e2e9ef;
}

.docusign-token-list {
  display: grid;
  gap: 6px;
}

.docusign-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  background: #f8fafc;
}

.docusign-token-row > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.docusign-token-row code {
  color: #075e8c;
  font-size: 0.875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.docusign-token-row span {
  color: #526a7f;
  font-size: 0.875rem;
}

.docusign-token-row > div:last-child {
  display: flex;
  gap: 6px;
}

.docusign-token-row button {
  padding: 6px 9px;
  border: 1px solid #b9cfdf;
  border-radius: 6px;
  color: #174b70;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.docusign-token-row button:hover {
  border-color: var(--if-secondary, #0a7cb4);
  color: #07557e;
  background: #edf8fd;
}

.docusign-token-row button:focus-visible {
  outline: 2px solid var(--if-secondary, #0a7cb4);
  outline-offset: 2px;
}

.docusign-brand-note {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-left: 3px solid var(--if-secondary, #0a7cb4);
  border-radius: 6px;
  color: #24445f;
  background: #eff8fc;
}

.docusign-brand-note strong {
  font-size: 0.875rem;
}

@media (max-width: 620px) {
  .docusign-workflow-heading,
  .docusign-token-row {
    align-items: stretch;
    flex-direction: column;
  }

  .docusign-workflow-badge {
    align-self: flex-start;
  }

  .docusign-token-row > div:last-child {
    flex-wrap: wrap;
  }
}

/* DocuSign AI review packet option */
.docusign-ai-review-toggle {
  border-color: #cfe0ee !important;
  background: #f8fbfd !important;
}

.docusign-ai-review-toggle strong {
  color: #173c5b;
}

/* Keep large-text sizing authoritative over feature styles above. */
.form-builder-header-actions .if-btn,
.form-builder-header-actions .builder-history-button,
.builder-form-settings-tabs > button,
.builder-form-settings-modal-actions .if-btn,
.builder-header-menu-item,
.workflow-add-button,
.workflow-recipient-remove {
  height: auto;
  min-height: 44px;
  padding-block: 0.625rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.builder-form-settings-modal-body
  :is(
    .builder-property-input,
    .builder-property-readonly,
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"])
  ) {
  height: auto;
  min-height: 44px !important;
  padding-block: 0.625rem;
  line-height: 1.35;
}

.builder-form-settings-close,
.builder-header-menu-trigger,
.form-builder-back {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* ============================================================
   READABLE DATABASE LOOKUPS + NUMBER SETTINGS
   ============================================================ */

.builder-number-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
}

.builder-number-format-preview {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 0.5rem;
  background: var(--if-surface-subtle, #f8fafc);
}

.builder-number-format-preview span {
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
}

.builder-number-format-preview strong {
  color: var(--if-primary, #041e42);
  font-size: 1rem;
  overflow-wrap: anywhere;
  text-align: right;
}

.builder-preview-multi-select {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--if-border-strong, #cbd5e1);
  border-radius: 7px;
  background: var(--if-surface, #fff);
  color: var(--if-text-strong, #334155);
  font-size: 0.875rem;
  font-weight: 650;
}

.builder-preview-multi-select > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.builder-preview-multi-select-meta {
  flex: 0 0 auto;
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  font-weight: 550;
}

.builder-settings-section .builder-database-column-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  max-height: 18rem;
  padding: 0.625rem;
}

.builder-settings-section .builder-database-column-option {
  min-height: 44px;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  line-height: 1.35;
}

.builder-settings-section .builder-database-column-option input {
  width: 1.25rem;
  height: 1.25rem;
  flex-basis: 1.25rem;
  margin-top: 0.05rem;
}

.builder-settings-section .builder-database-column-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.form-builder-canvas .builder-preview-database-lookup {
  min-height: 44px;
  padding: 0.375rem 0.375rem 0.375rem 0.75rem !important;
}

.form-builder-canvas .builder-preview-database-lookup > span {
  white-space: normal;
  overflow-wrap: anywhere;
}

.form-builder-canvas .builder-preview-database-lookup > button {
  height: auto;
  min-height: 36px;
  padding: 0.5rem 0.75rem !important;
  line-height: 1.25;
  white-space: normal;
}

.database-lookup-modal {
  width: min(76rem, calc(var(--if-ui-viewport-width, 100vw) - 2rem));
  height: min(42.5rem, calc(var(--if-ui-viewport-height, 100dvh) - 2rem));
  max-height: calc(var(--if-ui-viewport-height, 100dvh) - 2rem);
}

.database-lookup-modal-header {
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.database-lookup-modal-header > div {
  min-width: 0;
}

.database-lookup-modal-header h2 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.database-lookup-close {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.database-lookup-search {
  padding: 1rem 1.5rem;
}

.database-lookup-search .if-btn {
  height: auto;
  min-height: 44px;
  padding-block: 0.625rem;
  line-height: 1.25;
  white-space: normal;
}

.database-lookup-table-wrapper {
  width: 100%;
  overflow: visible;
  overscroll-behavior: auto;
}

.database-lookup-table {
  width: max-content;
  min-width: 100%;
}

.database-lookup-table th,
.database-lookup-table td {
  min-width: 9rem;
  padding: 0.875rem 1rem;
  line-height: 1.4;
  white-space: nowrap;
}

.database-lookup-table tbody tr {
  cursor: pointer;
}

.database-lookup-table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--if-secondary), white 89%);
}

.database-lookup-table .database-lookup-choice-heading,
.database-lookup-table .database-lookup-choice-cell {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 3.5rem;
  width: 3.5rem;
  padding-inline: 0.75rem;
  text-align: center;
  background: var(--if-surface);
}

.database-lookup-table .database-lookup-choice-heading {
  z-index: 4;
  border-inline-end: 1px solid color-mix(in srgb, white, transparent 78%);
  background: var(--if-primary, #041e42);
  color: #ffffff;
}

.database-lookup-table tbody tr.is-selected .database-lookup-choice-cell {
  background: color-mix(in srgb, var(--if-secondary), white 82%);
}

.database-lookup-choice-input {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  accent-color: var(--if-secondary);
  cursor: pointer;
}

.database-lookup-choice-target {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.database-lookup-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--if-border);
  background: var(--if-surface);
  box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.06);
}

.database-lookup-pagination {
  flex: 0 0 auto;
  min-width: 0;
  overflow-x: auto;
  border-top: 1px solid var(--if-border);
  background: var(--if-surface-subtle);
}

.database-lookup-footer > div:first-child {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.database-lookup-footer strong {
  color: var(--if-text-strong);
  font-size: 0.82rem;
}

.database-lookup-footer span {
  overflow: hidden;
  color: var(--if-text-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-lookup-footer-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.65rem;
}

@media (max-width: 760px) {
  .database-lookup-backdrop {
    padding: 0.5rem;
  }

  .database-lookup-modal {
    width: calc(var(--if-ui-viewport-width, 100vw) - 1rem);
    height: calc(var(--if-ui-viewport-height, 100dvh) - 1rem);
    max-height: calc(var(--if-ui-viewport-height, 100dvh) - 1rem);
  }

  .database-lookup-modal-header,
  .database-lookup-search {
    padding-inline: 1rem;
  }

  .database-lookup-search .if-btn {
    width: 100%;
  }

  .database-lookup-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
  }

  .database-lookup-footer-actions .if-btn {
    flex: 1 1 0;
  }
}

/* ============================================================
   FORM SETTINGS — INTEGRATED APPLICATION LAYOUT

   This final page-scoped layer replaces the older floating settings
   treatment without changing the builder's field-properties panel.
   ============================================================ */

.form-settings-page {
  padding-top: 0;
  padding-bottom: 4rem;
}

.form-settings-page .form-settings-page-header {
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--if-border);
}

.form-settings-page .form-settings-page-header > div:first-child {
  min-width: 0;
  max-width: 760px;
}

.form-settings-page .form-settings-page-header h1 {
  margin-top: 3px;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  line-height: 1.2;
}

.form-settings-page .form-settings-page-header h1 + p {
  max-width: 68ch;
  margin-top: 5px;
  color: var(--if-text-muted);
  line-height: 1.55;
}

.form-settings-page .form-settings-page-actions {
  align-items: center;
  flex-wrap: wrap;
}

.form-settings-page .form-settings-save-state {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);
  color: var(--if-text-muted);
  background: var(--if-surface-subtle);
  font-family: var(--if-font-button-config, inherit);
  font-size: 0.9375rem;
  font-weight: 700;
}

.form-settings-page .form-settings-save-state > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: var(--if-primary);
  background: var(--if-secondary-soft);
  font-size: 0.875rem;
}

.form-settings-page .form-builder-save-status {
  width: fit-content;
  max-width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -4px 0 16px;
  padding: 8px 11px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);
  color: var(--if-text-muted);
  background: var(--if-surface-subtle);
  font-size: 0.9375rem;
  font-weight: 650;
  box-shadow: none;
}

.form-settings-page .form-builder-save-status > span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--if-secondary);
}

.form-settings-page
  .form-settings-page-actions
  button.builder-publish-ready-button {
  border-color: var(--if-primary) !important;
  color: #fff !important;
  background: var(--if-primary) !important;
  box-shadow: none !important;
}

.form-settings-page
  .form-settings-page-actions
  button.builder-publish-ready-button:hover:not(:disabled) {
  border-color: var(--if-secondary) !important;
  color: var(--if-primary) !important;
  background: var(--if-secondary) !important;
}

.form-settings-page
  .form-settings-page-actions
  button.builder-publish-ready-button:focus-visible {
  outline-color: var(--if-secondary) !important;
}

.form-settings-page .form-settings-page-content {
  width: min(100%, 1160px);
  padding-bottom: 2.5rem;
}

.form-settings-page-content .builder-form-settings-tab-panel {
  margin-bottom: 2rem;
  overflow: hidden;
  border-color: var(--if-border);
  border-top: 4px solid var(--if-secondary);
  background: var(--if-surface);
  box-shadow: var(--if-shadow-card);
}

.form-settings-page-content .builder-form-settings-panel-heading {
  padding: 16px 18px 14px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--if-secondary-soft), white 28%) 0%,
    #fff 72%
  );
}

.form-settings-page-content .builder-form-settings-panel-heading h2,
.form-settings-page-content .builder-form-settings-panel-heading h3 {
  color: var(--if-primary);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.3;
}

.form-settings-page-content .builder-form-settings-panel-heading p:last-child {
  margin-top: 3px;
  color: var(--if-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-property-field,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-card-settings-layout,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-settings-section,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .ordered-workflow-editor {
  margin-inline: 18px;
}

.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-property-field:first-of-type,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-card-settings-layout,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-settings-section:first-of-type,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .ordered-workflow-editor {
  margin-top: 14px;
}

.form-settings-page-content .builder-form-settings-tab-panel > :last-child {
  margin-bottom: 16px;
}

.form-settings-page-content .builder-settings-section,
.form-settings-page-content .builder-settings-section-flat {
  gap: 12px;
  margin-bottom: 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--if-border);
  border-radius: 0;
  background: transparent;
}

.form-settings-page-content
  .builder-form-settings-panel-heading
  + .builder-settings-section,
.form-settings-page-content
  .builder-form-settings-tab-panel
  > .builder-settings-section:first-of-type {
  border-top: 0;
}

.form-settings-page-content .builder-settings-section-title,
.form-settings-page-content .builder-settings-subsection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  line-height: 1.35;
}

.form-settings-page-content .builder-settings-section-title::before,
.form-settings-page-content .builder-settings-subsection-title::before {
  width: 4px;
  height: 18px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: var(--if-secondary);
  content: "";
}

.form-settings-page-content .builder-settings-section-heading {
  align-items: flex-start;
  gap: 14px;
}

.form-settings-page-content .builder-settings-subsection,
.form-settings-page-content .builder-settings-placeholder,
.form-settings-page-content .ordered-workflow-empty {
  background: var(--if-surface-subtle);
}

.form-settings-page-content .builder-settings-subsection {
  gap: 12px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--if-secondary), transparent 72%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--if-secondary-soft), white 48%);
}

.form-settings-page-content .builder-toggle-row {
  min-height: 56px;
  padding: 10px 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.form-settings-page-content
  .builder-property-field:last-child
  > .builder-toggle-row,
.form-settings-page-content
  .builder-settings-section
  > .builder-property-field:last-child
  > .builder-toggle-row {
  border-bottom: 0;
}

.form-settings-page-content
  .builder-property-field
  > label:not(.builder-toggle-row),
.form-settings-page-content .builder-property-help,
.form-settings-page-content .builder-toggle-row {
  font-size: 0.9375rem;
}

.form-settings-page-content .builder-small-button {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.form-settings-page-content .builder-card-preview-wrap {
  top: 40px;
}

.form-settings-page-content
  .builder-form-settings-panel-workflow
  > .ordered-workflow-editor {
  margin: 0;
}

.form-settings-page-content
  .builder-form-settings-panel-workflow
  .ordered-workflow-list,
.form-settings-page-content
  .builder-form-settings-panel-workflow
  .ordered-workflow-empty {
  margin: 18px 22px 22px;
}

@media (max-width: 900px) {
  .form-settings-page .form-settings-page-header {
    align-items: flex-start;
  }

  .form-settings-page .form-settings-page-actions {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .form-settings-page .form-settings-page-header {
    gap: 12px;
    padding-bottom: 12px;
  }

  .form-settings-page .form-settings-page-actions > * {
    flex: 1 1 100%;
    justify-content: center;
  }

  .form-settings-page .form-builder-save-status {
    width: 100%;
  }

  .form-settings-page-content .builder-form-settings-panel-heading {
    padding: 15px 14px;
  }

  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .builder-property-field,
  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .builder-card-settings-layout,
  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .builder-settings-section,
  .form-settings-page-content
    .builder-form-settings-tab-panel
    > .ordered-workflow-editor {
    margin-inline: 14px;
  }

  .form-settings-page-content .builder-settings-section,
  .form-settings-page-content .builder-settings-section-flat {
    padding: 13px 0;
  }

  .form-settings-page-content
    .builder-form-settings-panel-workflow
    .ordered-workflow-list,
  .form-settings-page-content
    .builder-form-settings-panel-workflow
    .ordered-workflow-empty {
    margin: 14px;
  }
}

/* ============================================================
   DATABASE LOOKUP — LONG IDENTIFIER SAFETY
   Keep source column names and friendly-name editors inside the
   Form Builder properties panel even for long unbroken identifiers.
   ============================================================ */

.builder-settings-section .builder-database-column-list,
.builder-settings-section .builder-database-column-option,
.builder-database-friendly-names,
.builder-database-friendly-name-list,
.builder-database-friendly-name-row,
.builder-database-friendly-name-source,
.builder-database-friendly-name-editor {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.builder-settings-section .builder-database-column-option {
  width: 100%;
  overflow: hidden;
}

.builder-settings-section .builder-database-column-option > span,
.builder-database-friendly-name-source strong {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.builder-database-friendly-name-editor,
.builder-database-friendly-name-editor .builder-property-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.builder-settings-section select.builder-property-input {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   FORM PREVIEW — DRAG / REORDER HANDLE
   Uses six CSS-rendered dots instead of a font glyph so the
   handle renders consistently across browsers and operating systems.
   ============================================================ */

.builder-field-toolbar-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.builder-drag-handle {
  flex: 0 0 auto;
  width: 14px;
  height: 20px;
  display: grid;
  grid-template-columns: repeat(2, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 2px;
  align-content: center;
  justify-content: center;
  cursor: grab;
  opacity: 0.72;
}

.builder-drag-handle:active {
  cursor: grabbing;
}

.builder-drag-handle > span {
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 50%;
  background: currentColor;
}

.builder-canvas-field:hover .builder-drag-handle,
.builder-canvas-field.selected .builder-drag-handle {
  opacity: 1;
}

/* ==========================================================================
   SOURCE: branding-theme.css
   ========================================================================== */
/* Permanent configurable typography and institutional branding theme. */
@font-face {
  font-family: "myriad-pro";
  src: url("https://use.typekit.net/af/cafa63/00000000000000000001709a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
    format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "myriad-pro";
  src: url("https://use.typekit.net/af/1b1b1e/00000000000000000001709e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
    format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "myriad-pro-condensed";
  src: url("https://use.typekit.net/af/f72c04/0000000000000000000170a4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
    format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "myriad-pro-condensed";
  src: url("https://use.typekit.net/af/c63dde/0000000000000000000170a8/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
    format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --if-font-body: "myriad-pro", "Segoe UI", Arial, sans-serif;
  --if-font-heading: "myriad-pro", "Segoe UI", Arial, sans-serif;
  --if-font-button: "myriad-pro", "Segoe UI", Arial, sans-serif;
  --if-font-body-config: myriad-pro;
  --if-font-body-weight: 400;
  --if-font-heading-config: myriad-pro;
  --if-font-heading-weight: 700;
  --if-font-header-config: myriad-pro-condensed;
  --if-font-header-weight: 600;
  --if-font-nav-config: myriad-pro;
  --if-font-nav-weight: 700;
  --if-font-button-config: myriad-pro;
  --if-font-button-weight: 600;
  /* Branding color/text/border tokens are owned by global.css (and overridden live
       from SiteSettings via MainLayout/AuthLayout inline styles) — do not redeclare them here. */
}

html,
body,
input,
select,
textarea {
  font-family: var(--if-font-body-config), "Segoe UI", Arial, sans-serif;
}

body {
  color: var(--if-text);
  font-weight: var(--if-font-body-weight);
  letter-spacing: 0.005em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.if-page-heading h1,
.builder-panel-heading h2,
.builder-form-settings-modal-header h2 {
  font-family: var(--if-font-heading-config), "Segoe UI", Arial, sans-serif;
  color: var(--if-primary);
  font-weight: var(--if-font-heading-weight);
  letter-spacing: 0.005em;
}

.if-page-heading h1 {
  font-size: 1.65rem;
  line-height: 1.08;
}

.if-page-heading > div > p:last-child,
.system-setting-help,
.builder-property-help,
.user-editor-help {
  line-height: 1.5;
}

a {
  color: #1f5383;
}

a:hover,
a:focus {
  color: #0b1f31;
}

button,
button[class][class],
.if-btn,
.auth-submit,
.builder-small-button,
.if-table-action,
button[type="submit"] {
  font-family: var(--if-font-button-config), "Segoe UI", Arial, sans-serif;
  font-weight: var(--if-font-button-weight);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.if-btn-primary,
.auth-submit {
  border-color: var(--if-primary);
  background: var(--if-primary);
}

.if-btn-primary:hover,
.auth-submit:hover {
  border-color: #1f5383;
  background: #1f5383;
}

.if-eyebrow,
.if-table th,
.builder-settings-section-title,
.builder-settings-subsection-title,
.system-setting-toggle-title {
  font-family: var(--if-font-heading-config), "Segoe UI", Arial, sans-serif;
  font-weight: var(--if-font-heading-weight);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(4, 30, 66, 0.75);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px rgba(4, 30, 66, 0.12);
}

.if-table-badge,
.if-category-pill,
.available-form-owner-pill {
  font-family: var(--if-font-heading-config), "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.025em;
}

.if-site-shell .if-brand-title {
  font-family: var(--if-font-header-config), "Arial Narrow", Arial, sans-serif;
  font-size: 1.28rem;
  font-weight: var(--if-font-header-weight);
  letter-spacing: 0.02em;
}

.if-site-shell .if-brand-subtitle {
  font-family: var(--if-font-body-config), "Segoe UI", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: var(--if-font-body-weight);
  letter-spacing: 0.045em;
}

.if-site-shell .if-primary-nav-link {
  font-family: var(--if-font-nav-config), "Segoe UI", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: var(--if-font-nav-weight);
  letter-spacing: 0.04em;
}

.auth-shell .auth-brand-name {
  font-family: var(--if-font-header-config), "Arial Narrow", Arial, sans-serif;
  font-weight: var(--if-font-header-weight);
}

.brand-preview .brand-preview-header {
  font-family: var(--preview-header), "Arial Narrow", Arial, sans-serif;
  font-weight: var(--preview-header-weight);
}

.brand-font-grid {
  display: grid;
  gap: 0.85rem;
}

.brand-custom-font-editor {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr) minmax(180px, 0.8fr) minmax(260px, 1.3fr)
    auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
}

.brand-custom-font-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.brand-custom-font-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--if-radius-control);
  background: var(--if-surface-subtle);
}

.brand-custom-font-item span,
.brand-custom-font-item small {
  display: block;
  min-width: 0;
}

.brand-custom-font-item small {
  overflow: hidden;
  color: var(--if-text-muted);
  font-family: var(--if-font-body-config), sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-font-setting {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.65fr) minmax(
      130px,
      0.5fr
    );
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-control);
  background: var(--if-surface-subtle);
}

.brand-font-setting label {
  font-weight: 700;
}

.brand-font-setting .brand-field-help {
  margin: 0.2rem 0 0;
}

.brand-font-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.55rem;
  margin-top: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-card);
}

/* Keep the FormBuilder properties panel readable when field editors contain
   long labels and several related controls. */
.form-builder-properties > .builder-properties-body {
  min-width: 0;
  padding: 24px 22px 32px;
}

.form-builder-properties .builder-property-field,
.form-builder-properties .builder-property-field label,
.form-builder-properties .builder-settings-section,
.form-builder-properties .builder-repeating-table-settings,
.form-builder-properties .builder-repeating-table-column {
  min-width: 0;
}

.form-builder-properties .builder-property-field > label,
.form-builder-properties .builder-property-field label {
  line-height: 1.35;
}

.form-builder-properties .builder-property-input,
.form-builder-properties .builder-property-textarea {
  max-width: 100%;
}

.form-builder-properties .builder-repeating-table-settings {
  gap: 14px;
}

.form-builder-properties .builder-repeating-table-column {
  padding: 0;
  border-radius: 9px;
}

.form-builder-properties
  .builder-repeating-table-settings
  .builder-database-column-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: 200px;
  padding: 8px;
}

.form-builder-properties
  .builder-repeating-table-settings
  .builder-database-column-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--if-border, #dce5ed);
  border-radius: 8px;
  background: #ffffff;
}

.form-builder-properties
  .builder-repeating-table-settings
  .builder-database-column-option
  > .user-toggle {
  flex: 0 0 42px;
  flex-shrink: 0;
}

.form-builder-properties
  .builder-repeating-table-settings
  .builder-database-column-option
  > span:not(.user-toggle) {
  min-width: 0;
  flex: 1 1 0%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.form-builder-properties
  .builder-repeating-table-settings
  .builder-number-settings-grid,
.form-builder-properties .builder-repeating-calculation {
  grid-template-columns: minmax(0, 1fr);
}

.form-builder-properties .builder-repeating-table-column-heading {
  grid-template-columns: minmax(0, 1fr);
}

.form-builder-properties .builder-repeating-table-column-heading > div {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.form-builder-properties .builder-repeating-table-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.form-builder-properties
  .builder-repeating-table-row
  > .builder-small-button:last-child {
  grid-column: 1 / -1;
  justify-self: start;
}

.form-builder-properties .builder-field-ai-review-section {
  gap: 16px;
  padding: 18px 0 4px;
}

.form-builder-properties
  .builder-field-ai-review-section
  > .builder-settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 0;
  color: var(--if-primary);
  font-size: 0.9rem;
}

.form-builder-properties
  .builder-field-ai-review-section
  > .builder-settings-section-title::before {
  content: "AI";
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--if-secondary-soft);
  color: var(--if-secondary);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.form-builder-properties .builder-field-ai-review-intro {
  margin: -6px 0 2px;
  color: var(--if-text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.form-builder-properties
  .builder-field-ai-review-section
  .builder-property-field {
  gap: 7px;
}

.form-builder-properties .builder-field-ai-review-section .builder-toggle-row {
  align-items: center;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}

.form-builder-properties
  .builder-field-ai-review-section
  .builder-toggle-row
  input {
  align-self: center;
  margin-block: 0;
  accent-color: var(--if-secondary);
}

.form-builder-properties
  .builder-field-ai-review-section
  .builder-property-help {
  margin-top: 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.form-builder-properties .builder-ai-review-policy-grid {
  display: grid;
  gap: 10px;
}

.form-builder-properties .builder-ai-review-policy-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}

.form-builder-properties
  .builder-ai-review-policy-card
  + .builder-ai-review-policy-card {
  margin-top: 0;
}

.form-builder-properties .builder-ai-review-dependencies {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.form-builder-properties .builder-ai-review-dependency-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}

.form-builder-properties .builder-ai-review-dependency-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.form-builder-properties .builder-ai-review-dependency-heading > div {
  min-width: 0;
}

.form-builder-properties .builder-ai-review-dependency-heading h4 {
  margin: 0;
  color: var(--if-text-strong);
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.3;
}

.form-builder-properties .builder-ai-review-dependency-heading p {
  margin: 4px 0 0;
  color: var(--if-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.form-builder-properties .builder-ai-review-reference-heading {
  display: grid;
  gap: 8px;
}

.form-builder-properties
  .builder-ai-review-reference-heading
  .builder-ai-review-version {
  justify-self: start;
}

.form-builder-properties .builder-ai-review-reference-textarea {
  display: block;
  min-height: 132px;
  padding: 10px 11px;
  line-height: 1.5;
  resize: vertical;
}

.form-builder-properties .builder-ai-review-reference-help {
  margin-top: 0;
}

.form-builder-properties .builder-ai-review-version,
.form-builder-properties .builder-ai-review-context-count {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--if-secondary), transparent 68%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--if-secondary), white 92%);
  color: var(--if-secondary);
  font-size: 0.7rem;
  font-weight: 780;
  line-height: 1.2;
  white-space: nowrap;
}

.form-builder-properties .builder-ai-review-context-select {
  height: auto;
  min-height: 92px;
  padding: 5px;
}

.form-builder-properties .builder-ai-review-context-select option {
  padding: 6px 7px;
  border-radius: 4px;
}

.form-builder-properties .builder-ai-review-empty-context {
  padding: 9px 10px;
  border: 1px dashed var(--if-border-strong);
  border-radius: 7px;
  color: var(--if-text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.builder-whole-form-ai-review-section {
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--if-border);
  border-top: 3px solid var(--if-secondary);
  border-radius: 10px;
  background: var(--if-surface);
  box-shadow: var(--if-shadow-card);
}

.builder-whole-form-ai-review-section .builder-settings-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.builder-whole-form-ai-review-section .builder-settings-section-title::before {
  content: "AI";
  display: inline-grid;
  width: 28px;
  height: 28px;
  min-width: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--if-secondary-soft);
  color: var(--if-secondary);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.builder-whole-form-ai-review-section .builder-field-ai-review-intro {
  margin: -6px 0 0;
  color: var(--if-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.builder-whole-form-ai-review-section > .builder-property-field {
  gap: 7px;
}

.builder-whole-form-ai-review-section .builder-toggle-row {
  align-items: center;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}

.builder-whole-form-ai-review-section .builder-toggle-row input {
  align-self: center;
  margin-block: 0;
  accent-color: var(--if-secondary);
}

.builder-whole-form-ai-review-section .builder-property-help {
  margin-top: 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.builder-whole-form-ai-review-section .builder-ai-review-policy-grid {
  display: grid;
  gap: 10px;
}

.builder-whole-form-ai-review-section .builder-ai-review-policy-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}

.builder-whole-form-ai-review-section .builder-ai-review-dependencies {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.builder-whole-form-ai-review-section .builder-ai-review-dependency-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--if-border);
  border-radius: 9px;
  background: var(--if-surface-subtle);
}

.builder-whole-form-ai-review-section .builder-ai-review-dependency-heading {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.builder-whole-form-ai-review-section .builder-ai-review-dependency-heading h4 {
  margin: 0;
  color: var(--if-text-strong);
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.3;
}

.builder-whole-form-ai-review-section .builder-ai-review-dependency-heading p {
  margin: 4px 0 0;
  color: var(--if-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.builder-whole-form-ai-review-section .builder-ai-review-version {
  justify-self: start;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--if-secondary), transparent 68%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--if-secondary), white 92%);
  color: var(--if-secondary);
  font-size: 0.7rem;
  font-weight: 780;
  line-height: 1.2;
}

.builder-whole-form-ai-review-section .builder-ai-review-reference-textarea,
.builder-whole-form-ai-review-section
  > .builder-property-field
  .builder-property-textarea {
  min-height: 118px;
  padding: 10px 11px;
  line-height: 1.5;
  resize: vertical;
}

.builder-whole-form-ai-review-section .builder-settings-placeholder {
  margin-top: 2px;
}

.builder-ai-review-guidance {
  padding: 8px 10px;
  border-left: 3px solid var(--if-secondary);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--if-secondary), white 95%);
  color: var(--if-text-muted);
}

.builder-whole-form-ai-review-section .builder-ai-review-policy-grid {
  margin-top: 2px;
}

.builder-whole-form-ai-review-section .builder-ai-review-dependencies {
  margin-top: 2px;
}

@media (min-width: 1500px) {
  .form-builder-workspace {
    grid-template-columns: 220px minmax(520px, 1fr) 390px;
  }
}

@media (max-width: 850px) {
  .form-builder-properties > .builder-properties-body {
    padding: 20px;
  }
}

.brand-font-preview h3,
.brand-font-preview p {
  margin: 0;
}

.brand-font-preview h3 {
  grid-column: 1;
  font-size: 0.875rem;
  font-family: var(--preview-heading), sans-serif;
  font-weight: var(--preview-heading-weight);
}

.brand-font-preview p {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  font-family: var(--preview-body), sans-serif;
  font-weight: var(--preview-body-weight);
}

.brand-font-preview a {
  grid-column: 1;
  font-size: 0.875rem;
  font-family: var(--preview-nav), sans-serif;
  font-weight: var(--preview-nav-weight);
}

.brand-font-preview button {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: auto;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 1px solid var(--if-primary);
  border-radius: var(--if-radius-control);
  color: white;
  background: var(--if-primary);
  font-family: var(--preview-button), sans-serif;
  font-size: 0.875rem;
  font-weight: var(--preview-button-weight);
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .brand-custom-font-editor,
  .brand-font-setting {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .if-page-heading h1 {
    font-size: 1.45rem;
  }
}

/* Floating navigation paints only the rounded controls. The full-width
   sticky regions remain transparent and do not intercept page content. */
.if-site-shell > .if-primary-nav,
.if-site-shell > .if-admin-nav-region,
.if-site-shell > .if-admin-nav-region > .if-admin-nav-container {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.if-site-shell > .if-primary-nav,
.if-site-shell > .if-admin-nav-region {
  pointer-events: none;
}

.if-site-shell > .if-primary-nav > .if-primary-nav-inner,
.if-site-shell > .if-admin-nav-region > .if-admin-nav-container,
.if-site-shell > .if-admin-nav-region .if-admin-nav,
.if-site-shell > .if-admin-nav-region .if-admin-nav-screen {
  pointer-events: auto;
}

.if-site-shell > .if-primary-nav::before,
.if-site-shell > .if-primary-nav::after,
.if-site-shell > .if-admin-nav-region::before,
.if-site-shell > .if-admin-nav-region::after,
.if-site-shell > .if-admin-nav-region > .if-admin-nav-container::before,
.if-site-shell > .if-admin-nav-region > .if-admin-nav-container::after {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   SOURCE: shared-tables.css
   ========================================================================== */
/* ============================================================
   SHARED DATA TABLE CONTRACT
   The My Reviews presentation is the visual source of truth for
   every management table. Feature styles should only define
   column sizing and page-specific content.
   ============================================================ */

/* Primary table pages share one content width and gutter. */
:is(
  .forms-page,
  .available-forms-page,
  .submissions-page,
  .my-reviews-page,
  .groups-page
) {
  width: min(calc(100% - 64px), 1360px);
  max-width: 1360px;
  margin-inline: auto;
}

@media (max-width: 700px) {
  :is(
    .forms-page,
    .available-forms-page,
    .submissions-page,
    .my-reviews-page,
    .groups-page
  ) {
    width: min(calc(100% - 28px), 1360px);
  }
}

:is(.if-table-card, .user-table-card, .home-table-shell) {
  overflow: hidden;
  border: 1px solid var(--if-border, #e2e8f0);
  border-radius: var(--if-radius-card, 14px);
  background: var(--if-surface, #ffffff);
  box-shadow: var(--if-shadow-card);
}

.home-table-group {
  display: grid;
  gap: 16px;
}

.home-table-group > .home-table-toolbar.if-table-toolbar {
  overflow: hidden;
  border: 1px solid var(--if-border, #e2e8f0);
  border-radius: var(--if-radius-card, 14px);
  background: var(--if-surface, #ffffff);
  box-shadow: var(--if-shadow-card);
}

:is(
  .if-table-wrapper,
  .user-table-wrapper,
  .user-table-wrap,
  .home-table-scroll
) {
  width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--if-surface, #ffffff);
  color: var(--if-text, #475569);
  font-size: 0.875rem;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  thead {
  background: var(--if-primary, #041e42);
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table) th {
  padding: 12px 14px;
  border-bottom: 0;
  background: var(--if-primary, #041e42);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-page .home-data-table th {
  letter-spacing: 0.02em;
  text-transform: none;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table) td {
  padding: 14px;
  border-bottom: 1px solid #eef2f6;
  background: var(--if-surface, #ffffff);
  color: var(--if-text, #475569);
  vertical-align: middle;
}

/* Standard two-line date presentation for every data table. */
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  .if-table-date {
  white-space: nowrap;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  .if-table-date-primary {
  color: var(--if-text-strong, #334155);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.35;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  .if-table-date-time {
  margin-top: 2px;
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  tbody
  tr {
  transition: background-color 0.15s ease;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  tbody
  tr:hover
  td {
  background: color-mix(
    in srgb,
    var(--if-secondary-soft, #f2f8fb),
    #ffffff 45%
  );
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  tbody
  tr:last-child
  td {
  border-bottom: 0;
}

:is(.if-data-table, .user-table, .home-data-table) .if-table-sort {
  color: #ffffff;
}

:is(.if-data-table, .user-table, .home-data-table)
  .if-table-sort:not(.if-table-sort-active)
  > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  font-weight: 900;
}

:is(.if-data-table, .user-table, .home-data-table)
  .if-table-sort-active
  > span {
  border-color: #ffffff;
  background: #ffffff;
  color: #0f172a;
}

.home-table-action-heading {
  width: 1%;
  min-width: 112px;
  text-align: center;
}

.home-table-action-heading .if-table-sort {
  width: 100%;
  justify-content: center;
}

:is(.if-table-actions, .user-table-actions) {
  justify-content: center;
}

:is(.if-table-actions-cell, .if-table-action-cell, .home-table-action-cell) {
  text-align: center;
}

/* Groups follows the same search / filters / count geometry as Forms. */
.groups-page > .if-table-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.groups-page > .if-table-toolbar .if-table-search {
  width: 100%;
  max-width: 380px;
}

.groups-page > .if-table-toolbar .if-table-count {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  white-space: nowrap;
}

.groups-page > .if-table-card .if-data-table {
  min-width: 860px;
}

/* Home table counts occupy the same right-hand toolbar column. */
.home-page .home-table-toolbar.if-table-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.home-page .home-table-toolbar .if-table-search {
  grid-column: 1;
  width: 100%;
  max-width: 380px;
}

.home-page .home-table-toolbar .if-table-count {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
}

/* Toolbar layout mirrors My Reviews: search left, paging right. */
:is(.forms-page, .submissions-page, .my-reviews-page) .if-table-toolbar-main,
.forms-page > .if-table-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(24px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

:is(.forms-page, .available-forms-page, .submissions-page, .my-reviews-page)
  .if-table-search {
  width: 100%;
  max-width: 380px;
}

/* Catalog filters need room for natural-language search and select labels. */
.available-forms-page > .available-forms-toolbar {
  grid-template-columns: minmax(300px, 1fr) minmax(0, auto) auto !important;
  gap: 14px !important;
}

.available-forms-page > .available-forms-toolbar .if-table-search {
  max-width: none;
  min-width: 0;
}

.available-forms-page
  > .available-forms-toolbar
  .available-forms-toolbar-summary {
  justify-self: end;
  white-space: nowrap;
}

.available-forms-page > .available-forms-toolbar .available-forms-filter-group {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.available-forms-page > .available-forms-toolbar .if-table-filters {
  flex-wrap: wrap !important;
}

:is(.forms-page, .submissions-page, .my-reviews-page) .if-table-count-paged {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: 0;
  justify-self: end;
  white-space: nowrap;
}

.forms-page > .if-table-toolbar .if-table-filters {
  justify-self: start;
}

@media (max-width: 900px) {
  .available-forms-page > .available-forms-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .available-forms-page > .available-forms-toolbar .if-table-search {
    grid-column: 1 / -1;
  }

  .available-forms-page
    > .available-forms-toolbar
    .available-forms-filter-group {
    min-width: 0;
  }

  :is(.forms-page, .submissions-page, .my-reviews-page) .if-table-toolbar-main,
  .forms-page > .if-table-toolbar {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .forms-page > .if-table-toolbar .if-table-filters {
    grid-column: 1 / -1;
  }

  .groups-page > .if-table-toolbar,
  .home-page .home-table-toolbar.if-table-toolbar {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .groups-page > .if-table-toolbar .if-table-filters {
    grid-column: 1 / -1;
  }

  .groups-page > .if-table-toolbar .if-table-count,
  .home-page .home-table-toolbar .if-table-count {
    grid-column: 2;
  }
}

@media (max-width: 680px) {
  .available-forms-page > .available-forms-toolbar {
    grid-template-columns: 1fr !important;
  }

  .available-forms-page > .available-forms-toolbar .if-table-search,
  .available-forms-page
    > .available-forms-toolbar
    .available-forms-filter-group,
  .available-forms-page
    > .available-forms-toolbar
    .available-forms-toolbar-summary {
    grid-column: 1;
    width: 100%;
    justify-self: stretch;
  }

  .available-forms-page
    > .available-forms-toolbar
    .available-forms-filter-group {
    align-items: flex-start;
    flex-direction: column;
  }

  :is(.forms-page, .submissions-page, .my-reviews-page) .if-table-toolbar-main,
  .forms-page > .if-table-toolbar {
    grid-template-columns: 1fr;
  }

  :is(.forms-page, .submissions-page, .my-reviews-page) .if-table-count-paged {
    width: 100%;
    justify-self: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .groups-page > .if-table-toolbar,
  .home-page .home-table-toolbar.if-table-toolbar {
    grid-template-columns: 1fr;
  }

  .groups-page > .if-table-toolbar .if-table-filters,
  .groups-page > .if-table-toolbar .if-table-count,
  .home-page .home-table-toolbar .if-table-count {
    grid-column: 1;
    justify-self: stretch;
  }
}

.if-table-pagination {
  margin-top: 0;
  min-height: 64px;
  padding: 14px 18px;
  border-top: 1px solid var(--if-border, #e2e8f0);
  border-radius: 0 0 var(--if-radius-card, 14px) var(--if-radius-card, 14px);
  background: var(--if-surface-subtle, #fafbfc);
}

.if-table-pagination .if-table-count-paged,
.if-table-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.if-table-pagination .if-table-count-paged {
  margin-right: auto;
  gap: 14px;
  color: var(--if-text-muted, #64748b);
  font-size: 0.875rem;
  white-space: nowrap;
}

.if-table-pagination .if-table-count-paged > span,
.if-table-pagination .if-page-size-control {
  font-size: 0.875rem;
}

.if-table-pagination .if-page-size-control select {
  background-color: var(--if-surface, #ffffff);
}

.if-table-pagination .if-table-count-paged strong {
  color: var(--if-text-strong, #334155);
}

.if-table-pagination .if-pagination-pages {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.if-table-pagination .if-pagination-page {
  min-width: 44px;
}

.if-table-pagination .if-pagination-page-active:disabled {
  opacity: 1;
  cursor: default;
}

.if-pagination-ellipsis {
  display: inline-grid;
  min-width: 24px;
  min-height: 36px;
  place-items: center;
  color: var(--if-text-muted, #64748b);
  font-weight: 700;
}

@media (max-width: 680px) {
  .if-table-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .if-table-page-actions {
    justify-content: space-between;
  }

  .if-table-pagination .if-pagination-pages {
    order: 3;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

/* A semantic pill defines the alignment for its complete column. */
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  td:has(
    :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  ) {
  text-align: center;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  td:has(
    :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  > :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge) {
  margin-inline: auto;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  td:has(
    :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  > div:has(
    > :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  ) {
  justify-content: center;
  justify-items: center;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(1)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(1),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(2)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(2),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(3)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(3),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(4)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(4),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(5)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(5),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(6)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(6),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(7)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(7),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(8)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(8),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(9)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(9),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(10)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(10),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(11)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(11),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(12)
      :is(.if-table-badge, .if-status-pill, .if-table-status, .if-status-badge)
  )
  thead
  th:nth-child(12) {
  text-align: center !important;
  --if-table-header-justify: center;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  thead
  th
  .if-table-sort {
  justify-content: var(--if-table-header-justify, flex-start) !important;
}

/*
 * Some feature tables use domain-specific names such as incident-pill,
 * user-status, or group-pill. Treat every pill/badge inside a data table as
 * the same semantic table content without affecting pills elsewhere.
 */
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  td
  :is([class*="pill"], [class*="badge"], .user-status, .if-table-status) {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  td:has(
    :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  ) {
  text-align: center;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(1)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(1),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(2)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(2),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(3)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(3),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(4)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(4),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(5)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(5),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(6)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(6),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(7)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(7),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(8)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(8),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(9)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(9),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(10)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(10),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(11)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(11),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(12)
      :is([class*="pill"], [class*="badge"], .user-status, .if-table-status)
  )
  thead
  th:nth-child(12) {
  text-align: center !important;
  --if-table-header-justify: center;
}

/* Button/action columns follow the same centered-column contract. */
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  td:has(:is(button, .if-btn, .if-table-action, .if-row-menu-trigger)) {
  text-align: center;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table)
  td:has(:is(button, .if-btn, .if-table-action, .if-row-menu-trigger))
  > :is(
    .if-table-actions,
    .if-table-actions-compact,
    .if-table-row-actions,
    .user-actions
  ) {
  justify-content: center;
  margin-inline: auto;
}

:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(1)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(1),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(2)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(2),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(3)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(3),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(4)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(4),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(5)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(5),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(6)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(6),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(7)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(7),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(8)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(8),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(9)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(9),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(10)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(10),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(11)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(11),
:is(.if-data-table, .user-table, .home-data-table, .database-lookup-table):has(
    tbody
      td:nth-child(12)
      :is(button, .if-btn, .if-table-action, .if-row-menu-trigger)
  )
  thead
  th:nth-child(12) {
  text-align: center !important;
  --if-table-header-justify: center;
}

/* AI enable switches belong to their section headings, not in a detached row. */
.builder-ai-review-title-row {
  align-items: center;
  gap: 12px;
}

.builder-ai-review-title-row .builder-ai-review-title-toggle {
  width: auto;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--if-text-strong);
  font-size: 0.78rem;
  line-height: 1;
}

.builder-ai-review-title-row .builder-ai-review-title-toggle > span {
  order: 1;
}

.builder-ai-review-title-row
  .builder-ai-review-title-toggle
  > input[type="checkbox"] {
  order: 2;
  align-self: center;
  margin: 0;
}
/* Content-sized option rows
   Keep long user-defined labels inside their own row instead of allowing the
   text to overlap the next option in narrow panels and responsive layouts. */
:is(
  .builder-flow-field-option,
  .builder-database-column-option,
  .builder-toggle-row,
  .builder-property-toggle,
  .builder-table-section-row-option,
  .notification-check-row,
  .submissions-export-status-option,
  .email-toggle-row
) {
  min-width: 0;
  height: auto;
  align-items: flex-start;
}

:is(
    .builder-flow-field-option,
    .builder-database-column-option,
    .builder-table-section-row-option,
    .notification-check-row,
    .submissions-export-status-option,
    .email-toggle-row
  )
  > input[type="checkbox"],
:is(
    .builder-flow-field-option,
    .builder-database-column-option,
    .builder-table-section-row-option,
    .notification-check-row,
    .submissions-export-status-option,
    .email-toggle-row
  )
  > input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 0.2em;
}

:is(
    .builder-flow-field-option,
    .builder-database-column-option,
    .builder-toggle-row,
    .builder-property-toggle,
    .builder-table-section-row-option,
    .notification-check-row,
    .submissions-export-status-option,
    .email-toggle-row
  )
  > span:not(.user-toggle) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

.builder-flow-field-list,
.builder-condition-options {
  grid-auto-rows: max-content;
  align-content: start;
}