/* GT eFlow application styles. Design tokens live in gt-nexus-tokens.css. */

:root {
  /* ── JET framework override ─────────────────────────────────────────── */
  --oj-private-tree-view-global-load-indicator-default: none;

  /* ── App shell brand & layout tokens ────────────────────────────────── */
  /* (defined here per design system §3a — app-shell specific, not reusable) */
  --gt-brand-strip-image: url("/styles/images/AbstractArtGTColors-highres-trimmed/w_2560_trans.png");
  --gt-header-block-padding: 11px;
  --gt-header-inline-padding: 0.25rem;
  --gt-header-start-padding: 14px;
  --gt-header-min-height: 64px;
  --gt-header-nav-gap: 11px;
  --gt-header-title-gap: 4px;
  --gt-header-title-icon-gap: clamp(4px, 0.2em, 7px);
  --gt-header-title-size: var(--oj-typography-heading-lg-font-size);
  --gt-header-title-weight: var(--oj-typography-heading-lg-font-weight);
  --gt-header-title-line-height: var(--oj-typography-heading-lg-line-height);
  --gt-header-title-color: var(--oj-core-text-color-primary);
  --gt-table-max-width: 1300px;
  --oj-core-z-index-popup: var(--z-dropdown);
  --oj-core-z-index-dialog: var(--z-dialog);

  /* Backwards-compat alias — prefer --shadow-sm going forward */
  --gt-login-card-shadow: var(--shadow-sm);
}

html,
body,
app-root {
  width: 100%;
  height: 100%;
}

html,
body {
  font-family: var(--gt-font-family-base);
}

