/*
 * XFORCE Control R10.2.7 UI1
 * Keep long plan paths and diffs inside the project sheet and keep approval
 * actions reachable at every supported viewport size.
 */

[data-slot="sheet-content"] {
  box-sizing: border-box;
  inline-size: min(100%, 48rem) !important;
  max-inline-size: 100vw !important;
  min-inline-size: 0;
  overflow: hidden;
}

[data-slot="sheet-content"] > *,
[data-slot="sheet-content"] [data-slot="tabs"],
[data-slot="sheet-content"] [data-slot="scroll-area"],
[data-slot="sheet-content"] [data-slot="scroll-area-viewport"],
[data-slot="sheet-content"] [data-slot="tabs-content"],
[data-slot="sheet-content"] [data-slot="card"],
[data-slot="sheet-content"] [data-slot="card-header"],
[data-slot="sheet-content"] [data-slot="card-content"] {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}

[data-slot="sheet-content"] [data-slot="tabs"],
[data-slot="sheet-content"] [data-slot="scroll-area"],
[data-slot="sheet-content"] [data-slot="scroll-area-viewport"] {
  inline-size: 100%;
}

/*
 * Radix ScrollArea normally uses display: table for intrinsic sizing. A long
 * unbroken path then becomes the sheet's width. The project sheet needs a
 * block formatting context instead, while individual diffs may scroll.
 */
[data-slot="sheet-content"] [data-radix-scroll-area-viewport] {
  overflow-x: hidden !important;
}

[data-slot="sheet-content"] [data-radix-scroll-area-viewport] > div {
  display: block !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  contain: inline-size;
}

[data-slot="sheet-content"] [data-slot="tabs-content"] {
  overflow-x: hidden;
}

[data-xforce-plan-approval="true"] {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  scroll-margin-block: 1rem;
}

[data-xforce-plan-approval="true"] [data-slot="card-description"],
[data-xforce-plan-path="true"] {
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

[data-xforce-plan-preview="true"] {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: clamp(9rem, 32vh, 13rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

[data-xforce-plan-preview-item="true"] {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
}

[data-xforce-plan-preview-item="true"] pre {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto !important;
  overflow-y: auto !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

[data-xforce-plan-actions="true"] {
  position: sticky;
  inset-block-end: -0.25rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-inline: -1rem;
  margin-block-end: -0.75rem;
  padding: 0.75rem 1rem;
  border-block-start: 1px solid rgb(191 219 254);
  background: rgb(239 246 255 / 0.96);
  box-shadow: 0 -8px 18px rgb(15 23 42 / 0.06);
  backdrop-filter: blur(6px);
}

[data-xforce-plan-actions="true"] button {
  min-block-size: 2.25rem;
  white-space: normal;
}

@media (max-width: 639px) {
  [data-slot="sheet-content"] {
    inline-size: 100vw !important;
    max-inline-size: 100vw !important;
  }

  [data-xforce-plan-actions="true"] button {
    flex: 1 1 100%;
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-xforce-plan-approval="true"] {
    scroll-behavior: auto;
  }
}