/* UX-004: Long Workspace Pattern. Keep actions and context available without changing workflows. */
@media screen {
  .workspace-save-state {
    display: inline-flex;
    align-items: center;
    min-height: var(--erp-control-height-sm);
    color: var(--erp-text-muted);
    font-size: var(--erp-font-size-sm);
    line-height: var(--erp-line-height-normal);
    white-space: nowrap;
  }

  .workspace-save-state[data-state="dirty"] {
    color: var(--erp-warning-text, #8a6417);
  }

  .workspace-save-state[data-state="saved"] {
    color: var(--erp-success-text, #347451);
  }

  .workspace-save-state[data-state="saving"] {
    color: var(--erp-text-secondary);
  }

  .workspace-save-state[data-state="error"] {
    color: var(--erp-danger);
  }

  .workspace-context-highlight {
    animation: workspace-context-highlight 1000ms ease-out;
  }

  @keyframes workspace-context-highlight {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--erp-primary) 34%, transparent); }
    38% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--erp-primary) 13%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  .workspace:has(.master-panel) .long-workspace-primary-action,
  .workspace:has(.bom-panel) .long-workspace-primary-action {
    position: sticky;
    top: var(--erp-space-3);
    z-index: 3;
    box-shadow: var(--erp-shadow-xs);
  }

  .workspace:has(.bom-panel) .bom-action-bar .workspace-save-state {
    margin-right: var(--erp-space-2);
  }

  /* Keep only the action cluster responsive; the surrounding Detail Header stays a normal page element. */
  .long-workspace-action-bar {
    min-width: 0;
    max-width: 100%;
  }

  .product-company-sharing {
    display: grid;
    grid-column: 1 / -1;
    gap: var(--erp-space-2);
    padding: var(--erp-space-3) 0;
    border-top: 1px solid var(--erp-border);
  }

  .product-company-sharing > span,
  .product-shared-company-list > span {
    color: var(--erp-text-secondary);
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-semibold);
  }

  .product-company-sharing small { color: var(--erp-text-muted); }
  .product-shared-company-list { display: flex; flex-wrap: wrap; gap: var(--erp-space-2) var(--erp-space-3); align-items: center; }
}

@media screen and (min-width: 1200px) {
  .workspace:has(.master-panel) .long-workspace-action-bar {
    flex-wrap: nowrap;
  }

  /* A modest density reduction retains hierarchy without creating a compact dashboard header. */
  .workspace:has(.master-panel) .master-detail-header {
    gap: var(--erp-space-3);
    margin-bottom: var(--erp-space-3);
    padding-bottom: var(--erp-space-3);
  }

  .workspace:has(.master-panel) .part-master-form .master-detail-header {
    padding: 14px 18px;
  }
}

@media screen and (min-width: 901px) and (max-width: 1199px) {
  .workspace:has(.master-panel) .long-workspace-action-bar {
    flex-wrap: wrap;
  }

  .workspace:has(.master-panel) .long-workspace-action-bar .tf-action-button--danger {
    margin-right: 0;
  }
}

@media screen and (max-width: 900px) {
  /* Preserve every existing action in a contained strip instead of shrinking controls or overflowing the page. */
  .long-workspace-action-bar {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .long-workspace-action-bar > * {
    flex: 0 0 auto;
  }

  .workspace:has(.bom-panel) .bom-action-bar.long-workspace-action-bar {
    align-items: center;
    flex-wrap: nowrap;
  }

  .workspace:has(.bom-panel) .bom-action-bar.long-workspace-action-bar > div {
    flex: 0 0 auto;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-context-highlight { animation: none; }
}

@media screen and (max-width: 760px) {
  .workspace:has(.master-panel) .long-workspace-primary-action,
  .workspace:has(.bom-panel) .long-workspace-primary-action {
    position: static;
  }
}

@media screen and (max-width: 600px) {
  /* Keep the one indispensable action at the leading edge of a narrow action strip. */
  .workspace:has(.master-panel) .long-workspace-action-bar .tf-action-button--primary {
    order: -2;
    margin-left: 0;
  }

  .workspace:has(.master-panel) .long-workspace-action-bar .workspace-save-state {
    order: -1;
  }

  .workspace:has(.bom-panel) .bom-action-bar.long-workspace-action-bar {
    padding-inline: var(--erp-space-3);
  }

  .product-shared-company-list { align-items: stretch; flex-direction: column; }
}