app-root {
  display: block;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#appContainer {
  display: flex;
  flex: 1 1 auto;
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#appContainer .appMainContent {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.app-shell > .oj-web-applayout-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

body,
body.oj-web-applayout-body {
  background-color: var(--oj-core-bg-color);
  max-height: 100vh;
  overflow: hidden;
}

.gt-app-shell-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  background: var(--oj-core-bg-color);
  border-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.gt-app-shell-header-inner {
  width: 100%;
  min-height: var(--gt-header-min-height, 64px);
  padding: var(--gt-header-block-padding, 11px) var(--gt-header-inline-padding, 0.25rem)
    var(--gt-header-block-padding, 11px) 0;
  gap: var(--gt-header-title-gap, 4px);
}

.gt-app-shell-header > .gt-app-shell-header-inner {
  padding-left: var(--gt-header-start-padding, 15px);
  padding-right: var(--gt-header-inline-padding, 0.25rem);
}

.gt-app-shell-brand {
  display: flex;
  align-items: center;
  gap: var(--gt-header-nav-gap, 5px);
  min-width: 0;
}

.gt-app-shell-nav-button {
  margin-inline-start: -0.57143rem;
  margin-inline-end: -0.125rem;
}

.gt-app-shell-header-title {
  margin: 0;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--gt-header-title-color, var(--oj-core-text-color-primary));
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Breadcrumb path rendered inline inside the header title (GT4-1007).
   Replaces the legacy 32px breadcrumb row beneath the toolbar. */
.gt-app-shell-header-crumbs {
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}
.gt-app-shell-header-crumbs .gt-crumb {
  min-width: 0;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-app-shell-header-crumbs .gt-crumb-root {
  color: var(--oj-core-text-color-primary);
  font-weight: var(--font-weight-semibold);
}
.gt-app-shell-header-crumbs .gt-crumb-current {
  color: var(--oj-core-text-color-secondary);
  font-weight: var(--font-weight-normal);
}
.gt-app-shell-header-crumbs .gt-crumb-link {
  all: unset;
  cursor: pointer;
  color: var(--oj-link-text-color, #006d86);
  font: inherit;
  font-weight: var(--font-weight-normal);
  min-width: 0;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-app-shell-header-crumbs .gt-crumb-link:hover {
  text-decoration: underline;
}
.gt-app-shell-header-crumbs .gt-crumb-link:focus-visible {
  outline: none;
  box-shadow: var(--nx-focus-ring);
  border-radius: var(--radius-md, 4px);
}
.gt-app-shell-header-crumbs .gt-crumb-sep {
  color: var(--oj-core-text-color-secondary);
  font-weight: var(--font-weight-normal);
  flex: 0 0 auto;
  user-select: none;
}

.gt-app-shell-title-with-popup {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gt-header-title-icon-gap, clamp(4px, 0.2em, 7px));
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

.gt-app-shell-info-button {
  flex-shrink: 0;
  margin-inline-start: 0;
}

.gt-app-shell-header .oj-button,
.gt-app-shell-header oj-c-button {
  flex-shrink: 0;
}

.gt-app-shell-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gt-app-shell-actions .gt-action-logout-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
}

.gt-app-shell-actions .gt-runtime-header-actions {
  margin-inline-end: 17px;
}

oj-c-button[chroming="outlined"] button,
oj-c-progress-button[chroming="outlined"] button {
  background-color: var(--oj-core-bg-color);
}

/* ── Button variant classes ──────────────────────────────────────────────── */
oj-c-button.primary button,
oj-c-progress-button.primary button {
  background-color: var(--oj-core-bg-color) !important;
}

oj-c-button.secondary button,
oj-c-progress-button.secondary button {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

oj-c-button.accent button,
oj-c-progress-button.accent button {
  background-color: var(--gt-brand-primary) !important;
  color: #ffffff !important;
}

oj-c-button.error button,
oj-c-progress-button.error button {
  background-color: var(--gt-danger) !important;
  color: #ffffff !important;
}

.gt-app-shell-actions button,
.gt-app-shell-actions oj-c-button,
.gt-app-shell-actions oj-c-progress-button {
  height: 36px;
  white-space: nowrap;
}

.gt-app-shell-actions oj-c-button.gt-action-icon-only {
  padding: 0;
  min-width: 0;
  width: 36px;
  display: inline-flex;
  justify-content: center;
}

.gt-app-shell-actions oj-c-button.gt-action-icon-only .oj-button-button {
  padding: 0;
  min-width: 36px;
  width: 36px;
  border: 0;
  justify-content: center;
}

.gt-app-shell-actions .config-toolbar,
.gt-app-shell-actions .page-config-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
}

.gt-header-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
}

.gt-header-actions-group .gt-save-btn-inactive {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.gt-app-shell-logo-img {
  height: 36px;
  width: auto;
}

.gt-app-shell-full-width {
  width: 100%;
}

.gt-app-shell-header-strip {
  background-image: var(--gt-brand-strip-image);
  background-position: center;
  background-size: cover;
  height: 6px;
  width: 100%;
  border-bottom-left-radius: var(--gt-settings-radius-surface, 6px);
  border-bottom-right-radius: var(--gt-settings-radius-surface, 6px);
}


[class^="TabBarItemBaseTheme_baseTheme"] [class^="FlexStyles_baseStyles"] {
  /* !important: overrides JET TabBarItemBaseTheme gap */
  gap: 0 !important;
  padding: 0 0.25rem;
}

#page-layout {
  flex-grow: 1;
  min-height: 100%;
  width: 100%;
  /* width: 60%; */
  /* max-width: 60%; */
  padding: 0 1rem 1rem;
}

#page-layout.homepage-layout {
  padding: 0;
}

#page-layout > gt-action-bar {
  box-sizing: border-box;
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-right: -1rem;
}

.homepage-layout > gt-home {
  margin-top: 0;
  display: block;
  min-height: 100%;
}

.toolbar-button {
  border: 1px solid var(--oj-core-border-color);
  background-color: inherit;
  border-radius: var(--gt-settings-radius-control, 4px);
  font-size: var(--icon-md);
  padding: 0.25rem;
  height: 36px;
  width: 36px;
  cursor: pointer;
}

