/* ──────────────────────────────────────────────
   Kalkulation Module – CSS
   v6.0 – UI Cleanup: Section Nav, Accordion Products, KPI Tiles,
          Split Layout Cards, Collapsible Sections, Read-only Styling
   Verwendet globale Klassen: .secHd, .ctl, .btn, .card, .pad, .table
   ────────────────────────────────────────────── */

#viewCalc{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  max-width:100%;
  width:100%;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
@media(min-width:981px){
  #viewCalc{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
  }
}

/* ═══════════════════════════════════════════════
   CALC DETAIL MODAL
   ═══════════════════════════════════════════════ */
.dlg.calcDlg{
  width:min(1080px, 96vw);
  padding:0;
  overflow:hidden;
}
.dlg.calcDlg > .x{
  position:absolute;
  top:10px;
  right:12px;
  z-index:6;
}
#calcModalBody{
  display:flex;
  flex-direction:column;
  max-height:92vh;
  overflow:hidden;
}
.calcModalHeader{
  flex-shrink:0;
  padding:22px 18px 8px;
}
.dlg.calcDlg .calcDetail{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 18px 16px;
}

/* ═══════════════════════════════════════════════
   LIST VIEW
   ═══════════════════════════════════════════════ */
#viewCalc .calcFilters{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr;
  gap:10px;
  align-items:end;
}
@media(max-width:900px){ #viewCalc .calcFilters{ grid-template-columns:1fr 1fr; } }
@media(max-width:500px){ #viewCalc .calcFilters{ grid-template-columns:1fr; } }

.calcEmpty{
  padding:32px;
  color:var(--mut);
  text-align:center;
  font-size:13px;
  font-style:italic;
  opacity:.65;
}

/* ── List table grid ── */
.calcListGrid{
  display:grid;
  grid-template-columns: 1.5fr 1.3fr 90px 1.2fr 0.8fr 0.8fr 1fr 90px 140px;
  gap:0 12px;
  align-items:center;
  padding:10px 14px;
}
.calcListGrid > div{
  text-align:left;
}
.calcListGrid.hd{
  font-size:13px;
  font-weight:normal;
  color:#fff;
  text-transform:none;
  letter-spacing:normal;
  padding:10px 14px;
  border-bottom:1px solid var(--bd);
  user-select:none;
  white-space:nowrap;
}
html[data-theme=light] .calcListGrid.hd{
  color:#1e293b;
}
.calcListGrid[data-id]{
  cursor:pointer;
  border-bottom:1px solid var(--bd);
  transition:background .12s;
}
.calcListGrid[data-id]:hover{
  background:var(--rowHover, rgba(255,255,255,.04));
}
.calcListGrid[data-id]:nth-child(odd){
  background:var(--rowAlt, rgba(255,255,255,.015));
}
.calcListGrid[data-id]:nth-child(odd):hover{
  background:var(--rowHover, rgba(255,255,255,.04));
}
@media(max-width:900px){ .calcListGrid{ grid-template-columns:2fr 1fr 80px 80px; }
  .calcListGrid .calcProdukt, .calcListGrid .calcKunde, .calcListGrid .calcDate, .calcListGrid .calcFoto, .calcListGrid .calcDok{ display:none; }
}

.calcListGrid .calcName{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); }
.calcListGrid .calcProdukt{ color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.calcListGrid .calcKunde{ color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.calcListGrid .calcDate{ font-size:12px; color:var(--mut); font-variant-numeric:tabular-nums; }
.calcListGrid .act{ display:flex; gap:6px; justify-content:flex-end; }
.calcListGrid .ib{ width:30px; height:30px; border-radius:7px; }

/* ── Pagination ── */
.calcPagination{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--bd);
  flex-wrap:wrap;
}
.calcPagination .btn.small{
  padding:5px 12px; font-size:12px; min-width:auto; border-radius:6px;
}
.calcPagination .btn.small:disabled{
  opacity:.35; pointer-events:none;
}
.calcPageInfo{
  font-size:13px; color:var(--mut); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ── Status badges (pill) ── */
.calcBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  line-height:1;
}
.calcBadge.draft{ background:rgba(255,255,255,.08); color:var(--mut); border:1px solid var(--bd); }
.calcBadge.active{ background:rgba(59,130,246,.15); color:#60a5fa; border:1px solid rgba(59,130,246,.25); }
.calcBadge.completed{ background:rgba(34,197,94,.12); color:#4ade80; border:1px solid rgba(34,197,94,.2); }
.calcBadge.archived{ background:rgba(156,163,175,.12); color:#9ca3af; border:1px solid rgba(156,163,175,.2); }
html[data-theme=light] .calcBadge.draft{ background:rgba(0,0,0,.04); color:#6b7280; border-color:rgba(0,0,0,.08); }
html[data-theme=light] .calcBadge.active{ background:rgba(59,130,246,.1); color:#2563eb; border-color:rgba(59,130,246,.18); }
html[data-theme=light] .calcBadge.completed{ background:rgba(34,197,94,.1); color:#16a34a; border-color:rgba(34,197,94,.18); }
html[data-theme=light] .calcBadge.archived{ background:rgba(156,163,175,.1); color:#6b7280; border-color:rgba(156,163,175,.18); }

/* ═══════════════════════════════════════════════
   DETAIL VIEW
   ═══════════════════════════════════════════════ */
.calcDetail{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:40px;
}
.calcDetail .calcSection[id]{
  scroll-margin-top:12px;
}

/* ── Section cards ── */
.calcSection{
  position:relative;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 420px at 10% 0%, var(--panelGlow, rgba(59,130,246,.04)), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 20%, rgba(0,0,0,.02) 100%),
    var(--card);
  box-shadow:0 12px 26px -26px rgba(0,0,0,.80);
  padding:16px 18px 14px;
}
html[data-theme=light] .calcSection{
  border-color:rgba(0,0,0,.08);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(59,130,246,.03), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.5) 20%),
    var(--card);
  box-shadow:0 4px 16px -8px rgba(0,0,0,.08);
}

/* ── Top accent line comes from .dlg::before – no duplicate needed ── */
.calcSection::before{ display:none; }

/* ── Section header ── */
.calcSection .secHd{
  margin:0 0 10px;
  font-size:16px;
  font-weight:700;
  color:var(--label);
}
.calcSection .secHd::after{
  display:none;
}

/* ═══════════════════════════════════════════════
   SECTION NAVIGATION (fixed in modal header)
   ═══════════════════════════════════════════════ */
.calcSectionNav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px;
  padding:4px 14px;
  background:var(--card);
  border-bottom:1px solid var(--bd);
  border-radius:10px;
}
html[data-theme=light] .calcSectionNav{
  background:var(--card);
}
.calcSectionNav a{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  color:var(--mut);
  text-decoration:none;
  transition:all .15s;
  white-space:nowrap;
  letter-spacing:.02em;
  cursor:pointer;
  border:1px solid transparent;
  line-height:1.4;
}
.calcSectionNav a:hover{
  background:rgba(59,130,246,.06);
  color:var(--txt);
}
.calcSectionNav a.active{
  background:rgba(59,130,246,.1);
  border-color:rgba(59,130,246,.22);
  color:var(--accent, #3b82f6);
  font-weight:800;
}
html[data-theme=light] .calcSectionNav a.active{
  background:rgba(59,130,246,.08);
  color:#2563eb;
}

/* ═══════════════════════════════════════════════
   COLLAPSIBLE / ACCORDION
   ═══════════════════════════════════════════════ */
.calcAccordionHdr{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  padding:2px 0;
}
.calcAccordionHdr .calcChevron{
  width:14px;
  height:14px;
  color:var(--mut);
  transition:transform .2s ease;
  flex-shrink:0;
}
.calcAccordionHdr.open .calcChevron{
  transform:rotate(90deg);
}
.calcAccordionBody{
  overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease;
  max-height:0;
  opacity:0;
}
.calcAccordionBody.open{
  max-height:none;
  opacity:1;
}

/* Accordion meta in header */
.calcAccordionMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin-left:auto;
  font-size:11px;
  color:var(--mut);
  font-variant-numeric:tabular-nums;
}
.calcAccordionMeta span{
  white-space:nowrap;
}
.calcAccordionMeta .amVal{
  font-weight:800;
  color:var(--txt);
}

/* ═══════════════════════════════════════════════
   PRODUCT CARDS (inner cards within product accordion)
   ═══════════════════════════════════════════════ */
.calcProductCard{
  background:rgba(255,255,255,.02);
  border:1px solid var(--bd);
  border-radius:10px;
  padding:0;
  margin-bottom:8px;
  transition:border-color .2s, box-shadow .15s;
  overflow:hidden;
}
html[data-theme=light] .calcProductCard{ background:rgba(0,0,0,.012); }
.calcProductCard:hover{
  border-color:color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.calcProductHeader{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-bottom:1px solid var(--bd);
  cursor:pointer;
  user-select:none;
}
.calcProductCard.collapsed .calcProductHeader{
  border-bottom:none;
}
.calcProductHeader .prodChevron{
  width:16px;
  height:16px;
  color:var(--mut);
  flex-shrink:0;
  transition:transform .2s ease;
}
.calcProductCard:not(.collapsed) .calcProductHeader .prodChevron{
  transform:rotate(90deg);
}
.calcProductHeader .prodNum{
  font-size:11px;
  font-weight:950;
  color:var(--accent, #3b82f6);
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
.calcProductHeader .prodName{
  font-size:12px;
  font-weight:700;
  color:var(--txt);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:220px;
}
.calcProductHeader .calcAccordionMeta{
  margin-left:auto;
}

.calcProductBody{
  padding:12px 14px 14px;
}
.calcProductCard.collapsed .calcProductBody{
  display:none;
}

/* Product remove as small icon button */
.calcProductRemove{
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.15);
  border-radius:8px;
  color:#ef4444;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  transition:all .15s;
  flex-shrink:0;
  padding:0;
  line-height:1;
}
.calcProductRemove:hover{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.28); }
.calcProductRemove svg{ width:14px; height:14px; }

/* Inner cards within a product */
.calcInnerCard{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:8px;
}
html[data-theme=light] .calcInnerCard{
  background:rgba(0,0,0,.015);
  border-color:rgba(0,0,0,.05);
}
.calcInnerCard:last-child{
  margin-bottom:0;
}
.calcInnerCard > .calcSubHead:first-child{
  margin-top:0;
}

/* ── Form grid ── */
.calcFormGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 14px;
}
.calcFormGrid.narrow{
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* ── Field ── */
.calcField{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.calcField label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--mut);
  letter-spacing:.25px;
}

/* wide field (spans 2 cols) */
.calcField.wide{ grid-column: 1 / -1; }
@media(max-width:500px){
  .calcFormGrid{ grid-template-columns: 1fr; }
  .calcField.wide{ grid-column: span 1; }
}

/* Input with suffix unit inside */
.calcInputWrap{
  position:relative;
  display:flex;
  align-items:center;
}
.calcInputWrap .ctl{
  flex:1;
  padding-right:36px;
}
.calcInputWrap .calcSuffix{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  font-weight:700;
  color:var(--mut);
  pointer-events:none;
  white-space:nowrap;
}

/* ── HS-Code input row with classify button ── */
.calcHsRow{
  display:flex;
  gap:6px;
  align-items:stretch;
}
.calcHsRow .ctl{ flex:1; min-width:0; }

.calcHsLookupBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  white-space:nowrap;
  padding:0 8px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.18);
  color:var(--accent, #3b82f6);
  cursor:pointer;
  transition:all .15s;
  flex-shrink:0;
  height:100%;
  min-height:0;
  letter-spacing:.02em;
}
.calcHsLookupBtn:hover{
  background:rgba(59,130,246,.16);
  border-color:rgba(59,130,246,.35);
}
.calcHsLookupBtn svg{ width:12px; height:12px; }
html[data-theme=light] .calcHsLookupBtn{
  background:rgba(59,130,246,.08);
  border-color:rgba(59,130,246,.18);
  color:#2563eb;
}
html[data-theme=light] .calcHsLookupBtn:hover{
  background:rgba(59,130,246,.15);
}
/* Loading state for lookup buttons */
.calcHsLookupBtn.calcLoading{
  pointer-events:none;
  opacity:.5;
}
.calcHsLookupBtn.calcLoading svg{
  animation:calcSpin .8s linear infinite;
}
@keyframes calcSpin{
  to{ transform:rotate(360deg); }
}

/* ── Packaging toggle ── */
.calcPkgToggle{
  display:inline-flex;
  flex-wrap:wrap;
  border:1px solid var(--bd);
  border-radius:7px;
  overflow:hidden;
  margin-bottom:6px;
}
.calcPkgToggle button{
  background:transparent;
  border:none;
  border-right:1px solid var(--bd);
  padding:3px 8px;
  font-size:10px;
  font-weight:700;
  color:var(--mut);
  cursor:pointer;
  transition:background .15s, color .15s;
  letter-spacing:.02em;
  white-space:nowrap;
  line-height:1.4;
}
.calcPkgToggle button:last-child{ border-right:none; }
.calcPkgToggle button.on{
  background:var(--accent, #3b82f6);
  color:#fff;
}
.calcPkgToggle button:hover:not(.on){
  background:rgba(59,130,246,.08);
}

/* ── Container info banner ── */
.calcContainerInfo{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:4px 10px;
  margin-bottom:6px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
  color:var(--accent, #3b82f6);
  background:rgba(59,130,246,.05);
  border:1px solid rgba(59,130,246,.10);
}
html[data-theme=light] .calcContainerInfo{
  color:#2563eb;
  background:rgba(59,130,246,.04);
}

/* ── VK inkl. Transport toggle row ── */
.calcVkTransportRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  grid-column:1 / -1;
}
.calcVkTransportRow .calcToggle{ flex-shrink:0; }
.calcVkTransportLabel{
  font-size:11px;
  font-weight:700;
  color:var(--mut);
  white-space:nowrap;
  cursor:pointer;
}

/* ═══════════════════════════════════════════════
   KPI TILES (read-only computed values)
   ═══════════════════════════════════════════════ */
.calcKpiTile{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 12px;
  border-radius:8px;
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.06);
}
html[data-theme=light] .calcKpiTile{
  background:rgba(0,0,0,.015);
  border-color:rgba(0,0,0,.06);
}
.calcKpiTile .kpiLabel{
  font-size:10.5px;
  font-weight:700;
  color:var(--mut);
  letter-spacing:.2px;
}
.calcKpiTile .kpiVal{
  font-size:14px;
  font-weight:900;
  color:var(--txt);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.calcKpiTile .kpiVal.accent{ color:var(--accent, #3b82f6); }

.calcKpiGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:6px;
}
.calcKpiGrid .calcKpiSectionTitle{
  grid-column:1 / -1;
  font-size:11px;
  font-weight:700;
  color:var(--mut);
  letter-spacing:.2px;
  margin-bottom:2px;
}

/* ── Readonly computed fields (legacy support) ── */
.calcReadonly{
  color:var(--mut) !important;
  background:rgba(255,255,255,.02) !important;
}

/* ═══════════════════════════════════════════════
   SPLIT LAYOUT (inputs left, results right)
   ═══════════════════════════════════════════════ */
.calcSplitLayout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
}
@media(max-width:700px){
  .calcSplitLayout{
    grid-template-columns:1fr;
  }
}
.calcSplitLeft{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.calcSplitRight{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ═══════════════════════════════════════════════
   EXTRA COSTS (flex rows)
   ═══════════════════════════════════════════════ */
.calcExtraRow{
  display:flex;
  align-items:stretch;
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
html[data-theme=light] .calcExtraRow{
  border-bottom-color:rgba(0,0,0,.06);
}
.calcExtraRow .ctl{ font-size:12px; }
.calcExtraRow > input[type="text"]{ flex:1; min-width:0; }
/* (calcExtraVkLabel removed – replaced by calcExtraVkWrap + calcToggle) */

/* ── Grid full-width row (for sub-headings inside fourCol grid) ── */
.calcGridFullRow{
  grid-column:1 / -1;
  border-top:1px solid var(--bd);
  margin-top:4px;
  padding-top:10px;
}
.calcSubSectionHd{
  font-size:9.5px;
  font-weight:700;
  color:var(--mut);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ── Extra cost row: delete button ── */
.calcExtraDelBtn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  border-radius:8px;
  border:1px solid rgba(239,68,68,.2);
  background:rgba(239,68,68,.06);
  color:#ef4444;
  cursor:pointer;
  transition:all .15s;
  padding:0;
}
.calcExtraDelBtn:hover{
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.4);
}
.calcExtraDelBtn .ic{ width:15px; height:15px; }

/* ── Extra cost row: Im VK toggle wrapper ── */
.calcExtraVkWrap{
  display:flex;
  align-items:center;
  align-self:center;
  gap:6px;
  flex-shrink:0;
}
.calcExtraVkText{
  font-size:11px;
  font-weight:600;
  color:var(--mut);
  white-space:nowrap;
  user-select:none;
}

/* ── Freight bar (mode + VK toggle side-by-side) ── */
.calcFreightBar{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:14px;
  padding:10px 14px;
  border:1px solid var(--bd);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
html[data-theme=light] .calcFreightBar{ background:rgba(0,0,0,.015); }
.calcFreightBarLeft{
  display:flex;
  align-items:center;
  gap:10px;
}
.calcFreightBarRight{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
@media(max-width:700px){
  .calcFreightBar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .calcFreightBarRight{ margin-left:0; }
}

/* ── Freight mode selector ── */
.calcFreightMode{
  display:inline-flex;
  border:1px solid var(--bd);
  border-radius:10px;
  overflow:hidden;
}
.calcFreightMode button{
  background:transparent;
  border:none;
  padding:5px 12px;
  font-size:11px;
  font-weight:700;
  color:var(--mut);
  cursor:pointer;
  transition:background .15s, color .15s;
  letter-spacing:.02em;
}
.calcFreightMode button.on{
  background:var(--accent, #3b82f6);
  color:#fff;
}

/* ── Packaging accordion wrapper ── */
.calcPkgAccordion{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--bd);
}

/* ── Computed (read-only) field styling ── */
.calcComputed{
  height:38px;
  border-radius:10px;
  border:1px solid rgba(59,130,246,.25);
  background:rgba(59,130,246,.06);
}
.calcComputed .tierVal{
  font-size:13px;
  font-weight:700;
  color:var(--accent, #3b82f6);
  padding:8px 10px;
  display:block;
  line-height:1.4;
}
html[data-theme=light] .calcComputed{
  background:rgba(59,130,246,.06);
  border-color:rgba(59,130,246,.2);
}
html[data-theme=light] .calcComputed .tierVal{ color:#2563eb; }

/* ── Tier header label ── */
.tierLabelHdr{
  font-weight:700;
  color:#fff;
  font-size:13px;
}
html[data-theme=light] .tierLabelHdr{ color:var(--txt); }

/* ═══════════════════════════════════════════════
   RESULT CARDS
   ═══════════════════════════════════════════════ */
.calcResultGrid{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.calcResultCard{
  background:transparent;
  border:none;
  border-radius:0;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.calcResultCard:last-child{ border-bottom:none; }
html[data-theme=light] .calcResultCard{ border-bottom-color:rgba(0,0,0,.04); }

.calcResultCard .rlabel{
  font-size:10.5px;
  font-weight:700;
  color:var(--mut);
  letter-spacing:.2px;
  margin-bottom:1px;
}
.calcResultCard .rval{
  font-size:14px;
  font-weight:900;
  color:var(--txt);
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.calcResultCard .rval.green{ color:#4ade80; }
.calcResultCard .rval.yellow{ color:#fbbf24; }
.calcResultCard .rval.red{ color:#ef4444; }

/* Landed Cost card highlight */
.calcResultCard.highlight{
  border-bottom-color:color-mix(in srgb, var(--accent, #3b82f6) 25%, transparent);
  background:rgba(59,130,246,.03);
  border-radius:6px;
  padding:6px 8px;
  border:1px solid rgba(59,130,246,.12);
}
.calcResultCard.highlight .rval{ font-size:16px; color:var(--accent, #3b82f6); }

/* ── Result sub-groups – 3-column layout ── */
.calcResultGroupsWrap{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  align-items:start;
}
@media(max-width:900px){
  .calcResultGroupsWrap{ grid-template-columns:1fr; }
}
.calcResultGroup{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  padding:10px 12px;
}
html[data-theme=light] .calcResultGroup{
  background:rgba(0,0,0,.012);
  border-color:rgba(0,0,0,.05);
}
.calcResultGroupTitle{
  font-size:11px;
  font-weight:700;
  color:var(--mut);
  letter-spacing:.2px;
  margin-bottom:8px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
html[data-theme=light] .calcResultGroupTitle{
  border-bottom-color:rgba(0,0,0,.05);
}

/* ── Margin traffic light ── */
.calcMargin{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:800;
  font-size:13px;
}
.calcMargin.green{ color:#4ade80; }
.calcMargin.yellow{ color:#fbbf24; }
.calcMargin.red{ color:#ef4444; }

/* ── Waterfall chart (SVG) ── */
.calcWaterfall{
  width:100%;
  max-width:100%;
  margin:4px auto;
}
.calcWaterfall svg{ width:100%; height:auto; }
.calcWfBar{ transition:height .3s, y .3s; }
.calcWfLabel{
  font-size:10px;
  fill:var(--mut);
  text-anchor:middle;
  font-weight:600;
}
.calcWfVal{
  font-size:10px;
  font-weight:800;
  fill:var(--txt);
  text-anchor:middle;
}

/* ── Charts row – 2 col: waterfall bigger, gauge smaller ── */
.calcCharts{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:12px;
  align-items:start;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.05);
}
@media(max-width:700px){
  .calcCharts{ grid-template-columns:1fr; }
}
html[data-theme=light] .calcCharts{
  border-top-color:rgba(0,0,0,.06);
}
.calcChartBlock{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  padding:10px 12px;
}
html[data-theme=light] .calcChartBlock{
  background:rgba(0,0,0,.012);
  border-color:rgba(0,0,0,.05);
}

/* ── Margin gauge ── */
.calcGauge{
  width:100%;
  max-width:180px;
  margin:4px auto;
}
.calcGauge svg{ width:100%; height:auto; }

/* ── Action bar (Save/Cancel/Export buttons) ── */
.calcActionBar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 18px;
  margin-top:8px;
  border-top:1px solid var(--bd);
}

/* ── Profit summary bar ── */
.calcProfitBar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(59,130,246,.06), rgba(34,197,94,.04)),
    var(--card);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
html[data-theme=light] .calcProfitBar{
  border-color:rgba(0,0,0,.06);
  background:linear-gradient(135deg, rgba(59,130,246,.04), rgba(34,197,94,.03)), var(--card);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.calcProfitItem{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:100px;
}
.calcProfitLabel{
  font-size:10.5px;
  font-weight:700;
  color:var(--mut);
  letter-spacing:.2px;
}
.calcProfitValue{
  font-size:16px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  color:var(--txt);
}
.calcProfitSep{
  font-size:16px;
  color:var(--mut);
  font-weight:300;
  padding:0 4px;
  align-self:center;
}
.calcProfitHighlight{
  padding:8px 14px;
  border-radius:10px;
  margin-left:auto;
}
.calcProfitHighlight.green{ background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.18); }
.calcProfitHighlight.green .calcProfitValue{ color:#4ade80; }
.calcProfitHighlight.yellow{ background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.18); }
.calcProfitHighlight.yellow .calcProfitValue{ color:#fbbf24; }
.calcProfitHighlight.red{ background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.18); }
.calcProfitHighlight.red .calcProfitValue{ color:#ef4444; }
@media(max-width:700px){
  .calcProfitBar{ gap:6px; padding:10px 12px; }
  .calcProfitItem{ min-width:70px; }
  .calcProfitValue{ font-size:13px; }
  .calcProfitHighlight{ margin-left:0; }
}

/* ── Highlighted readonly field ── */
.calcHighlightField{
  font-weight:800 !important;
  color:var(--accent, #3b82f6) !important;
}

/* ── EUSt toggle ── */
.calcToggleRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
}
.calcToggle{
  position:relative;
  width:38px;
  height:20px;
  background:rgba(255,255,255,.1);
  border-radius:10px;
  cursor:pointer;
  transition:background .2s;
  border:1px solid var(--bd);
  flex-shrink:0;
}
html[data-theme=light] .calcToggle{ background:rgba(0,0,0,.1); }
.calcToggle.on{ background:var(--accent, #3b82f6); border-color:var(--accent, #3b82f6); }
.calcToggle::after{
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s;
}
.calcToggle.on::after{ transform:translateX(18px); }

/* ── Flash animation ── */
@keyframes calcHighlight{
  0%{ background:rgba(59,130,246,.15); }
  100%{ background:transparent; }
}
.calcFlash{ animation:calcHighlight .6s ease-out; }

/* ── Anti-dumping warning ── */
.calcAD{ color:#ef4444; font-weight:800; }

/* ── Add button (dashed accent) ── */
.calcAddBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(59,130,246,.06);
  border:1px dashed rgba(59,130,246,.3);
  border-radius:10px;
  color:var(--accent, #3b82f6);
  padding:8px 14px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  transition:all .15s;
}
.calcAddBtn:hover{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.45);
}
html[data-theme=light] .calcAddBtn{
  color:#2563eb;
  background:rgba(59,130,246,.05);
}

/* ── Sub-section header ── */
.calcSubHead{
  font-size:12px;
  font-weight:700;
  color:var(--mut);
  letter-spacing:.25px;
  margin:8px 0 6px;
}

/* ── Notes expandable ── */
.calcNotesWrap textarea{
  transition:height .2s ease;
}
.calcNotesWrap.compact textarea{
  max-height:48px;
  overflow:hidden;
  resize:none;
}
.calcNotesToggle{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:var(--accent, #3b82f6);
  cursor:pointer;
  margin-top:4px;
  padding:2px 0;
}
.calcNotesToggle:hover{
  text-decoration:underline;
}

/* ── Per-product result breakdown ── */
.calcBreakdown{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--bd);
}
.calcBreakdown .bi{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--chip, rgba(255,255,255,.04));
  border:1px solid var(--bd);
  font-size:11.5px;
  line-height:1;
  white-space:nowrap;
}
html[data-theme=light] .calcBreakdown .bi{ background:rgba(0,0,0,.02); }

.calcBreakdown .bi .bl{ color:var(--mut); font-weight:600; }
.calcBreakdown .bi .bv{ font-weight:900; color:var(--txt); font-variant-numeric:tabular-nums; }

.calcBreakdown .bi.landed{
  background:rgba(59,130,246,.08);
  border-color:rgba(59,130,246,.18);
}
.calcBreakdown .bi.landed .bl,
.calcBreakdown .bi.landed .bv{ color:var(--accent, #3b82f6); font-weight:900; }
.calcBreakdown .bi.margin-pill{ border:none; padding:5px 0 5px 6px; background:none; }

/* ── Light theme tweaks ── */
html[data-theme=light] .calcProductCard{ border-color:rgba(0,0,0,.08); }
html[data-theme=light] .calcResultCard{ border-color:rgba(0,0,0,.06); }

/* ═══════════════════════════════════════════════
   STAFFELKALKULATION TABLE (v7)
   ═══════════════════════════════════════════════ */

/* 4-column form grid for header */
.calcFormGrid.fourCol{
  grid-template-columns: repeat(4, 1fr);
}
/* 5-column form grid (packaging, matches assumptions width) */
.calcFormGrid.fiveCol{
  grid-template-columns: repeat(5, 1fr);
}
@media(max-width:900px){ .calcFormGrid.fiveCol{ grid-template-columns: repeat(3, 1fr); } }
@media(max-width:500px){ .calcFormGrid.fiveCol{ grid-template-columns: 1fr; } }
@media(max-width:900px){ .calcFormGrid.fourCol{ grid-template-columns: 1fr 1fr; } }
@media(max-width:500px){ .calcFormGrid.fourCol{ grid-template-columns: 1fr; } }

/* Assumptions grid: auto-fill responsive */
.calcFormGrid.assumptions{
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:6px 12px;
}

/* Tier table wrapper */
.calcTierTableWrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 -18px;
  padding:0 18px;
}

/* Tier table – override global table styles from index.html */
.calcTierTable{
  width:100%;
  min-width:480px;
  border-collapse:collapse !important;
  border-spacing:0 !important;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.calcTierTable th,
.calcTierTable td{
  padding:5px 10px;
  text-align:right;
  border-bottom:1px solid rgba(255,255,255,.04);
  white-space:nowrap;
}
html[data-theme=light] .calcTierTable th,
html[data-theme=light] .calcTierTable td{
  border-bottom-color:rgba(0,0,0,.06);
}

/* Label column (sticky) */
.calcTierTable .tierLabel{
  text-align:left;
  font-weight:600;
  color:var(--mut);
  position:sticky;
  left:0;
  background:var(--card);
  z-index:1;
  min-width:170px;
  font-size:12px;
  padding-left:14px;
}

/* Tier column headers – override global thead th sticky/cursor */
.calcTierTable thead th{
  font-size:13px;
  font-weight:800;
  color:var(--txt);
  padding:10px;
  border-bottom:2px solid var(--bd);
  min-width:130px;
  position:static !important;
  cursor:default !important;
  z-index:auto !important;
}
.calcTierTable thead th:first-child{
  text-align:left;
  min-width:170px;
  position:sticky !important;
  left:0;
  background:var(--card);
  z-index:2 !important;
  cursor:default !important;
}

/* Tier column header – th itself, no extra wrapper needed */
.tierColHdr{
  text-align:center;
  white-space:nowrap;
}
.tierColHdr span{
  vertical-align:middle;
}
.tierColHdr .tierRemoveBtn{
  vertical-align:middle;
  margin-left:6px;
}

/* Row group headers (EINKAUF, LOGISTIK, etc.) */
.calcTierTable .tierGroupHeader td{
  font-size:10px;
  font-weight:900;
  color:var(--accent, #3b82f6);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding-top:16px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(59,130,246,.15);
  background:rgba(59,130,246,.02);
}
html[data-theme=light] .calcTierTable .tierGroupHeader td{
  background:rgba(59,130,246,.03);
  border-bottom-color:rgba(59,130,246,.12);
}

/* Tier cells */
.calcTierTable .tierCell{
  font-weight:600;
  color:var(--txt);
}

/* Input cells */
.calcTierTable .tierIn{
  width:90px;
  text-align:right;
  font-size:12px;
  font-weight:700;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid rgba(59,130,246,.2);
  background:rgba(59,130,246,.04);
  color:var(--txt);
  transition:border-color .15s, background .15s;
}
html[data-theme=light] .calcTierTable .tierIn{
  background:rgba(59,130,246,.05);
  border-color:rgba(59,130,246,.2);
}
.calcTierTable .tierIn:focus{
  outline:none;
  border-color:var(--accent, #3b82f6);
  background:rgba(59,130,246,.08);
  box-shadow:0 0 0 2px rgba(59,130,246,.12);
}

/* Computed values */
.calcTierTable .tierVal{
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.calcTierTable .tierVal.green{ color:#4ade80; }
.calcTierTable .tierVal.yellow{ color:#fbbf24; }
.calcTierTable .tierVal.red{ color:#ef4444; }

/* Highlighted rows (Einstandspreis, VK netto) */
.calcTierTable .tierHighlight td{
  font-weight:900;
  color:var(--accent, #3b82f6);
  background:rgba(59,130,246,.04);
}
.calcTierTable .tierHighlight .tierLabel{
  color:var(--accent, #3b82f6);
  font-weight:800;
}
html[data-theme=light] .calcTierTable .tierHighlight td{
  background:rgba(59,130,246,.05);
}

/* Profit row */
.calcTierTable .tierProfitRow td{
  padding-top:8px;
  padding-bottom:8px;
  border-top:2px solid var(--bd);
  font-weight:900;
  font-size:13px;
}
.calcTierTable .tierProfitRow .tierLabel{
  font-weight:900;
  font-size:13px;
  color:var(--txt);
}
.calcTierTable .tierProfit{
  font-weight:900;
  font-size:13px;
}
.calcTierTable .tierProfit.green{ color:#4ade80; }
.calcTierTable .tierProfit.red{ color:#ef4444; }

/* Anti-dumping row */
.calcTierTable .tierAD td{
  color:#ef4444;
}
.calcTierTable .tierAD .tierLabel{
  color:#ef4444;
}

/* Add tier column */
.calcTierTable .tierAddCol{
  min-width:50px;
  text-align:center;
  vertical-align:top;
  padding:0;
}

/* Add tier button */
.tierAddBtn{
  background:rgba(59,130,246,.06);
  border:1px dashed rgba(59,130,246,.25);
  border-radius:8px;
  color:var(--accent, #3b82f6);
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s;
}
.tierAddBtn:hover{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.4);
}
.tierAddBtn .ic{ width:16px; height:16px; }

/* Remove tier button */
.tierRemoveBtn{
  font-size:16px;
  color:var(--mut);
  background:none;
  border:none;
  cursor:pointer;
  padding:0 2px;
  opacity:.4;
  transition:opacity .15s, color .15s;
  line-height:1;
}
.tierRemoveBtn:hover{
  opacity:1;
  color:#ef4444;
}

/* Margin input wrapper with mode toggle */
.tierMarginWrap{
  display:flex;
  align-items:center;
  gap:4px;
  justify-content:flex-end;
}
.tierMarginWrap .tierIn,
.tierMarginWrap .tierVkInput{
  width:75px;
}

/* Mode toggle button (Aufschlag% <-> VK) */
.tierModeBtn{
  background:rgba(255,255,255,.06);
  border:1px solid var(--bd);
  border-radius:5px;
  color:var(--mut);
  font-size:9px;
  font-weight:800;
  padding:2px 5px;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  line-height:1.2;
}
.tierModeBtn:hover{
  background:rgba(59,130,246,.08);
  color:var(--txt);
}
.tierModeBtn.on{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.25);
  color:#f59e0b;
}
html[data-theme=light] .tierModeBtn{
  background:rgba(0,0,0,.04);
}
html[data-theme=light] .tierModeBtn.on{
  background:rgba(245,158,11,.1);
  color:#d97706;
}

/* Responsive: mobile tier table */
@media(max-width:700px){
  .calcTierTable .tierLabel{
    min-width:130px;
    font-size:11px;
    padding-left:8px;
  }
  .calcTierTable .tierIn{
    width:70px;
    font-size:11px;
  }
  .tierMarginWrap .tierIn,
  .tierMarginWrap .tierVkInput{
    width:60px;
  }
}

/* Fracht-Modus label */
.calcFreightMode button:not(:last-child){
  border-right:1px solid var(--bd);
}

/* ── Print / PDF ── */
@media print{
  body *{ visibility:hidden; }
  #mCalc, #mCalc *{ visibility:visible; }
  #mCalc{
    position:absolute;
    left:0; top:0;
    width:100%;
    background:#fff;
  }
  .dlg.calcDlg{
    max-height:none;
    overflow:visible;
    width:100%;
    border:none;
    box-shadow:none;
  }
  .dlg.calcDlg .calcDetail{
    max-height:none;
    overflow:visible;
  }
  .dlg.calcDlg > .x{ display:none!important; }
  .calcActionBar,
  .calcSectionNav,
  .calcAddBtn,
  .calcProductRemove,
  .calcExtraDelBtn,
  .calcPkgToggle,
  .calcFreightMode,
  .calcHsLookupBtn,
  .calcNotesToggle{ display:none!important; }
  .calcProfitBar{ position:static; backdrop-filter:none; }
  .calcSection{
    break-inside:avoid;
    border:1px solid #ddd;
    backdrop-filter:none;
  }
  .calcProductCard.collapsed .calcProductBody{ display:block!important; }
  .calcAccordionBody{ max-height:none!important; opacity:1!important; }
}

/* ── Hide blue accent line on cards inside calc sections ── */
.calcSection .card.pad::before{ display:none; }
.calcSection .card.pad{ padding-top:14px; }

/* ── Calc file attachments ── */
.calcListGrid .calcFoto{ display:flex; align-items:center; justify-content:center; }
.calcListGrid .calcDok{ font-size:13px; }
.calcImgPreview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.calcImgPreview img{ width:80px; height:80px; object-fit:cover; border-radius:10px; border:1px solid var(--bd); cursor:pointer; transition:transform .12s; }
.calcImgPreview img:hover{ transform:scale(1.06); }
.calcDocRow{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--bd); border-radius:10px; padding:8px 10px; gap:10px;
}
.calcDocRow .calcDocInfo{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calcDocRow .calcDocActions{ display:flex; gap:6px; flex-shrink:0; }
.calcFileOverlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
.calcFileOverlay img{
  max-width:90vw; max-height:90vh; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.calcFileOverlay .calcFileClose{
  position:absolute; top:20px; right:20px;
  background:rgba(255,255,255,.15); border:none; color:#fff;
  font-size:28px; width:44px; height:44px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.calcFileOverlay .calcFileClose:hover{ background:rgba(255,255,255,.3); }

/* ── Calc → Order: Tier Picker & Confirm ── */
.calcTierPickRow{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border:1px solid var(--bd); border-radius:8px;
  cursor:pointer; margin-bottom:8px; transition:background .15s;
  gap:12px; font-size:14px;
}
.calcTierPickRow:hover{ background:var(--card); border-color:var(--ok); }
.calcOrderMatchSection{ margin-bottom:14px; }
.calcOrderMatchSection label{ font-weight:600; margin-bottom:4px; display:block; }
.calcOrderMatchSection select{ width:100%; }
.calcOrderSummary{
  background:var(--card); border-radius:8px; padding:12px;
  margin-bottom:16px; font-size:14px; line-height:1.6;
}