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

/* Beats JET's .oj-flex-bar-end padding-right:8px (same element, same
   specificity, load-order dependent) with a higher-specificity selector
   instead of relying on cascade order. */
.gt-app-shell-header-inner .gt-app-shell-actions {
  padding-right: 16px;
}

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

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


/* ── Horizontal tabs (GT4-2741) ─────────────────────────────────────────── */
/* ONE style for every horizontal tab set, in either implementation:

     JET     <oj-c-tab-bar class="gt-tabs" …>
     custom  <div class="gt-tabs" role="tablist">
               <button class="gt-tab" role="tab" aria-selected={…}>
                 Label <span class="gt-tab-count">3</span>
               </button>
             </div>

   Left-aligned, secondary text; the selected tab is primary text at medium
   weight over a 2px brand underline that sits on the bar's 1px divider. The
   selected state is ALWAYS read from aria-selected — there is no "active"
   class, so a custom tab set cannot look selected without saying so to a
   screen reader.

   Modifiers, both for a bar hosted by a row that already draws its own
   bottom edge:
     .gt-tabs-bare     no divider, and JET's own tab layout is left alone
                       (the Form Builder page-tab conveyor, the Logic Source
                       root header)
     .gt-tabs-compact  tight padding and gap for a strip that shares a header
                       row with other controls (nested Logic Source groups)

   JET renders oj-c-tab-bar internals with hashed theme classes, hence the
   attribute selectors; `!important` marks the declarations JET would
   otherwise win. Not for vertical rails or segmented controls. */

.gt-tabs {
  --oj-c-PRIVATE-DO-NOT-USE-tab-bar-selection-indicator-color: var(--gt-brand-primary);
}

.gt-tabs:not(.gt-tabs-bare) {
  border-bottom: 1px solid var(--oj-core-divider-color);
}

.gt-tabs[role="tablist"],
.gt-tabs:not(.gt-tabs-bare) [role="tablist"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
}

.gt-tabs:not(.gt-tabs-bare) [role="tablist"] {
  padding: 0;
  margin: 0;
  min-height: auto;
  width: auto;
}

.gt-tabs [class*="SelectionIndicator"],
.gt-tabs [class*="selectionIndicator"] {
  background-color: var(--gt-brand-primary) !important;
}

/* Custom flavour: strip the native button chrome. Declared before the shared
   tab rule so that rule's underline survives the border reset. */
.gt-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: inherit;
  line-height: var(--line-height-tight);
  gap: var(--space-2);
  /* Keep the underline on the divider even beside a taller sibling control. */
  align-self: flex-end;
}