.gt-search-type-toolbar-data-pool-fields {
  padding: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

/* Drawer host covers viewport; panel has its own scrollbar (Inset Layout) */

.gt-drawer-panel {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  /* independent scroll */
  display: flex;
  flex-direction: column;
  background: var(--oj-core-bg-color);
  border-right: 1px solid var(--oj-core-divider-color);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
  padding: 0 10px 16px;
}

.gt-drawer-user-panel {
  margin: 0 -10px 8px;
  padding: 16px 24px 12px;
  background: var(--oj-core-bg-color-secondary);
  border-bottom: 1px solid var(--oj-core-divider-color);
}

.gt-drawer-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

.gt-drawer-nav-button {
  flex-shrink: 0;
  margin-inline-start: -0.57143rem;
  margin-top: -2px;
}

.gt-drawer-user-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}

.gt-drawer-user-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.gt-drawer-user-icon {
  font-size: var(--type-heading-size);
}

.gt-drawer-logout-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 0 auto;
  padding: 5px 12px;
  min-height: 32px;
  border: 1px solid var(--oj-core-text-color-primary);
  border-radius: var(--gt-settings-radius-control, 4px);
  background: var(--oj-core-text-color-primary);
  color: var(--oj-core-bg-color);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.gt-drawer-logout-link:hover,
.gt-drawer-logout-link:focus {
  opacity: 0.9;
}

.gt-drawer-username {
  font-weight: var(--font-weight-semibold);
}

/* Menu filter box */
.gt-drawer-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 6px 10px;
  border: 1px solid var(--oj-core-divider-color);
  border-radius: var(--gt-settings-radius-control, 4px);
  background: var(--oj-core-bg-color);
}

.gt-drawer-filter-active {
  border-color: var(--gt-brand-secondary, #fd9f15);
  box-shadow: 0 0 0 1px var(--gt-brand-secondary, #fd9f15);
}

.gt-drawer-filter-icon {
  color: var(--oj-core-text-color-secondary);
  flex-shrink: 0;
}

.gt-drawer-filter-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--oj-core-text-color-primary);
}

.gt-drawer-filter-input:focus {
  outline: none;
}

.gt-drawer-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  border: none;
  background: transparent;
  color: var(--oj-core-text-color-secondary);
  cursor: pointer;
}

.gt-drawer-filter-clear:hover,
.gt-drawer-filter-clear:focus {
  color: var(--oj-core-text-color-primary);
}

.gt-drawer-filter-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: var(--gt-settings-radius-control, 4px);
  background: var(--oj-core-bg-color-secondary);
  color: var(--oj-core-text-color-secondary);
  font-size: var(--type-caption-size);
}

.gt-drawer-filter-badge-icon {
  color: var(--gt-brand-secondary, #fd9f15);
  flex-shrink: 0;
}

.gt-drawer-filter-badge-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gt-drawer-filter-empty {
  padding: 12px 10px;
  color: var(--oj-core-text-color-secondary);
  font-size: var(--type-caption-size);
}

/* oj-navigation-list text wrapping + category header styling */
.gt-drawer-navlist .oj-navigationlist-item-label {
  white-space: normal;
  line-height: var(--line-height-normal);
}

/* Active nav item — override JET indicator color to Nexus orange, add background */
.gt-drawer-navlist .oj-navigationlist-item.oj-selected > .oj-navigationlist-item-content {
  background: var(--oj-core-bg-color-secondary);
}
.gt-drawer-navlist {
  --oj-navigation-list-item-selection-indicator-color: var(--gt-brand-secondary, #fd9f15);
}

.gt-drawer-navlist .oj-navigationlist-item-content:hover,
.gt-drawer-navlist .oj-navigationlist-item-element:hover {
  background: var(--oj-core-bg-color-secondary);
}

.gt-drawer-navlist .oj-navigationlist-category > .oj-navigationlist-item-content .oj-navigationlist-item-label {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

oj-drawer-popup.gt-drawer-layout,
oj-drawer-popup.gt-drawer-layout .oj-drawer-full-height {
  max-width: 320px;
  width: 320px;
}

.gt-drawer-overlay {
  z-index: var(--z-modal);
}

/* Align navlist item content vertically */
.oj-navigationlist-item-element {
  display: flex;
  align-items: center;
}

/* Fallback/utility styles for required indicator alignment used by form field components */
.required-indicator-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.required-indicator {
  color: var(--oj-core-text-color-secondary);
  font-size: var(--type-caption-size);
}

/* Ensure popup sizing applies even when oj-popup is reparented to body */
oj-popup.gt-form-details-popup-host .gt-form-details-popup {
  padding: 18px 22px 16px;
  width: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

oj-popup.gt-form-details-popup-host .gt-form-details-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-body-size);
}

oj-popup.gt-form-details-popup-host .gt-form-details-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--type-body-size);
  color: var(--oj-core-text-color-primary);
}

