/* css/fba.css – Amazon FBA (js/areas/fba/). Eigene Klassen mit Präfix fba, nur Tokens aus design.css, Bereichsfarbe --a-fba über data-area="fba". */

.linkBtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fbaEmptyAct {
  justify-content: center;
  margin-top: var(--s3);
}

/* Phasenbalken (sieben Segmente) */
.fbaPhase {
  display: flex;
  gap: 3px;
  margin: var(--s2) 0;
  max-width: 320px;
}
.fbaPhase i {
  flex: 1;
  height: 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.fbaPhase i.on {
  background: var(--a-fba);
}

/* Kopf einer Detailseite mit großem Titelfeld */
.fbaTitleBox {
  min-width: 0;
  flex: 1 1 320px;
}
.fbaTitleIn {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px dashed var(--border-strong);
  border-radius: 0;
  background: transparent;
  padding: var(--s1) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.fbaTitleIn:focus {
  box-shadow: none;
  border-bottom-color: var(--primary);
}
.fbaMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.fbaMeta b {
  color: var(--ink);
}
.fbaMeta select,
.fbaMeta input {
  height: 34px;
  padding: 0 var(--s3);
}
.fbaNote {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: var(--s3);
}
.fbaNote > svg {
  flex: none;
  margin-top: 2px;
}
.fbaNote > span {
  flex: 1;
  min-width: 0;
}
.fbaNarrow {
  max-width: 640px;
}
.fbaGap {
  margin-top: var(--s3);
}
.fbaGrid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s5);
  margin-top: var(--s4);
  align-items: start;
}
.kpiGrid + .fbaGrid2 {
  margin-top: var(--s5);
}
.fbaRowIc {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--area, var(--ink-2));
  flex: none;
}

/* Bewertung */
.fbaScore {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.fbaScore b {
  font-size: var(--fs-2xl);
}
.fbaCrit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3) var(--s4);
  align-items: center;
}
.fbaScoreBar {
  width: 64px;
  flex: none;
}

/* Abschnitte mit Editor */
.fbaSec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.fbaSec > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  font-weight: 600;
  min-width: 0;
}
.fbaSec > summary::-webkit-details-marker {
  display: none;
}
.fbaSec > summary > svg {
  transition: transform 0.15s;
  color: var(--ink-3);
}
.fbaSec[open] > summary > svg {
  transform: rotate(90deg);
}
.fbaSec .sum {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: right;
}
.fbaSec[open] > summary .sum {
  display: none;
}
.fbaSecBody {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: 0 var(--s4) var(--s4);
}
.fbaEdFoot {
  justify-content: flex-end;
}
.fbaDoc .fbaDocHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

/* Schnellfeld, Filterleisten */
.fbaQuick {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.fbaQuick input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 var(--s3);
}
.fbaBar {
  justify-content: space-between;
  margin-bottom: var(--s4);
}
.fbaBar select {
  width: auto;
  height: 34px;
  padding: 0 var(--s3);
}
.fbaInline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}
.fbaInline > input:first-child {
  flex: 1 1 200px;
  min-width: 0;
}
.fbaInline select,
.fbaInline input[type="date"] {
  width: auto;
  height: 38px;
  padding: 0 var(--s3);
}
.fbaDb {
  text-align: right;
  display: flex;
  flex-direction: column;
}

/* Tabellen */
.fbaTblWrap {
  width: 0;
  min-width: 100%;
  overflow-x: auto;
}
.fbaTbl {
  min-width: 100%;
}
.fbaTbl tbody th {
  text-align: left;
  font-weight: 500;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  padding: 12px var(--s4);
}
.fbaTbl thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
.fbaTbl td.r,
.fbaTbl th.r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fbaTbl td {
  vertical-align: top;
}
.fbaClick {
  cursor: pointer;
}
.fbaClick:hover th,
.fbaClick:hover td {
  background: var(--surface-2);
}
.fbaNeg {
  color: var(--danger);
}
.fbaOver {
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fbaBest {
  color: var(--success);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s2);
  font-weight: 600;
}
.fbaBest > svg {
  display: inline;
  vertical-align: -2px;
  margin-right: 4px;
}
.fbaBest small {
  font-weight: 400;
  font-size: var(--fs-xs);
}