.gt-tabs [class^="TabBarItemBaseTheme_baseTheme"],
.gt-tab {
  height: auto !important;
  padding: 10px 4px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: center;
  font-size: var(--type-label-size) !important;
  font-weight: var(--font-weight-normal);
  color: var(--oj-core-text-color-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

/* A JET tab is 4px of item padding plus 4px on its inner flex row (below);
   the custom tab carries both on the button so the two flavours share one
   label inset and one underline width. */
.gt-tab {
  padding: 10px var(--space-2);
}

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

.gt-tabs [class^="TabBarItemBaseTheme_baseTheme"] [class*="tabBarItemLabel"] {
  font-size: var(--type-label-size) !important;
  line-height: var(--line-height-tight);
}

.gt-tabs [class^="TabBarItemBaseTheme_baseTheme"]:hover,
.gt-tab:hover {
  color: var(--oj-core-text-color-primary);
}

.gt-tabs [class^="TabBarItemBaseTheme_baseTheme"][aria-selected="true"],
.gt-tab[aria-selected="true"] {
  border-bottom-color: var(--gt-brand-primary) !important;
  border-bottom-width: 2px;
  color: var(--oj-core-text-color-primary);
  font-weight: var(--font-weight-medium);
}

.gt-tabs-compact[role="tablist"] {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.gt-tabs-compact > .gt-tab {
  padding: var(--space-1) 2px;
}

/* Count pill — one look for a tab's count in both flavours: `.gt-tab-count`
   on a custom tab, and the badge JET renders for a TabData `badge`. */
.gt-tab-count,
.gt-tabs [data-oj-tab-badge] > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--oj-core-bg-color-secondary, var(--gt-bg-section));
  color: var(--oj-core-text-color-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

/* The JET tab's inner row has its gap zeroed above, so space the pill here. */
.gt-tabs [data-oj-tab-badge] {
  display: inline-flex;
  margin-left: var(--space-2);
}

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

/* The "N more" line inside the Forms folder (Fixes 18, G966): secondary text. The "Find a form type" box
   reuses the .gt-drawer-filter rules below. */
.gt-drawer-more {
  color: var(--oj-core-text-color-secondary);
  cursor: default;
}

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

/* Drawer nesting (Frontend 40): a folder's children sit one clear step in from the folder's own label, and a rail
   under the folder's icon runs the length of its children, so a sub-folder (Configuration under Form Builder) never
   reads as a sibling. JET's own indent is 16px, the same as the top level's padding, which drew every depth at one x. */
.gt-drawer-navlist {
  --oj-navigation-list-indent-width: 56px;
}
.gt-drawer-navlist.oj-navigationlist-vertical:not(.oj-navigationlist-slider) .oj-navigationlist-depth-2 .oj-navigationlist-item-content {
  padding-left: 88px;
}
.gt-drawer-navlist.oj-navigationlist-vertical .oj-navigationlist-depth-1 .oj-navigationlist-item-label,
.gt-drawer-navlist.oj-navigationlist-vertical .oj-navigationlist-depth-2 .oj-navigationlist-item-label {
  font-weight: 400;
}
.gt-drawer-navlist .oj-navigationlist-item-element .oj-navigationlist-group {
  position: relative;
}
.gt-drawer-navlist .oj-navigationlist-item-element .oj-navigationlist-group::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--oj-core-divider-color);
  pointer-events: none;
}
.gt-drawer-navlist .oj-navigationlist-item-element .oj-navigationlist-group .oj-navigationlist-group::before {
  left: 75px;
}

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

  /* GT4-864: three crumbs share ~120px here, so each ellipsizes to a single
     letter. Show only the current (last) crumb, at full legible width; the
     whole trail stays available via the h1's `title` tooltip. */
  .gt-app-shell-header-crumbs > .gt-crumb,
  .gt-app-shell-header-crumbs > .gt-crumb-link,
  .gt-app-shell-header-crumbs > .gt-crumb-sep {
    display: none;
  }

  .gt-app-shell-header-crumbs > .gt-crumb:last-child,
  .gt-app-shell-header-crumbs > .gt-crumb-link:last-child {
    display: block;
    max-width: 100%;
    color: var(--oj-core-text-color-primary);
    font-weight: var(--font-weight-semibold);
    /* --text-lg leaves "Access Request" ellipsized next to Exit / Reset /
       the panel toggle; one step down fits the page name whole. */
    font-size: var(--text-md);
  }

  /* Exit / Reset / panel toggle shrink with the header but stay tappable. */
  .gt-app-shell-actions button,
  .gt-app-shell-actions oj-c-button,
  .gt-app-shell-actions oj-c-progress-button {
    min-height: 40px;
    height: 40px;
  }

  .gt-app-shell-actions oj-c-button.gt-action-icon-only,
  .gt-app-shell-actions oj-c-button.gt-action-icon-only .oj-button-button {
    min-width: 40px;
    width: 40px;
  }

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

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

/* GT4-2387: the app-level prompt dialog (app.tsx, portaled to document.body)
   is a PEER top-level layer of any dialog it is opened from (e.g. Data Pool
   "Add Source", Logic Source Expand). JET appends a new layer after the
   opener's and removes it on close, so the prompt is always the later
   sibling — but the +1 focus bump above let the still-focused opener paint
   over it (and its modal backdrop over the prompt), so the prompt could never
   be clicked into focus. Outrank a focused EARLIER sibling only: once focus
   moves into the prompt the normal rules apply, and dialogs opened later
   (Submit Feedback, session timeout) still take the top once focused.
   Stays below the feedback trigger's calc(var(--z-dialog) + 10).
   :has() because JET reparents the dialog content (see gt-picker-styles.css). */
.oj-popup-layer.oj-focus-within ~ .oj-popup-layer:has(.gt-app-prompt-dialog-body) {
  z-index: calc(var(--z-dialog) + 2) !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);
}

/* GT4-2127: the white canvas surface both builders put their GtPage on.
 *
 * This is load-bearing, not decoration. JET paints a canvas field's disabled
 * fill as a TRANSLUCENT `rgba(22, 21, 19, 0.04)`, so what the author actually
 * sees is decided by whatever is painted behind it:
 *
 *   over this white surface   -> rgb(246, 246, 246)  reads as "display only"
 *   over the grey app content -> rgb(236, 236, 236)  reads as "switched off"
 *
 * The Form Builder had the white card and the Search Builder did not, which is
 * the entire difference Paul reported — same component, same tokens, different
 * surface. Kept in ONE place so the two canvases cannot drift apart again;
 * layout (flex, overflow, spacing) stays with each builder's own class.
 */
.gt-builder-canvas-surface {
  background: var(--nx-surface-default);
  border: 1px solid var(--oj-core-border-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 {
  /* JET does not define --oj-core-bg-color-secondary in this theme, so the
     chip painted transparent; the section grey is what Workflow's neutral
     pill uses (form-setup-page-layout.css). */
  background: var(--oj-core-bg-color-secondary, var(--gt-bg-section));
  color: var(--oj-core-text-color-secondary);
}

/* ── Inline alerts ──────────────────────────────────────────────────────── */
/* A one-line message with an optional trailing action (Try Again, Fix Tag).
   For a message with no action, prefer oj-c-message-banner (GtDrillBanner). */

/* Inline notice bar. Deliberately the quiet, compact house shape already used
   by the Valid Values card (.gt-vl-warning) and the field-definition manager
   (.gt-fdm-banner): tinted background, soft 1px border, small text at normal
   weight. NOT oj-c-message-banner — that draws Redwood's own palette at page
   weight, which reads as a different app inside a builder card. */
.gt-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--type-label-size);
  line-height: var(--line-height-normal);
}

.gt-alert-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Keeps a leading icon from being squeezed by a long message. */
.gt-alert > [class^="oj-ux-ico-"] {
  flex: 0 0 auto;
}

.gt-alert-error {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

.gt-alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

/* Quiet destructive button: a borderless oj-c-button whose label is danger
   text (Remove Condition, Remove). Promoted from the original Automations
   editor's .gt-automations-danger-btn (gt-automations-styles.css:109-119 at
   the fork) so every screen draws a quiet Remove the same way. Only the base
   colour of the Core Pack borderless variant is set. */
.gt-danger-btn {
  --oj-c-base-button-variants-borderless-base-color: var(--gt-danger);
}

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