@media (max-width: 700px) {
  :root {
    --gt-header-inline-padding: 0.125rem;
    --gt-header-title-size: 1.6rem;
  }
}

oj-popup.gt-form-details-popup-host .gt-form-details-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

oj-popup.gt-form-details-popup-host {
  border: 1px solid var(--oj-core-border-color);
  border-radius: var(--gt-settings-radius-control, 4px);
  background: var(--oj-core-bg-color);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  max-width: 90vw;
}

/* ─── Semantic label/title classes (replacing misused h4/h5/h6 elements) ─── */

.gt-section-label {
  display: block;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--oj-core-text-color-primary);
  margin: 0 0 8px;
}

.gt-section-title {
  font-size: var(--type-title-size);
  font-weight: var(--font-weight-semibold);
  color: var(--oj-core-text-color-primary);
  margin: 0 0 8px;
}

.gt-subsection-title {
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--oj-core-text-color-primary);
  margin: 8px 0;
}

.gt-page-breadcrumb {
  display: block;
  font-size: var(--type-label-size);
  color: var(--oj-core-text-color-secondary);
  text-decoration: underline;
  margin: 0;
}

.gt-page-heading {
  font-size: var(--type-heading-size);
  font-weight: var(--font-weight-semibold);
  margin: 6px 0 0;
}

.gt-card-item-title {
  display: block;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--oj-core-text-color-primary);
  margin: 0;
}

.gt-config-section-title {
  display: block;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--oj-core-text-color-secondary);
  border-bottom: 1px solid var(--oj-core-divider-color);
  padding-bottom: 8px;
  margin: 0 0 12px;
}

/* --- Table width standardization (GT4-589) --- */
oj-c-table,
oj-table {
  display: flex;
  width: 100%;
}

/* Modern table appearance (GT4-589) */
oj-c-table,
oj-table {
  border-radius: var(--radius-lg, 6px);
  border: 1px solid var(--oj-core-divider-color);
  overflow: hidden;
}

