/* ---------- Orders ---------- */
.order-meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.table--orders .table__head{
  /* Kompakter, mit Fokus auf Material */
    grid-template-columns: 110px 3fr 70px 1.6fr 110px 110px 60px 90px 140px;
}
.table--orders .table__row{
    grid-template-columns: 110px 3fr 70px 1.6fr 110px 110px 60px 90px 140px;
}
.table--orders .order--done{ opacity: .65; }
.table--orders .order--done .order-text{ text-decoration: line-through; }

/* Kommentar als Pill + Tooltip */
.pill-note{ background: rgba(226,232,240,.75); color: rgba(30,41,59,.9); }

/* Aktionen rechts */
.table--orders .order-actions{ justify-content: flex-end; }

/* Sichtbarkeit Desktop/Mobile */
.mobile-only{ display:none; }
.desktop-only{ display:block; }

@media (max-width: 820px){
  .mobile-only{ display:block; }
  .desktop-only{ display:none; }
  /* Cards need flex layout on mobile */
  .orders-cards{ display:flex; }
}

/* iPhone: Apple-like Cards fuer Bestellliste */
.orders-cards{ flex-direction:column; gap: 12px; }
.order-card{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  border: 1px solid rgba(226,232,240,.9);
  border-left: 6px solid rgba(11,91,211,.35);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 14px 16px;
}
.order-card--done{
  opacity: 1;
  background: rgba(248,250,252,.92);
  border-color: rgba(203,213,225,.95);
  border-left-color: rgba(148,163,184,.95);
}

/* Wenn Cards auf Desktop sichtbar sind (z.B. schmale Fenster): etwas "listenartiger" */
@media (min-width: 821px){
  .orders-cards .order-card{
    border-radius: 14px;
    box-shadow: none;
    padding: 8px 10px;
  }
  .orders-cards{ gap: 10px; }
}

/* Desktop: erledigt deutlicher absetzen */
.table--orders .table__row{ background: rgba(255,255,255,.92); border-radius: 12px; }
.table--orders .order--done{
  opacity: 1;
  background: rgba(248,250,252,.75);
}
.order-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.order-card__title{
  font-weight: 800;
  line-height: 1.15;
  font-size: 16px;
  word-break: break-word;
}
.order-card__status{ flex: 0 0 auto; }
.order-card__sub{ margin-top: 6px; line-height: 1.25; word-break: break-word; }
.order-card__meta{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.order-card__meta > div{ display:flex; flex-direction:column; gap: 2px; min-width:0; }
.order-card__meta b{ font-weight: 800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-card__note{ margin-top: 10px; }
.order-card__noteText{ margin-top: 4px; word-break: break-word; line-height: 1.25; }
.order-card__actions{ margin-top: 12px; display:flex; gap: 10px; }
.order-card__actions .btn{ flex: 1 1 0; justify-content:center; }
.orders-toolbar__actions,
.orders-meta,
.orders-meta__actions,
.orders-pagination,
.orders-pagination__actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.orders-toolbar__actions{
  justify-content:flex-end;
}
.orders-meta,
.orders-pagination{
  justify-content:space-between;
}

@media (max-width: 760px){
  .orders-toolbar__actions,
  .orders-meta__actions,
  .orders-pagination__actions{
    width: 100%;
  }
  .orders-toolbar__actions .btn,
  .orders-meta__actions .btn,
  .orders-pagination__actions .btn{
    flex: 1 1 100%;
  }
}

/* iPhone-first: Orders wirken wie Karten */
@media (max-width: 820px){
  .table--orders{ border: none; background: transparent; }
  .table--orders .table__body{ display:flex; flex-direction:column; gap: 10px; padding: 2px; }
  .table--orders .table__row{
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    padding: 12px;
    margin: 0;
    box-shadow: 0 6px 20px rgba(15,23,42,.06);
  }
  .table--orders .table__row > div{ border-bottom: 1px dashed rgba(226,232,240,.9); padding-bottom: 8px; }
  .table--orders .table__row > div:last-child{ border-bottom: none; padding-bottom: 0; }
  .table--orders .table__row > div::before{ font-weight: 900; }
  .table--orders .table__row .btn{ width: auto; }
  .table--orders .table__row > div:last-child{ justify-content: flex-end; }
}

@media (max-width: 820px){
  .table--orders .table__row > div:nth-child(1)::before{ content: "Datum"; }
  .table--orders .table__row > div:nth-child(2)::before{ content: "Material"; }
  .table--orders .table__row > div:nth-child(3)::before{ content: "Menge"; }
  .table--orders .table__row > div:nth-child(4)::before{ content: "Kunde / Auftrag"; }
  .table--orders .table__row > div:nth-child(5)::before{ content: "Besteller"; }
  .table--orders .table__row > div:nth-child(6)::before{ content: "Bestellnr."; }
  .table--orders .table__row > div:nth-child(7)::before{ content: "Kommentar"; }
  .table--orders .table__row > div:nth-child(8)::before{ content: "Status"; }
  .table--orders .table__row > div:nth-child(9)::before{ content: "Aktion"; }

}