/* Global UI stability layer for mobile-heavy screens (chat/tasks/checklists). */

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: contain;
  color: var(--color-slate-900);
}

html.dark body {
  color: var(--ui-text-strong);
}

:root {
  --ui-focus-border: var(--color-info-600);
  --ui-focus-ring: color-mix(in srgb, var(--color-info-600) 14%, transparent);
  --ui-text-strong: var(--color-slate-900);
  --ui-text-default: var(--color-slate-700);
  --ui-text-muted: var(--color-slate-500);
}

html.dark {
  --ui-focus-border: var(--brand-400);
  --ui-focus-ring: color-mix(in srgb, var(--brand-400) 18%, transparent);
  --ui-text-strong: var(--color-slate-100);
  --ui-text-default: var(--color-slate-200);
  --ui-text-muted: var(--color-slate-400);
}

/* Improve touch responsiveness and reduce accidental double-tap behavior. */
a,
button,
[role='button'],
input,
select,
textarea,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

/* Runtime focus normalization to avoid duplicate contours from mixed Tailwind/global rules. */
:where(a[href], button, input, select, textarea, summary, [role='button'], [tabindex]:not([tabindex='-1'])):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
}

:where(a[href], button, input, select, textarea, summary, [role='button'], [tabindex]:not([tabindex='-1'])):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Common form controls */
.ui-input,
.ui-select,
.generic-input,
.generic-select,
.generic-textarea,
.form-input,
.form-select,
.form-textarea,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
select,
textarea {
  color: var(--ui-text-strong);
  caret-color: var(--ui-focus-border);
}

.ui-input::placeholder,
.generic-input::placeholder,
.generic-textarea::placeholder,
.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-slate-400);
}

.ui-input:focus,
.ui-input:focus-visible,
.ui-select:focus,
.ui-select:focus-visible,
.generic-input:focus,
.generic-input:focus-visible,
.generic-select:focus,
.generic-select:focus-visible,
.generic-textarea:focus,
.generic-textarea:focus-visible,
.form-input:focus,
.form-input:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-textarea:focus,
.form-textarea:focus-visible,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):focus,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none !important;
  border-color: var(--ui-focus-border) !important;
  box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
  --tw-ring-shadow: 0 0 var(--color-black) !important;
  --tw-ring-offset-shadow: 0 0 var(--color-black) !important;
}

.ui-btn-secondary,
.ui-icon-btn,
.generic-btn-secondary,
.generic-btn-ghost {
  color: var(--ui-text-default);
}

.ui-btn-secondary:hover,
.ui-icon-btn:hover,
.generic-btn-secondary:hover,
.generic-btn-ghost:hover {
  color: var(--ui-text-strong);
}

