/* Detail area: modal card alias, rail page layout, scrollport, floating overlays (split from detail.css). */

/* Card chrome: shared `.erpel-modal-card` in base.css (alias `.erpel-inline-lookup-card`). */

.erpel-inline-lookup-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Visually hidden but keep in the a11y tree. Tables ignore height/width:1px
   under table layout — without top/left they sit at their static position and
   still enlarge a scrollport (sourcing modal whitespace under the chart). */
.erpel-sr-only {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
  max-height: 1px !important;
  max-width: 1px !important;
  top: 0;
  left: 0;
}

.erpel-chart-wrap > .erpel-chart-fallback-table.erpel-sr-only {
  /* Pin inside the wrap so table row height cannot extend the modal body. */
  inset: 0 auto auto 0;
  table-layout: fixed;
}

.tag.is-primary:not(.is-light),
.tag.is-danger:not(.is-light) {
  color: var(--erpel-white);
}

.erpel-detail-layout {
  display: block;
  max-width: 100%;
  width: 100%;
}

.erpel-detail-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

/* Rail page: stack fills height; toolbar stays; body (rail+panel) fills rest. */
main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-layout,
main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-stack,
main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-toolbar {
  position: static;
  top: auto;
  flex-shrink: 0;
  min-width: 0;
  z-index: 2;
  /* Top inset lives here, outside the panel scrollport. */
  padding-top: var(--erpel-main-pad-top);
  background-color: var(--erpel-surface);
}

/* Stuck-shadow is a full-width rule under the title, including the rail column. */
main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-toolbar.is-stuck {
  box-shadow: none;
}

main.erpel-main:has(.erpel-detail-toolbar):has(.erpel-detail-body > .erpel-rail)
  > .container.is-fluid.erpel-page {
  padding-top: 0;
}

/* Panel top padding would scroll away and nudge the title bar. */
main.erpel-main:has(.erpel-detail-body > .erpel-rail)
  .erpel-detail-stack:has(> .erpel-detail-toolbar)
  .erpel-detail-panel {
  padding-top: 0;
}

main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-footer {
  flex-shrink: 0;
}

.erpel-detail-frame {
  display: block;
  max-width: 100%;
  width: 100%;
  text-align: left;
}