.gt-modern-table {
  --oj-collection-bg-color: var(--oj-core-bg-color);
  --oj-collection-border-color: var(--oj-core-divider-color);
  --oj-collection-free-space-bg-color: var(--oj-core-bg-color);
  --oj-collection-header-bg-color: var(--oj-core-bg-color-secondary);
  --oj-collection-header-text-color: var(--oj-core-text-color-secondary);
  --oj-collection-header-font-size: var(--type-label-size);
  --oj-collection-header-font-weight: var(--font-weight-semibold);
  --oj-collection-grid-cell-padding: var(--space-3, 12px);
  --oj-collection-grid-row-height: 2.75rem;
  --oj-table-cell-padding-horizontal: var(--space-4, 16px);
  --oj-c-EXPERIMENTAL-DO-NOT-USE-table-cell-padding-horizontal: var(--space-4, 16px);
  --oj-c-EXPERIMENTAL-DO-NOT-USE-table-cell-padding-vertical: var(--space-3, 12px);
  --oj-c-EXPERIMENTAL-DO-NOT-USE-table-header-cell-padding-full-horizontal: var(--space-4, 16px);
  --oj-c-EXPERIMENTAL-DO-NOT-USE-table-header-cell-padding-vertical: var(--space-3, 12px);
  --oj-c-EXPERIMENTAL-DO-NOT-USE-table-row-height: 2.75rem;
  --oj-c-EXPERIMENTAL-DO-NOT-USE-table-header-row-height: 2.75rem;
  background: var(--oj-core-bg-color);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.gt-modern-table .oj-table-column-header-cell,
.gt-modern-table [data-oj-cell-type="header"] {
  background: var(--oj-core-bg-color-secondary);
  border-bottom: 2px solid var(--oj-core-divider-color);
  color: var(--oj-core-text-color-secondary);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.gt-modern-table .oj-table-data-cell,
.gt-modern-table [data-oj-cell-type="data"] {
  color: var(--oj-core-text-color-primary);
  font-size: var(--type-body-size);
}

.gt-modern-table .oj-table-body-row,
.gt-modern-table tr[role="row"] {
  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.gt-modern-table .oj-table-body-row:hover,
.gt-modern-table tr[role="row"]:hover {
  background: var(--nx-state-hover);
}

.gt-modern-table .oj-table-body-row.oj-selected,
.gt-modern-table tr[aria-selected="true"] {
  background: var(--nx-state-selected);
}

/* Keep modal dialogs above app chrome, sidebars, and transient overlays. */
.oj-component-overlay {
  background-color: var(--nx-modal-mask);
  z-index: var(--z-dialog-mask) !important;
}

.oj-dialog-layer {
  z-index: var(--z-dialog) !important;
}

.oj-dialog-layer.oj-focus-within {
  z-index: calc(var(--z-dialog) + 1) !important;
}

/* Some JET components use popup layers instead of dialog layers (e.g. oj-c-dialog). */
.oj-popup-layer {
  z-index: var(--z-dialog) !important;
}

.oj-popup-layer.oj-focus-within {
  z-index: calc(var(--z-dialog) + 1) !important;
}

/* Collapse empty OJ dialog headers (no title, no header slot) */
[class*="dialogHeaderStyle"]:has(> h1:only-child:empty) {
  display: none;
}

/* Remove Oracle dialog header texture — use plain white */
[class*="dialogHeaderDecorationStyle"] {
  background-image: none !important;
}

/* Space adjacent items in any dialog footer — intentionally global.

   oj-c-dialog wraps the slot="footer" content in its own
   DialogStyles_dialogFooterStyle__* container (CSS Modules with a
   hashed suffix). That wrapper does the layout — adding gap on my own
   slot div has no effect because the outer wrapper sets the cell
   widths. Target the wrapper's hashed class directly so the gap
   applies wherever JET's footer container lives.

   `gap` is a no-op on a non-flex/non-grid parent, so this only adds
   spacing where JET's footer is already laid out as flex/grid (the
   common case across every oj-c-dialog in the app). Any dialog that
   needs different spacing can override `gap` on its own footer slot
   class — don't rip this rule out.

   Legacy oj-dialog uses a plain slot, so the simple sibling-margin
   rule covers it. */
oj-c-dialog [class*="dialogFooterStyle"],
oj-c-dialog [slot="footer"] {
  gap: var(--space-2, 8px);
}
oj-dialog [slot="footer"] > * + * {
  margin-inline-start: var(--space-2, 8px);
}

/* Brand strip under inline title inside dialog body */
.gt-action-bar-inline-title::after {
  content: "";
  display: block;
  background-image: var(--gt-brand-strip-image);
  background-position: center;
  background-size: cover;
  height: 6px;
  margin-top: 6px;
}

/* ── Form Setup: off-white body canvas ────────────────────────── */
.gt-form-setup-body {
  background-color: var(--gt-bg-section);
}

.gt-form-setup-body .appMainContent {
  background-color: var(--gt-bg-section);
}

/* ── Form Setup: compact shell header (20px/600, 40px height) ── */
.gt-form-setup-active .gt-app-shell-header-title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
}

.gt-form-setup-active .gt-app-shell-header-inner {
  min-height: 40px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.gt-form-setup-active .gt-app-shell-actions button,
.gt-form-setup-active .gt-app-shell-actions oj-c-button,
.gt-form-setup-active .gt-app-shell-actions oj-c-progress-button {
  height: 30px;
}

.gt-form-setup-body .gt-integration-placeholder {
  background: var(--oj-core-bg-color);
  border: 1px solid var(--oj-core-divider-color);
  border-radius: var(--radius-lg);
  margin: 16px;
  padding: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL UTILITY CLASSES
   Shared patterns — use these instead of re-implementing in component CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cards / Panels ─────────────────────────────────────────────────────── */

.gt-card {
  background: var(--nx-surface-default);
  border: 1px solid var(--oj-core-divider-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.gt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--oj-core-divider-color);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  color: var(--oj-core-text-color-primary);
}

.gt-card-body {
  padding: var(--space-4);
}

/* Card-header title + meta (promoted from gt-search-criteria so all card    */
/* consumers share the same treatment).                                      */
.gt-card-header-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--oj-core-text-color-primary);
}

.gt-card-header-meta {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-normal);
  color: var(--oj-core-text-color-secondary);
}

/* Right-aligned footer actions inside a card body (e.g. a Delete button).   */
.gt-card-footer-actions {
  margin-top: var(--space-2);
  text-align: right;
}

/* Centered full-page status message (loading / no-data states).             */
.gt-page-message {
  text-align: center;
  padding: var(--space-8);
  color: var(--oj-core-text-color-secondary);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */

.gt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-medium);
  height: var(--nx-tag-height);
  white-space: nowrap;
  line-height: 1;
}