/* Select2 keeps a separate black focus border by default; align it with the rest of UI. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--color-slate-200);
  color: var(--ui-text-strong);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ui-text-strong);
}

.select2-container--default .select2-selection__placeholder {
  color: var(--color-slate-600) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-primary-hover, #293444) !important;
  color: #fff !important;
}

html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-dropdown,
html.dark .select2-search__field {
  background-color: var(--color-slate-900) !important;
  border-color: var(--color-slate-800) !important;
  color: var(--ui-text-strong) !important;
}

html.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark .select2-results__option {
  color: var(--ui-text-strong) !important;
}

html.dark .select2-results__option--highlighted[aria-selected] {
  background-color: color-mix(in srgb, var(--brand-500) 18%, transparent) !important;
  color: var(--brand-100) !important;
}

html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: color-mix(in srgb, var(--brand-500) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--brand-500) 36%, transparent) !important;
  color: var(--brand-100) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--ui-focus-border) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
}

/* Keep scrolling reliable on touch screens across interactive elements. */
@media (pointer: coarse) {
  a,
  button,
  [role='button'],
  input,
  select,
  textarea,
  summary,
  label {
    touch-action: pan-y;
  }

  .overflow-y-auto,
  .overflow-auto,
  [style*='overflow-y: auto'],
  [style*='overflow: auto'] {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .overflow-x-auto,
  [style*='overflow-x: auto'] {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
}

/* Removed touch-action: manipulation for pointer: fine devices (laptops)
   to allow native touchpad scrolling behavior.
   @media (pointer: fine) {
     a,
     button,
     [role='button'],
     input,
     select,
     textarea,
     summary,
     label {
       touch-action: manipulation;
     }
   }
*/

/* Prevent iOS focus-zoom jumps on forms in mobile UI flows. */
@media (max-width: 1024px) {
  input,
  textarea,
  select {
    font-size: var(--font-size-base);
  }
}

/* Reduce motion and expensive effects when requested by user/OS. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .backdrop-blur,
  [class*='backdrop-blur'] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Runtime safe mode for low-end devices and unstable environments. */
.ui-safe-mode *,
.ui-safe-mode *::before,
.ui-safe-mode *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.ui-safe-mode .backdrop-blur,
.ui-safe-mode [class*='backdrop-blur'] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Mobile composition stability for fixed bars and drawers. */
@media (max-width: 768px) {
  .fixed,
  [class*='fixed'] {
    backface-visibility: hidden;
  }

  [data-bottom-sheet],
  [data-navigation-shell] {
    will-change: transform;
  }
}

/*
 * Canonical modal treatment: every application dialog opens as a right-side
 * drawer. The overlay remains full viewport while the actual panel stays
 * scrollable and keeps one predictable width at every breakpoint.
 */
.generic-side-modal:not(dialog) {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--app-z-modal, 1300) !important;
  display: flex;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgb(9 9 11 / 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms linear;
}

.generic-side-modal:not(dialog).generic-side-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The BPMN editor needs a workspace, not a narrow CRUD drawer. */
.form-modal-editor-panel {
  width: min(96vw, 118rem) !important;
  max-width: min(96vw, 118rem) !important;
}

/* Keep this selector as a content-based fallback for cached/older modal JS. */
#dynamic-form-modal:has([data-bp-page="template-editor"]) [data-dialog-panel] {
  width: min(96vw, 118rem) !important;
  max-width: min(96vw, 118rem) !important;
}

.form-modal-editor-body {
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#dynamic-form-modal:has([data-bp-page="template-editor"]) [data-form-modal-body] {
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.form-modal-editor-body > [data-form-modal-content] {
  min-height: 100%;
  overflow: visible;
  padding: 1.25rem;
}

@media (max-width: 768px) {
  .form-modal-editor-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .form-modal-editor-body > [data-form-modal-content] {
    padding: 0.75rem;
  }
}

dialog.generic-side-modal {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  z-index: var(--app-z-modal, 1300) !important;
  width: min(100%, var(--app-side-panel-width, 42rem)) !important;
  max-width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ds-surface-2, #fff) !important;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 180ms ease, opacity 180ms ease, visibility 180ms linear;
}

dialog.generic-side-modal[open],
dialog.generic-side-modal.generic-side-modal-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

dialog.generic-side-modal::backdrop { background: rgb(9 9 11 / 0.42); }

.generic-side-modal-panel {
  width: min(100%, var(--app-side-panel-width, 42rem)) !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-width: 0;
  min-height: 0;
  margin-left: auto;
  overflow: hidden;
  border-radius: 0 !important;
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.generic-side-modal.generic-side-modal-open .generic-side-modal-panel {
  transform: translateX(0);
}

.generic-side-modal-container {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* Existing overlays keep their click target, but the shared shell owns the dimming. */
.generic-side-modal > [data-dialog-backdrop],
       .generic-side-modal > .task-modal-backdrop,
       .generic-side-modal > [id$="-backdrop"],
.generic-side-modal > [aria-hidden="true"] {
  opacity: 0 !important;
}

/* The shared form rhythm is intentionally compact: fewer nested cards means a
   faster first paint and a stable layout for every create/edit screen. */
:where([data-page-layout="form"]) {
  --ui-form-gap: 1rem;
}

:where([data-page-layout="form"] form) { min-width: 0; }

/* Intrinsic content must shrink inside canonical grids before a local table or
   editor scroll region takes over. Do not change the document/canvas itself. */
@media screen {
  :where(.ui-page-stack > *, [data-ui-component="card"], [data-tab-panel]) {
    min-width: 0;
    max-width: 100%;
  }

  [data-ui-component="dropdown-menu"] {
    max-width: calc(100vw - 2rem);
    max-height: min(24rem, calc(100vh - 2rem));
    max-height: min(24rem, calc(100dvh - 2rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-wrap: anywhere;
  }
}

/* Desktop density contract. Small desktop content columns use less whitespace,
   while mobile/tablet and coarse pointers keep their established touch sizing.
   Tokens are inherited only by content descendants: the shell, print documents
   and coordinate-based editor canvases never acquire a scale or font change. */
@media screen and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  @container app-content (max-width: 1100px) {
    #app-content > * {
      --ui-content-density: compact;
      --ui-density-card-padding: 0.875rem;
      --ui-density-header-padding: 0.625rem 0.875rem;
      --ui-density-gap: 0.75rem;
      --ui-density-metric-icon: 1.75rem;
      --app-control-default-height: 40px;
      --app-control-compact-height: 36px;
    }

    #app-main #app-content :is(.ui-card-p4, .ui-card-p6, .ui-filter-card, .ui-stat-card, .ui-card.p-4, .ui-card.p-5, .ui-card.p-6),
    #app-main #app-content [data-ui-component="card"] > :is(.p-4, .p-5, .p-6),
    #app-main #app-content [data-task-card] > .p-4 {
      padding: var(--ui-density-card-padding);
    }

    #app-main #app-content .ui-card-header {
      padding: var(--ui-density-header-padding);
    }

    #app-main #app-content :is(.ui-page-stack, .task-card-grid, .hrm-dashboard-metrics, .hrm-approvals-metrics) {
      gap: var(--ui-density-gap);
    }

    #app-main #app-content .ui-page-stack:is(.space-y-4, .space-y-5, .space-y-6) > :not([hidden]) ~ :not([hidden]),
    #app-main #app-content [data-ui-component="card"] > :is(.space-y-4, .space-y-5, .space-y-6) > :not([hidden]) ~ :not([hidden]) {
      margin-top: var(--ui-density-gap);
      margin-bottom: 0;
    }

    #app-main #app-content :is(.ui-input, .ui-select):not([multiple]) {
      height: var(--app-control-default-height) !important;
      min-height: var(--app-control-default-height) !important;
    }

    #app-main #app-content :is(.ui-input-compact, .ui-select-compact) {
      height: var(--app-control-compact-height) !important;
      min-height: var(--app-control-compact-height) !important;
    }

    #app-main #app-content .ui-button-icon {
      width: 1rem;
      height: 1rem;
    }

    #app-main #app-content .ui-stat-card > div > .h-10.w-10,
    #app-main #app-content .hrm-dashboard-metric-icon,
    #app-main #app-content .hrm-approval-kind-icon {
      width: var(--ui-density-metric-icon);
      height: var(--ui-density-metric-icon);
    }

    #app-main #app-content .hrm-dashboard-metric {
      min-height: 80px;
      padding: var(--ui-density-card-padding);
      gap: 0.5rem;
    }

    #app-main #app-content .hrm-approval-card-header,
    #app-main #app-content .hrm-approval-card-footer {
      padding: var(--ui-density-header-padding);
      gap: var(--ui-density-gap);
    }

    #app-main #app-content .hrm-approval-material {
      padding: 0 var(--ui-density-card-padding) var(--ui-density-card-padding);
    }
  }
}

