/* Megrendelések: list, order form and the order detail page (also used by Rendeléstörténet). */

/* The view section is a grid: let wide tables scroll inside .table-wrap instead of widening the page. */
.ol-root > *, .ol-root .panel > * { min-width: 0; }
.ol-root .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr)); }

/* ---------- List ---------- */
.ol-num { font-weight: 600; }
.ol-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.ol-express .icon { width: 0.875rem; height: 0.875rem; }
.ol-age[data-tone="warn"] { color: var(--warn); font-weight: 700; }
.ol-age[data-tone="danger"] { color: var(--danger); font-weight: 700; }

.ol-selbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.625rem 0.875rem; background: var(--panel); border: 2px solid var(--ink);
  box-shadow: inset 6px 0 0 var(--hi-vis); padding-left: 1.25rem;
}
.ol-selbar[hidden] { display: none; }
.ol-missing { display: grid; gap: 0.25rem; margin-top: 0.5rem; padding-left: 1rem; list-style: square; }

/* ---------- Order form ---------- */
.ol-form__title {
  padding-top: 0.25rem; font: 600 0.75rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  border-top: 1px solid var(--line); padding-block: 0.75rem 0;
}
.ol-static { min-height: 2.5rem; display: flex; align-items: center; font-weight: 600; }
.ol-lines { display: grid; gap: 0.625rem; }
.ol-line { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 2.5rem; gap: 0.5rem; align-items: start; }
.ol-line__remove { margin-top: 1.4rem; }
@media (max-width: 479.98px) {
  .ol-line { grid-template-columns: minmax(0, 1fr) 5.5rem 2.5rem; }
}

/* ---------- Detail ---------- */
.ol-headchips { gap: 0.375rem; }
.ol-headchips .icon { width: 0.875rem; height: 0.875rem; }
.ol-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); }
.ol-steps li {
  position: relative; padding: 0.625rem 0.75rem 0.75rem; min-width: 0;
  font: 600 0.6875rem/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
  border-right: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ol-steps li:last-child { border-right: 0; }
.ol-steps li::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--panel-alt); }
.ol-steps li[data-state="done"] { color: var(--ink-2); }
.ol-steps li[data-state="done"]::after { background: var(--ink); }
.ol-steps li[data-state="current"] { color: var(--on-hi-vis); background: var(--hi-vis); }
.ol-steps li[data-state="current"]::after { background: var(--ink-fixed); }
@media (max-width: 479.98px) {
  .ol-steps li { padding-inline: 0.375rem; font-size: 0.625rem; letter-spacing: 0.02em; }
}
.ol-note { white-space: pre-line; }
.ol-free { display: inline-flex; align-items: center; gap: 0.5rem; }

.ol-return { display: grid; gap: 0.5rem; padding: 0.875rem 0; border-top: 1px solid var(--line); }
.ol-return:first-of-type { border-top: 0; padding-top: 0; }
.ol-return__lines { display: grid; gap: 0.375rem; }
.ol-return__lines li { display: flex; flex-wrap: wrap; gap: 0.375rem 0.625rem; align-items: center; }
.ol-return__lines .icon { display: inline; width: 0.875rem; height: 0.875rem; vertical-align: -0.125rem; }
.ol-return__photos { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.ol-noteform { display: grid; gap: 0.5rem; padding-bottom: 0.25rem; }
.ol-noteform .textarea { min-height: 3.75rem; }
.timeline { display: grid; }
.timeline li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink-2); }
.timeline__icon .icon { width: 1.125rem; height: 1.125rem; }
.timeline__icon[data-type="status"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.timeline__icon[data-type="return"] { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.timeline__icon[data-type="created"] { background: var(--hi-vis); border-color: var(--hi-vis); color: var(--on-hi-vis); }
.timeline__text { overflow-wrap: anywhere; white-space: pre-line; }
.timeline__meta { margin-top: 0.125rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }

@media print {
  .ol-noteform, .ol-selbar { display: none !important; }
}