/* 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(--gt-header-title-size);
  font-weight: var(--gt-header-title-weight, 600);
  line-height: var(--gt-header-title-line-height, 1.05);
  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;
}

.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-dev-portal {
  margin-top: 0;
}

.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-border-color);
  border-radius: var(--gt-settings-radius-control, 4px);
  background: transparent;
  color: var(--oj-core-text-color-primary);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.gt-drawer-logout-link:hover,
.gt-drawer-logout-link:focus {
  background: var(--oj-core-bg-color);
  border-color: var(--oj-core-text-color-primary);
}

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

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

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

/* ── 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 text: 13px for consistent visual density */
.oj-text-field-input,
.oj-inputtext-input,
.oj-textarea-input {
  font-size: var(--type-label-size);
}

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