@media (max-width: 639px) {
  .generic-side-modal-panel { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .generic-side-modal,
  .generic-side-modal-panel {
    transition-duration: 0.01ms !important;
  }
}

/* Business process trigger builder -------------------------------------- */
.bp-trigger-page {
  --bp-ink: #15233b;
  --bp-muted: #6d7b90;
  --bp-line: #dce5ef;
  --bp-soft: #f6f9fc;
  --bp-blue: #2563eb;
  --bp-blue-soft: #edf4ff;
  --bp-green: #17835f;
  --bp-orange: #d96821;
  --bp-red: #e11d48;
  max-width: 1680px;
  margin: 0 auto;
  color: var(--bp-ink);
}

.bp-trigger-builder,
.bp-trigger-list-card {
  overflow: hidden;
  border: 1px solid var(--bp-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(23 49 84 / 0.06);
}

.bp-trigger-builder__topbar,
.bp-trigger-builder__workspace,
.bp-trigger-builder__footer,
.bp-trigger-list-card__header {
  padding: 1.25rem 1.5rem;
}

.bp-trigger-builder__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--bp-line);
}

.bp-trigger-builder__eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--bp-green);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bp-trigger-builder__title,
.bp-trigger-builder__subtitle,
.bp-trigger-list-card h3,
.bp-trigger-list-card p {
  margin: 0;
}