.gt-badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.gt-badge-error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.gt-badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.gt-badge-info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.gt-badge-neutral {
  background: var(--oj-core-bg-color-secondary);
  color: var(--oj-core-text-color-secondary);
}

/* ── Empty States ───────────────────────────────────────────────────────── */

.gt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  border: 2px dashed var(--oj-core-divider-color);
  border-radius: var(--radius-lg);
  color: var(--oj-core-text-color-secondary);
}

.gt-empty-state-icon {
  font-size: var(--icon-xl);
  width: var(--icon-xl);
  height: var(--icon-xl);
  margin-bottom: var(--space-3);
  opacity: 0.5;
  flex-shrink: 0;
}

.gt-empty-state-title {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  color: var(--oj-core-text-color-primary);
  margin-bottom: var(--space-1);
}

.gt-empty-state-description {
  font-size: var(--type-body-size);
  max-width: 360px;
}

/* ── List Item Interactive States ───────────────────────────────────────── */

.gt-list-item {
  transition: var(--transition-fast);
}

.gt-list-item:hover {
  background-color: var(--nx-state-hover);
}

.gt-list-item:active {
  background-color: var(--nx-state-pressed);
}

.gt-list-item[aria-selected="true"] {
  background-color: var(--nx-state-selected);
}

.gt-list-item[aria-disabled="true"] {
  background-color: var(--nx-disabled-bg);
  color: var(--nx-disabled-text);
  pointer-events: none;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
/* Apply class="gt-scroll" to any scrollable container to get consistent styling. */

.gt-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--oj-core-border-color) transparent;
}

.gt-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.gt-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.gt-scroll::-webkit-scrollbar-thumb {
  background: var(--oj-core-divider-color);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}

.gt-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--oj-core-text-color-secondary);
  background-clip: content-box;
}

/* ── Layout Utilities ───────────────────────────────────────────────────── */
/* Flex scroll child — apply to flex children that need overflow scrolling. */
/* Prevents the "flex child ignores overflow" issue without repeating min-height: 0. */

.gt-flex-scroll-child {
  min-height: 0;
  min-width: 0;
}

/* ── Typography Utilities ───────────────────────────────────────────────── */

.gt-text-primary   { color: var(--oj-core-text-color-primary); }
.gt-text-secondary { color: var(--oj-core-text-color-secondary); }
.gt-text-danger    { color: var(--gt-danger); }
.gt-text-success   { color: var(--gt-success); }