/* Kalkulation */
.fbaCalc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s5);
  align-items: start;
}
.fbaLegend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.fbaLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fbaLegend i {
  width: 18px;
  height: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.fbaLegend i.e {
  border: 1px dashed var(--warning);
}
.fbaCalcGroup h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--s2);
}
.fbaIn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 150px) auto;
  gap: var(--s2) var(--s3);
  align-items: center;
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
}
.fbaIn label {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.fbaIn .req {
  color: var(--danger);
}
.fbaIn .err {
  grid-column: 1 / -1;
}
.fbaUnit {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.fbaUnit input {
  min-width: 0;
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  height: 34px;
  padding: 0 var(--s2);
}
.fbaUnit input.est {
  border-style: dashed;
  border-color: var(--warning);
}
.fbaUnit span {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  white-space: nowrap;
}
.fbaEst {
  height: 26px;
  padding: 0 var(--s2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.fbaEst[aria-pressed="true"] {
  border-style: dashed;
  border-color: var(--warning);
  color: var(--ink);
  background: var(--warning-tint);
}
.fbaRes {
  position: sticky;
  top: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.fbaResHead {
  justify-content: space-between;
}
.fbaResRow {
  display: grid;
  gap: 2px;
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
}
.fbaResRow .l {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.fbaResRow .v {
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fbaResRow.big .v {
  font-size: var(--fs-2xl);
}
.fbaResRow .v.neg {
  color: var(--danger);
}
.fbaResRow .f {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* Aufgaben */
.fbaCheck {
  flex: none;
}
.fbaTaskT {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.fbaTaskT:hover {
  text-decoration: underline;
}
.fbaGroupH {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s3) 0 var(--s2);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
}
button.fbaGroupH {
  cursor: pointer;
}
button.fbaGroupH > svg {
  transition: transform 0.15s;
}
button.fbaGroupH[aria-expanded="false"] > svg {
  transform: rotate(-90deg);
}
.fbaGroupH.bad {
  color: var(--danger);
}
.fbaGroupH .cnt {
  font-weight: 400;
  color: var(--ink-3);
}

/* Lieferanten */
.fbaSup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}
.fbaSup .card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.fbaSup .card.fbaSel {
  border-color: var(--success);
}
.fbaSupHead {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  align-items: flex-start;
}
.fbaSupAct {
  margin-top: auto;
}

/* Dialog */
.dialog.fbaDlg {
  max-width: 460px;
  max-height: calc(100vh - var(--s6));
  overflow-y: auto;
}
.dialog.fbaDlg.wide {
  max-width: 720px;
}
.fbaDlgBody {
  margin-bottom: var(--s4);
}
.fbaDlgBody p {
  margin: 0 0 var(--s3);
  white-space: normal;
}
.fbaForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s3);
}
.fbaForm .field {
  min-width: 0;
}
.fbaForm .fbaWide {
  grid-column: 1 / -1;
}
.fbaLeft {
  margin-right: auto;
}

/* Wissen */
.fbaLib {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
.fbaTagsHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.fbaTagList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fbaTagBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
}
.fbaTagBtn:hover {
  background: var(--surface-2);
}
.fbaTagBtn[aria-pressed="true"] {
  background: var(--primary-tint);
  color: var(--ink);
  font-weight: 500;
}
.fbaTagBtn .cnt {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.fbaTagRows {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.fbaTagRow,
.fbaTagAdd {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.fbaTagRow input,
.fbaTagAdd input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 var(--s2);
}
.fbaSearch {
  flex: 1 1 220px;
}
.fbaSearch .input {
  width: 100%;
}
.fbaFilterBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: var(--s3);
}
.fbaFold {
  justify-content: flex-end;
}
.fbaTagEdit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.fbaTagEdit .chip {
  padding-right: var(--s2);
}
.fbaChipT,
.fbaChipX {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.fbaCombo {
  position: relative;
}
.fbaCombo input {
  height: 34px;
  min-width: 240px;
}
.fbaSugg {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin-top: var(--s1);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  max-height: 240px;
  overflow-y: auto;
}
.fbaSugg button {
  text-align: left;
  border: 0;
  background: transparent;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink);
}
.fbaSugg button:hover {
  background: var(--surface-2);
}
.fbaSuggNone {
  padding: var(--s2) var(--s3);
}
.fbaSrc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: var(--s3);
}
.fbaSrc .cluster {
  gap: 6px;
}
.fbaSrcBtn {
  margin-left: auto;
}

@media (max-width: 1024px) {
  .fbaGrid2,
  .fbaCalc {
    grid-template-columns: minmax(0, 1fr);
  }
  .fbaRes {
    position: static;
  }
  .fbaLib {
    grid-template-columns: minmax(0, 1fr);
  }
  .fbaTagList {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--s1);
  }
  .fbaTagBtn {
    flex: none;
    border: 1px solid var(--border);
    border-radius: 99px;
    gap: var(--s2);
  }
}
@media (max-width: 640px) {
  .fbaForm,
  .fbaCrit {
    grid-template-columns: minmax(0, 1fr);
  }
  .fbaIn {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .fbaIn label {
    grid-column: 1 / -1;
  }
  .fbaScoreBar {
    display: none;
  }
  .fbaCombo input {
    min-width: 0;
    width: 100%;
  }
  .fbaCrit .seg {
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fbaSec > summary > svg,
  button.fbaGroupH > svg {
    transition: none;
  }
}