.bp-trigger-builder__title {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.2;
}

.bp-trigger-builder__subtitle {
  max-width: 58rem;
  margin-top: 0.4rem;
  color: var(--bp-muted);
  line-height: 1.5;
}

.bp-trigger-builder__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border: 1px solid #bde4d3;
  border-radius: 999px;
  background: #f1fbf5;
  color: #16704f;
  font-size: 0.78rem;
  font-weight: 700;
}

.bp-trigger-builder__state-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #20a26f;
  box-shadow: 0 0 0 4px rgb(32 162 111 / 0.12);
}

.bp-trigger-builder__workspace {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(360px, 1fr) minmax(280px, 320px);
  min-height: 560px;
  padding: 0;
}

.bp-trigger-builder__palette,
.bp-trigger-builder__properties {
  min-width: 0;
  padding: 1.25rem;
  background: var(--bp-soft);
}

.bp-trigger-builder__palette { border-right: 1px solid var(--bp-line); }
.bp-trigger-builder__properties { border-left: 1px solid var(--bp-line); }

.bp-trigger-builder__section-heading {
  color: #52627a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.bp-trigger-builder__section-heading + .bp-trigger-builder__hint { margin-left: auto; }

.bp-trigger-builder__section-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bp-trigger-builder__hint {
  color: #9aa9bb;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.bp-trigger-builder__palette-copy {
  margin: 0.65rem 0 1rem;
  color: var(--bp-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.bp-trigger-palette-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 58px;
  margin-top: 0.65rem;
  padding: 0.7rem;
  border: 1px solid #d7e2ee;
  border-radius: 12px;
  background: #fff;
  cursor: grab;
  user-select: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.bp-trigger-palette-card:hover,
.bp-trigger-palette-card:focus-visible {
  border-color: #9ab9df;
  box-shadow: 0 6px 16px rgb(37 99 235 / 0.1);
  transform: translateY(-1px);
}

.bp-trigger-palette-card:active { cursor: grabbing; }
.bp-trigger-palette-card.is-disabled { cursor: not-allowed; opacity: 0.48; }
.bp-trigger-palette-card.is-disabled:hover { box-shadow: none; transform: none; }

.bp-trigger-palette-card strong,
.bp-trigger-palette-card small,
.bp-trigger-flow-node strong,
.bp-trigger-flow-node small {
  display: block;
}

.bp-trigger-palette-card strong {
  color: var(--bp-ink);
  font-size: 0.82rem;
}

.bp-trigger-palette-card small {
  margin-top: 0.2rem;
  color: var(--bp-muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.bp-trigger-palette-card__icon,
.bp-trigger-flow-node__icon,
.bp-trigger-launch-card__icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 800;
}

.bp-trigger-palette-card__icon--source,
.bp-trigger-flow-node__icon--source { background: #eaf2ff; color: #2563eb; }
.bp-trigger-palette-card__icon--condition,
.bp-trigger-flow-node__icon--condition { background: #fff4e8; color: #d96821; }
.bp-trigger-palette-card__icon--context,
.bp-trigger-flow-node__icon--context { background: #eafbf3; color: #17835f; }
.bp-trigger-palette-card__icon--schedule,
.bp-trigger-flow-node__icon--schedule { background: #f1edff; color: #7357c9; }
.bp-trigger-palette-card__icon--security,
.bp-trigger-flow-node__icon--security { background: #fff0f3; color: #e11d48; }
.bp-trigger-flow-node__icon--launch { background: #eafbf3; color: #17835f; }

.bp-trigger-builder__legend {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 0.45rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bp-line);
  color: var(--bp-muted);
  font-size: 0.7rem;
}

.bp-trigger-builder__legend-mark {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.15rem;
  border-radius: 50%;
}

.bp-trigger-builder__legend-mark--required { background: var(--bp-blue); }
.bp-trigger-builder__legend-mark--optional { border: 2px solid #a9b8c8; }

.bp-trigger-builder__canvas-wrap { min-width: 0; background: #fff; }

.bp-trigger-builder__canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--bp-line);
}

.bp-trigger-builder__canvas-caption {
  display: block;
  margin-top: 0.35rem;
  color: var(--bp-muted);
  font-size: 0.8rem;
}

.bp-trigger-builder__ghost-button,
.bp-trigger-add-button {
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid #bfd0e1;
  border-radius: 9px;
  background: #fff;
  color: #52627a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.bp-trigger-builder__ghost-button:hover,
.bp-trigger-add-button:hover {
  border-color: #7da4d4;
  color: var(--bp-blue);
}

.bp-trigger-canvas {
  position: relative;
  min-height: 430px;
  padding: 1.25rem 1.5rem;
  background-color: #fbfdff;
  background-image: radial-gradient(#d6e1ed 1px, transparent 1px);
  background-size: 18px 18px;
}

.bp-trigger-flow-node {
  position: relative;
  display: flex;
  align-items: stretch;
  max-width: 660px;
  margin: 0 auto;
  cursor: grab;
}

.bp-trigger-flow-node:active { cursor: grabbing; }
.bp-trigger-flow-node.is-dragging { opacity: 0.45; }
.bp-trigger-flow-node.is-drag-over .bp-trigger-flow-node__body { border-color: var(--bp-blue); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12); }
.bp-trigger-flow-node.is-selected .bp-trigger-flow-node__body { border-color: #73a3dc; box-shadow: 0 7px 18px rgb(37 99 235 / 0.12); }

.bp-trigger-flow-node__rail {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 2.3rem;
  color: #99a9bc;
  font-size: 0.68rem;
  font-weight: 800;
}

.bp-trigger-flow-node__rail::after {
  position: absolute;
  top: 1.35rem;
  bottom: -0.2rem;
  width: 1px;
  background: #c8d7e7;
  content: "";
}

.bp-trigger-flow-node:last-of-type .bp-trigger-flow-node__rail::after,
.bp-trigger-flow-node--launch .bp-trigger-flow-node__rail::after { display: none; }

.bp-trigger-flow-node__body {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.75rem;
  min-width: 0;
  min-height: 66px;
  margin-bottom: 0.65rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d3dfeb;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.bp-trigger-flow-node__content { min-width: 0; flex: 1; }
.bp-trigger-flow-node__content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.bp-trigger-flow-node__content small { margin-top: 0.25rem; overflow: hidden; color: var(--bp-muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }

.bp-trigger-flow-node__badge {
  flex: 0 0 auto;
  padding: 0.25rem 0.4rem;
  border-radius: 5px;
  background: #eaf2ff;
  color: var(--bp-blue);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.bp-trigger-flow-node__badge--muted { background: #f0f3f7; color: #77879c; }
.bp-trigger-flow-node__badge--launch { background: #eafbf3; color: var(--bp-green); }

.bp-trigger-dropzone {
  display: grid;
  min-height: 34px;
  margin: 0 auto 0.6rem 2.3rem;
  border: 1px dashed #a9c1dc;
  border-radius: 8px;
  color: #7c91ab;
  font-size: 0.68rem;
  place-items: center;
  transition: background 140ms ease, border-color 140ms ease;
}

.bp-trigger-dropzone--bottom { margin: 0.1rem auto 0 2.3rem; }
.bp-trigger-dropzone.is-drag-over { border-color: var(--bp-blue); background: var(--bp-blue-soft); color: var(--bp-blue); }

.bp-trigger-flow-node[hidden],
.bp-trigger-properties-panel:not(.is-active) { display: none; }

.bp-trigger-builder__validation {
  min-height: 1.25rem;
  margin: 0.85rem auto 0;
  max-width: 660px;
  color: var(--bp-red);
  font-size: 0.78rem;
  font-weight: 600;
}

.bp-trigger-builder__properties-head { margin-bottom: 1rem; }
.bp-trigger-builder__selected-label { display: block; margin-top: 0.4rem; font-size: 1.05rem; font-weight: 800; }
.bp-trigger-properties-panel { min-width: 0; }
.bp-trigger-properties-help { margin: 0 0 1rem; color: var(--bp-muted); font-size: 0.78rem; line-height: 1.5; }

.bp-trigger-field { display: block; margin-bottom: 0.85rem; }
.bp-trigger-field > span { display: block; margin-bottom: 0.35rem; color: #52627a; font-size: 0.74rem; font-weight: 800; }
.bp-trigger-field input,
.bp-trigger-field select,
.bp-trigger-mapping-row input,
.bp-trigger-mapping-row select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #c9d7e6;
  border-radius: 9px;
  background: #fff;
  color: var(--bp-ink);
  font: inherit;
  font-size: 0.8rem;
}

.bp-trigger-field input:focus,
.bp-trigger-field select:focus,
.bp-trigger-mapping-row input:focus,
.bp-trigger-mapping-row select:focus { border-color: var(--bp-blue); outline: 3px solid rgb(37 99 235 / 0.12); }

.bp-trigger-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1.15rem;
  padding: 0.75rem;
  border: 1px solid #d8e3ed;
  border-radius: 10px;
  background: #fff;
}

.bp-trigger-toggle input { margin-top: 0.2rem; accent-color: var(--bp-blue); }
.bp-trigger-toggle strong, .bp-trigger-toggle small { display: block; }
.bp-trigger-toggle strong { font-size: 0.78rem; }
.bp-trigger-toggle small { margin-top: 0.2rem; color: var(--bp-muted); font-size: 0.7rem; line-height: 1.3; }

.bp-trigger-mapping-list { display: grid; gap: 0.55rem; margin-bottom: 0.7rem; }
.bp-trigger-mapping-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; }
.bp-trigger-mapping-row button { width: 2rem; height: 2rem; border: 0; border-radius: 7px; background: #fff0f3; color: var(--bp-red); font-size: 1rem; cursor: pointer; }
.bp-trigger-add-button { width: 100%; }
.bp-trigger-security-note { padding: 0.7rem; border: 1px solid #f2d1dc; border-radius: 9px; background: #fff7f9; color: #a83959; font-size: 0.72rem; line-height: 1.45; }

.bp-trigger-launch-card { display: grid; gap: 0.55rem; padding: 1rem; border: 1px solid #bde4d3; border-radius: 12px; background: #f1fbf5; }
.bp-trigger-launch-card__icon { width: 2.2rem; height: 2.2rem; background: #d8f4e4; color: var(--bp-green); }
.bp-trigger-launch-card strong { font-size: 0.85rem; }
.bp-trigger-launch-card small { color: #56816e; font-size: 0.74rem; line-height: 1.45; }

.bp-trigger-builder__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--bp-line); }
.bp-trigger-builder__error { min-height: 1rem; margin: 0; color: var(--bp-red); font-size: 0.8rem; font-weight: 700; }
.bp-trigger-builder__footer-actions { display: flex; align-items: center; gap: 0.6rem; }
.bp-trigger-builder__footer-actions .button, .bp-trigger-builder__save { min-height: 2.5rem; }

.bp-trigger-list-card { margin-top: 1.25rem; }
.bp-trigger-list-card__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--bp-line); }
.bp-trigger-list-card h3 { font-size: 1.1rem; }
.bp-trigger-list-card__count { display: grid; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bp-blue-soft); color: var(--bp-blue); font-weight: 800; place-items: center; }
.bp-trigger-list { display: grid; gap: 0.7rem; padding: 1rem 1.5rem; }
.bp-trigger-list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--bp-line); border-radius: 11px; background: #fff; }
.bp-trigger-list-item__main { min-width: 0; }
.bp-trigger-list-item__title { overflow: hidden; font-size: 0.86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.bp-trigger-list-item__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-top: 0.3rem; color: var(--bp-muted); font-size: 0.72rem; }
.bp-trigger-list-item__status { padding: 0.25rem 0.45rem; border-radius: 5px; background: #eafbf3; color: var(--bp-green); font-size: 0.66rem; font-weight: 800; }
.bp-trigger-list-item__status.is-inactive { background: #f0f3f7; color: #77879c; }
.bp-trigger-list-item__actions { display: flex; gap: 0.35rem; }
.bp-trigger-list-item__actions button { min-height: 2rem; padding: 0.35rem 0.55rem; border: 1px solid #c9d7e6; border-radius: 7px; background: #fff; color: #52627a; font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.bp-trigger-list-item__actions button:hover { border-color: var(--bp-blue); color: var(--bp-blue); }
.bp-trigger-list-item__actions .is-danger:hover,
.bp-trigger-list-item__actions .bp-trigger-list-action--danger:hover { border-color: var(--bp-red); color: var(--bp-red); }
.bp-trigger-empty { padding: 1.5rem; color: var(--bp-muted); text-align: center; }

@media (max-width: 1180px) {
  .bp-trigger-builder__workspace { grid-template-columns: 190px minmax(320px, 1fr) 280px; }
  .bp-trigger-builder__topbar, .bp-trigger-builder__workspace, .bp-trigger-builder__footer, .bp-trigger-list-card__header { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 900px) {
  .bp-trigger-builder__workspace { grid-template-columns: 180px minmax(0, 1fr); }
  .bp-trigger-builder__properties { grid-column: 1 / -1; border-top: 1px solid var(--bp-line); border-left: 0; }
  .bp-trigger-builder__properties-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
  .bp-trigger-properties-panel { max-width: 680px; }
}

@media (max-width: 640px) {
  .bp-trigger-builder__topbar, .bp-trigger-builder__footer { align-items: stretch; flex-direction: column; }
  .bp-trigger-builder__state { align-self: flex-start; }
  .bp-trigger-builder__workspace { display: block; }
  .bp-trigger-builder__palette { border-right: 0; border-bottom: 1px solid var(--bp-line); }
  .bp-trigger-palette-card { display: inline-flex; width: calc(50% - 0.55rem); margin-right: 0.45rem; vertical-align: top; }
  .bp-trigger-builder__legend { max-width: 18rem; }
  .bp-trigger-builder__properties { border-top: 1px solid var(--bp-line); }
  .bp-trigger-builder__footer-actions { justify-content: flex-end; flex-wrap: wrap; }
  .bp-trigger-list-item { grid-template-columns: 1fr; gap: 0.65rem; }
  .bp-trigger-list-item__actions { justify-content: flex-start; }
  .bp-trigger-flow-node__badge { display: none; }
}

/* The persistent sidebar leaves less room than the viewport suggests at XGA
   and tablet widths. Adapt the trigger form to its actual content area. */
@media screen {
  @container app-content (max-width: 960px) {
    .bp-trigger-builder__workspace { grid-template-columns: 180px minmax(0, 1fr); }
    .bp-trigger-builder__properties { grid-column: 1 / -1; border-top: 1px solid var(--bp-line); border-left: 0; }
    .bp-trigger-builder__properties-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
    .bp-trigger-properties-panel { max-width: 680px; }
  }

  @container app-content (max-width: 640px) {
    .bp-trigger-builder__topbar, .bp-trigger-builder__footer { align-items: stretch; flex-direction: column; }
    .bp-trigger-builder__canvas-toolbar { flex-wrap: wrap; }
    .bp-trigger-builder__state { align-self: flex-start; }
    .bp-trigger-builder__workspace { display: block; min-height: 0; }
    .bp-trigger-builder__palette { border-right: 0; border-bottom: 1px solid var(--bp-line); }
    .bp-trigger-palette-card { display: inline-flex; width: calc(50% - 0.55rem); margin-right: 0.45rem; vertical-align: top; }
    .bp-trigger-builder__legend { max-width: 18rem; }
    .bp-trigger-builder__footer-actions { justify-content: flex-end; flex-wrap: wrap; }
    .bp-trigger-list-item { grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
    .bp-trigger-list-item__actions { justify-content: flex-start; flex-wrap: wrap; }
    .bp-trigger-flow-node__badge { display: none; }
  }

  @container app-content (max-width: 420px) {
    .bp-trigger-palette-card { width: 100%; margin-right: 0; }
    .bp-trigger-mapping-row { grid-template-columns: minmax(0, 1fr) auto; }
    .bp-trigger-mapping-row > :nth-child(2) { display: none; }
    .bp-trigger-mapping-row > :nth-child(3) { grid-column: 1; }
    .bp-trigger-mapping-row > button { grid-column: 2; grid-row: 1 / 3; }
  }
}

html.dark .bp-trigger-page {
  --bp-ink: #e7edf6;
  --bp-muted: #9eabc0;
  --bp-line: #2d3b4e;
  --bp-soft: #172130;
  --bp-blue-soft: #182e54;
}

html.dark .bp-trigger-builder,
html.dark .bp-trigger-list-card,
html.dark .bp-trigger-flow-node__body,
html.dark .bp-trigger-palette-card,
html.dark .bp-trigger-builder__ghost-button,
html.dark .bp-trigger-add-button,
html.dark .bp-trigger-list-item,
html.dark .bp-trigger-field input,
html.dark .bp-trigger-field select,
html.dark .bp-trigger-mapping-row input,
html.dark .bp-trigger-mapping-row select,
html.dark .bp-trigger-toggle {
  background: #111a27;
  color: var(--bp-ink);
}

html.dark .bp-trigger-builder__canvas-wrap,
html.dark .bp-trigger-canvas { background-color: #0f1723; }
html.dark .bp-trigger-palette-card strong,
html.dark .bp-trigger-flow-node__content strong,
html.dark .bp-trigger-list-item__title { color: var(--bp-ink); }

/* Four desktop columns can leave a card about 150px wide with an expanded
   XGA sidebar. Reflow card contents without changing the font size or the
   number of collection columns. */
@media screen and (min-width: 1024px) {
  #app-main #app-content .task-card-grid { gap: 0.75rem; }
  #app-main #app-content .task-card-grid [data-task-card] > .p-4 { padding: var(--ui-density-card-padding, 1rem); }
  #app-main #app-content .task-card-grid [data-task-card] > .p-4 > .flex { flex-wrap: wrap; gap: 0.5rem; }
  #app-main #app-content .task-card-grid [data-task-card] [role="menu"] { width: min(12rem, 100%); }
  #app-main #app-content .task-card-grid [data-task-card] h3.line-clamp-2 {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  #app-main #app-content :is([data-card-grid], .hrm-approvals-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards][data-sortable-storage-key$=":kpi-cards"], .portal-summary, [x-show="$store.equipmentDashboard.hasData"] > .grid, .ui-page-stack .grid:has(> .ui-stat-card)) :is(.ui-stat-card, [data-dashboard-kpi]) > .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #app-main #app-content :is([data-card-grid], .hrm-approvals-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards][data-sortable-storage-key$=":kpi-cards"], .portal-summary, [x-show="$store.equipmentDashboard.hasData"] > .grid, .ui-page-stack .grid:has(> .ui-stat-card)) [role="tooltip"] {
    max-width: calc(100% - 1.5rem);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #app-main #app-content :is([data-card-grid], .hrm-dashboard-metrics, .hrm-approvals-metrics) .hrm-dashboard-metric {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: var(--ui-density-card-padding, 18px);
  }

  #app-main #app-content [data-card-grid] .hrm-approval-card-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: var(--ui-density-header-padding, 20px 20px 14px);
  }

  #app-main #app-content [data-card-grid] .hrm-approval-card-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: var(--ui-density-header-padding, 13px 20px);
  }

  #app-main #app-content [data-card-grid] .hrm-approval-material { padding: 0 var(--ui-density-card-padding, 20px) var(--ui-density-card-padding, 18px); }
  #app-main #app-content [data-card-grid] .hrm-approval-facts { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  #app-main #app-content [data-card-grid] .health-workspace-record .health-workspace-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #app-main #app-content [data-menu-view-mode="cards"] [data-menu-dish-row] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Repository settings remain usable inside each of the four entity cards;
     their desktop field grid belongs to a card, not the whole page width. */
  #app-main #app-content :is([data-project-git-repositories], [data-repositories-list]) :is([data-project-repository-settings], [data-repositories-settings-form]) {
    grid-template-columns: minmax(0, 1fr);
  }

  #app-main #app-content :is([data-project-git-repositories], [data-repositories-list]) :is([data-project-repository-settings], [data-repositories-settings-form]) > * {
    grid-column: auto;
    min-width: 0;
  }
}

/* System-color focus survives forced-color mode where shadows are omitted. */
@media (forced-colors: active) {
  :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {outline:2px solid Highlight !important;outline-offset:3px !important;}
}