/* ── Background Utilities ───────────────────────────────────────────────── */

.gt-surface     { background-color: var(--oj-core-bg-color); }
.gt-section-bg  { background-color: var(--gt-bg-section); }

/* ── Spacing Utilities ──────────────────────────────────────────────────── */

.gt-mt-sm  { margin-top: var(--space-2); }   /* 8px  */
.gt-mt-md  { margin-top: var(--space-3); }   /* 12px */
.gt-mt-lg  { margin-top: var(--space-4); }   /* 16px */
.gt-mb-sm  { margin-bottom: var(--space-2); }
.gt-mb-md  { margin-bottom: var(--space-3); }
.gt-mb-lg  { margin-bottom: var(--space-4); }
.gt-gap-sm { gap: var(--space-2); }
.gt-gap-md { gap: var(--space-3); }

/* ── Flex Utilities ─────────────────────────────────────────────────────── */

.gt-flex-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.gt-flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.gt-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Page Layout ────────────────────────────────────────────────────────── */
/* Base page canvas. Apply to the outermost content div of any route page.  */
/* Provides: section background, full-height, standard 24px padding.        */

.gt-page {
  min-height: 100%;
  background: var(--nx-surface-ground);
  padding: var(--space-6);
}

/* Add alongside .gt-page to cap content width at 1300px. */
.gt-page-constrained > * {
  max-width: 1300px;
  width: 100%;
}

/* ── Global form field baseline ─────────────────────────────────────────── */
/* Single source of truth for all OJ form field appearance.                  */
/* Do NOT add .oj-label / .oj-text-field overrides to component CSS files.  */

/* Labels: 13px / 500-weight per design spec */
.oj-label {
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-medium);
}

/* Input container: 4px radius per design spec */
.oj-text-field .oj-text-field-container {
  border-radius: var(--radius-md);
}

/* Input value text: 14px (Nexus body role) for consistent visual density.
   GT4-1228: matched across both JET component generations. */
.oj-text-field-input,
.oj-inputtext-input,
.oj-textarea-input {
  font-size: var(--type-body-size);
}

/* GT4-1228 — Core Pack form fields render value text from the shared
   UNSAFE_TextField CSS module via font-size: var(--oj-c-body-md-font-size),
   which defaults to 16px. They do NOT emit the legacy .oj-text-field-input
   class, so the legacy rule above never reaches them. Pin the body-md token
   to the 14px body role so oj-c-* value text matches legacy. One token covers
   every TextField-based Core Pack field. This does NOT touch ::part(label),
   so scoped label customizations (e.g. gt-value-inputs.css 10px labels) are
   preserved. */
oj-c-input-text,
oj-c-select-single,
oj-c-select-multiple,
oj-c-input-number,
oj-c-text-area,
oj-c-input-password,
oj-c-input-date-picker,
oj-c-input-date-mask,
oj-c-input-time-mask {
  --oj-c-body-md-font-size: var(--type-body-size);
}

/* ── JET typography scale → Nexus scale ─────────────────────────────────── */
/* The Redwood theme keeps its body/button font sizes in rem against a 16px
   root (e.g. body-sm 0.859rem ≈ 13.74px, button-sm 0.859rem ≈ 13.75px,
   body-md 1rem = 16px). Those off-grid fractional sizes were never mapped to
   the Nexus scale, so body text scattered across 16 / 13.74 / 13.75px instead
   of snapping to the 14 / 13 / 11px token grid. Remap JET's typography tokens
   onto the Nexus roles so every JET control (buttons, labels, table cells,
   body copy) lands on the same scale as our own components. */
:root {
  --oj-typography-body-md-font-size: var(--type-body-size);   /* 16px → 14px */
  --oj-typography-body-sm-font-size: var(--type-label-size);  /* 13.74px → 13px */
  --oj-typography-body-xs-font-size: var(--type-caption-size);/* 12px → 11px */
  --oj-button-sm-font-size: var(--type-label-size);           /* legacy button 13.75px → 13px */
  --oj-c-base-button-font-size: var(--type-label-size);       /* Core Pack button 13.75px → 13px */
}