.erpel-detail-body {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.erpel-detail-body--compact {
  display: block;
}

.erpel-detail-tab-menu {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  position: relative;
  width: max-content;
  max-width: 100%;
  /* Avoid a local stacking context so the fixed dropdown can float above later embeds. */
}

.erpel-detail-stock-tags {
  align-items: center;
  display: inline-flex;
  margin-bottom: 0 !important;
}

.erpel-detail-stock-tags .tag {
  margin-bottom: 0 !important;
}

.erpel-tab-menu-btn {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 0.35rem;
}

.erpel-tab-menu-label-wrap {
  display: inline-grid;
  align-items: center;
  justify-items: start;
}

.erpel-tab-menu-label-wrap > * {
  grid-area: 1 / 1;
}

.erpel-tab-menu-label-sizer {
  display: flex;
  flex-direction: column;
  height: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
  white-space: nowrap;
}

.erpel-tab-menu-label-sizer > span {
  white-space: nowrap;
}

.erpel-tab-menu-label {
  white-space: nowrap;
}

.erpel-tab-menu-btn[aria-expanded='true'] {
  border-color: var(--erpel-brand);
  color: var(--erpel-brand);
}

/*
 * Open hamburger: lift the embed above later expand rows so sibling toolbars
 * (Allgemein / Lager) cannot paint over the fixed dropdown.
 */
.part-detail-embed:has(.erpel-tab-menu-btn[aria-expanded='true']) {
  position: relative;
  z-index: 100;
}

/* Floating overlay: JS sets position:fixed so parents' overflow cannot clip it. */
.erpel-tab-menu-dropdown {
  background: var(--erpel-surface);
  border: 1px solid var(--erpel-gray-170);
  border-radius: var(--erpel-radius);
  box-shadow: var(--erpel-dropdown-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  max-height: min(70vh, 28rem);
  min-width: 12rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.35rem;
  position: fixed;
  z-index: 2000;
}

.erpel-tab-menu-dropdown[hidden] {
  display: none;
}

.erpel-tab-menu-dropdown a {
  align-items: center;
  border-radius: var(--erpel-radius);
  color: var(--erpel-text);
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1.2;
  min-height: 2.25rem;
  padding: 0.4rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
}

.erpel-tab-menu-dropdown a:hover {
  background: var(--erpel-surface-subtle);
}

.erpel-tab-menu-dropdown li.is-active a,
.erpel-tab-menu-dropdown li.is-active a:hover {
  background: var(--erpel-brand);
  color: var(--erpel-white);
}

.erpel-tab-menu-dropdown li.is-disabled {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

/*
 * Default rail (legacy sticky) — overridden below when main hosts a rail page
 * (panel is the scrollport; rail must not move with content).
 */
.erpel-rail {
  align-self: flex-start;
  background-color: var(--erpel-surface-subtle);
  border: 1px solid var(--erpel-gray-170);
  border-radius: var(--erpel-radius);
  flex: 0 0 var(--erpel-rail-width);
  max-height: calc(100dvh - var(--erpel-nav-h, 0px) - 0.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.35rem;
  position: sticky;
  top: 0;
  width: var(--erpel-rail-width);
  z-index: 20;
}

/* Rail page: layout fills; rail fixed column; panel scrolls. */
.erpel-detail-body:has(> .erpel-rail) {
  --erpel-rail-panel-pad-end: 1.25rem;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

.erpel-detail-body:has(> .erpel-rail) > .erpel-rail {
  position: relative;
  top: auto;
  /* Content height only; scroll inside the rail when the list is taller than the page. */
  align-self: flex-start;
  max-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 0 0 var(--erpel-rail-width);
}

/* View: panel is a direct child. Edit: panel (+ danger zone) sits in
 * ``.erpel-detail-main`` — same end gutter / scrollport as Darstellung. */
.erpel-detail-body:has(> .erpel-rail) > .erpel-detail-panel,
.erpel-detail-body:has(> .erpel-rail) > .erpel-detail-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Gap content → scrollbar; gutter at the viewport edge (page has no end pad). */
  padding-inline-end: var(--erpel-rail-panel-pad-end);
  scrollbar-gutter: stable;
}

/* Title stays outside the scrollport — content cannot paint above it.
 * Selector must beat the panel overflow-y:auto rule above. */
.erpel-detail-body:has(> .erpel-rail) > .erpel-detail-panel:has(> .erpel-panel-scroll) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-inline-end: 0;
  scrollbar-gutter: auto;
}

.erpel-detail-panel:has(> .erpel-panel-scroll) > .erpel-page-title-block,
.erpel-detail-panel:has(> .erpel-panel-scroll) > .erpel-page-header,
.erpel-detail-panel:has(> .erpel-panel-scroll) > header.erpel-page-header,
.erpel-detail-panel:has(> .erpel-panel-scroll) > .level:first-child,
.erpel-detail-panel:has(> .erpel-panel-scroll) > form:first-child {
  flex: 0 0 auto;
  position: static;
  z-index: 2;
  margin-bottom: 0;
  /* Rest of the gap is the scrollport's ring room (padding-top below). */
  padding-bottom: calc(0.75rem - var(--erpel-ring-room));
  padding-inline-end: calc(var(--erpel-rail-panel-pad-end, 1.25rem) + 0.85rem);
  background-color: var(--erpel-surface);
}

/* Edit forms: back-link + h1 sit above the scrollport. */
.erpel-detail-panel:has(> .erpel-panel-scroll) > p:first-child,
.erpel-detail-panel:has(> .erpel-panel-scroll) > .title {
  flex: 0 0 auto;
  padding-inline-end: calc(var(--erpel-rail-panel-pad-end, 1.25rem) + 0.85rem);
}

.erpel-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-inline-end: var(--erpel-rail-panel-pad-end, 1.25rem);
  /* Scrollport clips focus/hover rings of a first control (search field, filter):
     keep room above it; the title above gives up the same amount. */
  padding-top: var(--erpel-ring-room);
  padding-bottom: 2rem;
}

/* Toolbar sits above the panel — same end inset as panel content (Darstellung). */
main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-toolbar,
main.erpel-main:has(.erpel-detail-body > .erpel-rail) .erpel-detail-footer {
  padding-inline-end: var(--erpel-rail-panel-pad-end, 1.25rem);
  box-sizing: border-box;
}

/*
 * Config / Insights / Orders: rail box top ↔ title.is-5 cap height.
 * title line-height 1.125 leaves half-leading above glyphs; + border optical.
 */
.erpel-config-layout > .erpel-rail,
.erpel-orders-layout > .erpel-rail {
  --erpel-rail-title-nudge: 0.5rem;
  margin-top: var(--erpel-rail-title-nudge);
}

/* Sticky thead inside the panel scrollport (chrome/toolbar outside panel). */
.erpel-detail-body:has(> .erpel-rail) .erpel-detail-panel .erpel-detail-table > thead > tr:first-child > th,
.erpel-detail-body:has(> .erpel-rail)
  .erpel-detail-panel
  .erpel-data-table
  > thead
  > tr:first-child
  > th {
  top: 0;
}

.erpel-detail-body:has(> .erpel-rail)
  .erpel-detail-panel
  .erpel-detail-table
  > thead
  > tr.erpel-filter-row
  > th,
.erpel-detail-body:has(> .erpel-rail)
  .erpel-detail-panel
  .erpel-data-table
  > thead
  > tr.erpel-filter-row
  > th {
  top: var(--erpel-thead-sort-h, 2.5rem);
}

/* Panel titles: flush to the panel top (nudge is applied on the rail only). */
.erpel-config-panel > .title:first-child,
.erpel-config-panel > .erpel-page-title-block:first-child .title,
.erpel-config-panel > .erpel-page-header:first-child .title,
.erpel-orders-panel > .title:first-child,
.erpel-orders-panel > .erpel-page-header:first-child .title {
  margin-top: 0;
  padding-top: 0;
}

.part-tab-pane.is-hidden,
.part-tab-pane[hidden] {
  display: none !important;
}

.erpel-rail .part-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.erpel-rail .part-tabs a {
  align-items: center;
  border-radius: 0.375rem;
  color: var(--erpel-text);
  display: flex;
  /* Always semibold so active state does not widen labels / shift the rail. */
  font-weight: 600;
  font-size: 0.75rem;
  gap: 0.55rem;
  line-height: 1.2;
  min-height: 2.75rem;
  padding: 0.45rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
}

.erpel-rail .part-tabs a .icon {
  flex: 0 0 auto;
  font-size: 1.2rem;
  height: 1.5rem;
  margin: 0;
  width: 1.5rem;
}

.erpel-rail .part-tabs a > span:not(.icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erpel-rail .part-tabs a:hover {
  background: var(--erpel-surface);
}

.erpel-rail .part-tabs li.is-active a,
.erpel-rail .part-tabs li.is-active a:hover {
  background: var(--erpel-brand);
  color: var(--erpel-white);
}

.erpel-rail .part-tabs li.is-disabled {
  cursor: help;
  opacity: 0.55;
  pointer-events: auto;
}

.erpel-rail .part-tabs li.is-disabled a {
  pointer-events: none;
}

.erpel-chart {
  display: block;
  position: relative;
  min-height: var(--erpel-chart-min-height, 12rem);
  padding: 0;
}

.box.erpel-chart.erpel-box {
  /* Halfway between the lighter mix and the previous --erpel-surface-box fill. */
  background: color-mix(in srgb, var(--erpel-surface) 39%, var(--erpel-surface-box));
  border-color: color-mix(in srgb, var(--erpel-border) 42%, var(--erpel-surface));
}

#chart-sourcing-price-tiers.erpel-chart {
  height: var(--erpel-chart-min-height, 12rem);
  min-height: 0;
  margin-bottom: 0;
}