/* ── Form field annotation utilities ────────────────────────────────────── */
/* For custom (non-JET) HTML wrappers around form fields.                    */
/* Use these instead of hardcoded inline styles.                             */

.gt-field-label {
  display: block;
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-medium);
  color: var(--oj-core-text-color-primary);
  margin-bottom: var(--space-1);
}

.gt-field-help {
  font-size: var(--type-caption-size);
  color: var(--oj-core-text-color-secondary);
  margin-top: var(--space-1);
}

.gt-field-error {
  font-size: var(--type-caption-size);
  color: var(--gt-danger);
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GT4-1230: normalize leftover legacy oj-* INPUT text to match Core Pack oj-c-*
   ─────────────────────────────────────────────────────────────────────────
   A few JET controls have NO Core Pack equivalent in 20.0.3 and stay legacy:
   oj-combobox-one / oj-combobox-many, oj-input-time, oj-input-date-time. Their
   editable value renders through the legacy .oj-text-field-input element, which
   the "Global form field baseline" above pins to --type-label-size (13px). The
   migrated oj-c-* controls set no explicit font-size and inherit ~14px, so the
   leftover legacy inputs looked a step smaller — the root of GT4-1230.

   Bump just those leftover legacy input values to the repo's 14px body token
   (--type-body-size, same scale oj-c-* inherits) so every form-control value
   reads at one size. Uses the repo --type-* tokens to stay consistent with the
   single-source-of-truth baseline above (not raw --oj-typography-* tokens).

   Labels are intentionally left to the baseline (.oj-label → --type-label-size):
   label/hint text already matches across both generations, so it is not touched
   here. NOTE: these selectors are global; legacy controls on runtime form pages
   are affected too — that is the intended consistency outcome.
   ═══════════════════════════════════════════════════════════════════════════ */
oj-combobox-one .oj-text-field-input,
oj-combobox-one .oj-combobox-input,
oj-combobox-many .oj-text-field-input,
oj-combobox-many .oj-combobox-input,
oj-combobox .oj-text-field-input,
oj-combobox .oj-combobox-input,
oj-input-time .oj-text-field-input,
oj-input-date-time .oj-text-field-input,
oj-combobox-many .oj-combobox-selected-choice .oj-combobox-input,
oj-combobox-many .oj-combobox-selected-choice-label {
  font-size: var(--type-body-size);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Draggable element — shared treatment (GT4-1238)
   One look for every draggable item (Page Builder palette rows, Logic Source
   bank chips). Spec: .claude/plans/draggable-element-spec.md. Layout (full-width
   row vs. inline chip) is left to the consuming component; this class owns only
   the visual treatment: pale-blue fill, near-black border, handle/icon/label.
   ═══════════════════════════════════════════════════════════════════════════ */
.nx-draggable {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4) 0 var(--space-2);
  box-sizing: border-box;
  background: var(--nx-drag-surface);
  border: 1px solid var(--color-near-black);
  border-radius: var(--radius-md);
  cursor: grab;
  user-select: none;
  /* Explicit property list — never `transition: all`. */
  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
              border-color var(--motion-duration-fast) var(--motion-ease-standard),
              transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.nx-draggable:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.nx-draggable:hover .nx-draggable__handle {
  color: var(--color-near-black);
}

.nx-draggable:active {
  cursor: grabbing;
}

.nx-draggable__handle {
  /* !important beats the JET oj-ux-ico-* font-size (equal specificity, load
     order is non-deterministic under AMD). */
  font-size: 14px !important;
  line-height: 1;
  color: var(--color-gray-dark);
  flex-shrink: 0;
}

.nx-draggable__icon {
  font-size: 17px !important;
  line-height: 1;
  color: var(--color-near-black);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.nx-draggable__name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-near-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}