/* ============================================================================
   Barmaso — For Retail › Shop To Shop
   ----------------------------------------------------------------------------
   Three file cards, then the answer: figures, filters, and the list. An
   emergency is red and says so in words; everything else stays quiet so the
   red means something. Cards on a phone, a table on a desk.
   ============================================================================ */

.s2s { display: grid; gap: 16px; padding-bottom: 32px; }

.s2s-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.s2s-title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--pt-ink); letter-spacing: -0.01em; }
.s2s-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--pt-slate); line-height: 1.55; }
.s2s-head .btn { display: inline-flex; align-items: center; gap: 8px; }

.s2s-params { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.s2s-param {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--pt-line); border-radius: 999px; background: #fff;
  font-size: 12.5px; color: var(--pt-slate);
}
.s2s-param b { font-family: var(--font-display); font-size: 14px; color: var(--pt-ink); }
.s2s-param-edit { margin-left: 4px; font-size: 12.5px; font-weight: 700; color: var(--pt-green-700); }

/* --- the three files --------------------------------------------------------- */

.s2s-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s2s-file {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no text" "no do";
  align-items: start; gap: 10px 12px; padding: 16px;
  border: 1.5px dashed #cbd5e1; border-radius: 16px; background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.s2s-file.is-over { border-color: var(--pt-green); background: var(--pt-green-50); }
.s2s-file.is-done { border-style: solid; border-color: #a7f3d0; background: linear-gradient(180deg, #f0fdf4, #fff); }
.s2s-file.is-error { border-style: solid; border-color: #fecaca; background: #fef2f2; }
.s2s-file-no {
  grid-area: no; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: var(--pt-line-soft); color: var(--pt-slate); font-family: var(--font-display); font-weight: 700;
}
.s2s-file.is-done .s2s-file-no { background: var(--pt-green-600); color: #fff; }
.s2s-file-text { grid-area: text; min-width: 0; }
.s2s-file-title { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--pt-ink); }
.s2s-optional { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--pt-line-soft); font-size: 12px; font-weight: 700; color: var(--pt-slate); vertical-align: 1px; }
.s2s-file-hint, .s2s-file-facts { margin: 4px 0 0; font-size: 12.5px; color: var(--pt-slate); line-height: 1.5; }
.s2s-file-name { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--pt-green-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2s-file-error { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: #b91c1c; line-height: 1.5; }
.s2s-file .btn { grid-area: do; justify-self: start; }

/* --- notes, empty ------------------------------------------------------------- */

.s2s-notes { display: grid; gap: 8px; }
.s2s-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fffbeb; color: #92400e; font-size: 13px; line-height: 1.55; }
.s2s-note.is-bad { background: #fef2f2; color: #991b1b; }
.s2s-status:empty { display: none; }
.s2s-status { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.s2s-status.is-ok { background: var(--pt-green-50); color: var(--pt-green-700); }
.s2s-status.is-bad { background: #fef2f2; color: #991b1b; }
.s2s-status.is-info { background: var(--pt-line-soft); color: var(--pt-slate); }

.s2s-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 16px; border: 1px solid var(--pt-line); border-radius: 18px; background: #fff; text-align: center; }
.s2s-empty--small { padding: 24px 16px; }
.s2s-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pt-green-50); color: var(--pt-green-700); }
.s2s-empty-title { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: var(--pt-ink); }
.s2s-empty-sub { margin: 0; max-width: 520px; font-size: 13px; color: var(--pt-slate); line-height: 1.6; }

/* --- figures -------------------------------------------------------------------- */

.s2s-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s2s-kpi {
  position: relative; display: grid; gap: 4px; padding: 16px; border: 1px solid var(--pt-line); border-radius: 16px; background: #fff;
}
.s2s-kpi::before { content: ''; position: absolute; left: 16px; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--pt-line); }
.s2s-kpi.is-lead::before { background: var(--pt-yellow); }
.s2s-kpi.is-urgent::before { background: #dc2626; }
.s2s-kpi-label { font-size: 12.5px; font-weight: 700; color: var(--pt-slate); }
.s2s-kpi-value { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--pt-ink); }
.s2s-kpi.is-urgent .s2s-kpi-value { color: #b91c1c; }
.s2s-kpi-sub { font-size: 12px; color: var(--pt-muted); }

/* --- tools ---------------------------------------------------------------------- */

.s2s-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.s2s-search { flex: 1 1 260px; min-width: 0; }
.s2s-select { flex: 0 1 230px; min-width: 0; }
.s2s-export { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.s2s-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.s2s-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s2s-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--pt-line); border-radius: 999px; background: #fff;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--pt-slate); cursor: pointer;
}
.s2s-chip span { padding: 0 7px; border-radius: 999px; background: var(--pt-line-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.s2s-chip.is-on { border-color: var(--pt-hero-1); background: var(--pt-hero-1); color: #fff; }
.s2s-chip.is-on span { background: rgba(255, 255, 255, 0.2); }
.s2s-chip.is-urgent.is-on { border-color: #b91c1c; background: #b91c1c; }
.s2s-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--pt-line-soft); border: 1px solid var(--pt-line); }
.s2s-view { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--pt-slate); cursor: pointer; }
.s2s-view.is-on { background: #fff; color: var(--pt-hero-1); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.s2s-count { margin-left: auto; font-size: 12.5px; color: var(--pt-muted); font-variant-numeric: tabular-nums; }

/* --- the list --------------------------------------------------------------------- */

.s2s-table-wrap { overflow-x: auto; border: 1px solid var(--pt-line); border-radius: 16px; background: #fff; }
.s2s-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.s2s-table th, .s2s-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pt-line-soft); }
.s2s-table thead th { position: sticky; top: 0; background: #f8fafc; font-size: 12px; font-weight: 700; color: var(--pt-slate); white-space: nowrap; }
.s2s-table .is-num, .s2s-cell-qty { text-align: right; }
.s2s-table tbody tr:last-child td { border-bottom: 0; }
.s2s-table tbody tr:hover td { background: #fafbfc; }
.s2s-table tr.is-urgent td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.s2s-cell-item { min-width: 220px; }
.s2s-code { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--pt-muted); }
.s2s-name { display: block; font-weight: 700; color: var(--pt-ink); line-height: 1.4; }
.s2s-cell-route { white-space: nowrap; }
.s2s-from, .s2s-to { font-weight: 700; color: var(--pt-ink); }
.s2s-arrow { margin: 0 8px; color: var(--pt-green-600); font-weight: 800; }
.s2s-cell-qty { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; color: var(--pt-ink); }
.s2s-pri { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.s2s-pri.is-emergency { background: #fee2e2; color: #b91c1c; }
.s2s-pri.is-standard { background: var(--pt-line-soft); color: var(--pt-slate); }
/* Back to the warehouse: its own colour, apart from the urgent red and the plain grey. */
.s2s-pri.is-return { background: #e0e7ff; color: #3730a3; }
.s2s-to.is-wh { color: #3730a3; }
.s2s-chip.is-return.is-on { border-color: #3730a3; background: #3730a3; }
.s2s-kpi.is-return::before { background: #4f46e5; }
.s2s-kpi.is-return .s2s-kpi-value { color: #3730a3; }
/* A file taken from Order Plan says so, and the sales days say when they are the file's own. */
.s2s-file-from { margin: 4px 0 0; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--pt-green-700); }
.s2s-param.is-file { border-color: var(--pt-green-700); flex-wrap: wrap; max-width: 100%; border-radius: 14px; }
.s2s-param small { font-size: 11.5px; color: var(--pt-slate); }
.s2s-cell-why { font-size: 12px; color: var(--pt-slate); line-height: 1.55; min-width: 260px; }
.s2s-cell-why span { display: block; }
.s2s-more { display: block; margin: 12px auto 0; }

.s2s-routes { display: grid; gap: 8px; }
.s2s-route { border: 1px solid var(--pt-line); border-radius: 14px; background: #fff; overflow: hidden; }
.s2s-route summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 14px 16px; list-style: none; cursor: pointer; }
.s2s-route summary::-webkit-details-marker { display: none; }
.s2s-route[open] summary { background: #f8fafc; border-bottom: 1px solid var(--pt-line-soft); }
.s2s-route-name { font-size: 14px; color: var(--pt-ink); }
.s2s-route-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--pt-slate); font-variant-numeric: tabular-nums; }
.s2s-route-items { list-style: none; margin: 0; padding: 4px 16px 10px; }
.s2s-route-items li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--pt-line-soft); font-size: 13px; }
.s2s-route-items li:last-child { border-bottom: 0; }
.s2s-route-items .s2s-name { font-weight: 600; }
.s2s-route-items b { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 15px; }

/* --- settings ------------------------------------------------------------------- */

.s2s-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--pt-line); border-radius: 18px; background: #fff; }
.s2s-card-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--pt-ink); }
.s2s-card-sub { margin: -8px 0 0; font-size: 12.5px; color: var(--pt-slate); line-height: 1.55; }
.s2s-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s2s-field { display: grid; gap: 5px; align-content: start; }
.s2s-field-label { font-size: 12.5px; font-weight: 800; color: var(--pt-ink); }
.s2s-field-hint { font-size: 12px; color: var(--pt-muted); line-height: 1.45; }
.s2s-switch { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--pt-line-soft); cursor: pointer; }
.s2s-switch input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pt-green-700); flex: none; }
.s2s-switch span { display: grid; gap: 2px; }
.s2s-switch b { font-size: 13.5px; color: var(--pt-ink); }
.s2s-switch small { font-size: 12px; color: var(--pt-slate); line-height: 1.5; }
.s2s-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.s2s-map td { vertical-align: middle; }
.s2s-map .field-input { min-width: 200px; }
.s2s-how { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.s2s-how.is-same, .s2s-how.is-saved { background: #dcfce7; color: #15803d; }
.s2s-how.is-near { background: #fef3c7; color: #b45309; }
.s2s-how.is-none, .s2s-how.is-missing { background: #fee2e2; color: #b91c1c; }
.s2s-how.is-off { background: var(--pt-line-soft); color: var(--pt-slate); }

/* --- narrower ------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .s2s-files { grid-template-columns: minmax(0, 1fr); }
  .s2s-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2s-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .s2s-title { font-size: 20px; }
  .s2s-head .btn { width: 100%; justify-content: center; min-height: 46px; }
  .s2s-file { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .s2s-file .btn { min-height: 42px; }
  .s2s-kpis { gap: 8px; }
  .s2s-kpi { padding: 14px 12px; }
  .s2s-kpi-value { font-size: 22px; }
  .s2s-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2s-search, .s2s-export { grid-column: 1 / -1; }
  .s2s-select { width: 100%; }
  .s2s-export { margin-left: 0; justify-content: center; min-height: 44px; }
  .s2s-count { margin-left: 0; width: 100%; }
  .s2s-fields { grid-template-columns: minmax(0, 1fr); }

  /* The list as cards: the item, the route and the quantity, then why. */
  .s2s-table-wrap { overflow: visible; border: 0; background: none; }
  .s2s-table, .s2s-table tbody { display: block; }
  .s2s-table thead { display: none; }
  .s2s-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px;
    grid-template-areas: "item qty" "route pri" "why why";
    margin-bottom: 8px; padding: 14px; border: 1px solid var(--pt-line); border-radius: 14px; background: #fff;
  }
  .s2s-table tr.is-urgent { border-left: 4px solid #dc2626; }
  .s2s-table tr.is-urgent td:first-child { box-shadow: none; }
  .s2s-table td { padding: 0; border: 0; min-width: 0; }
  .s2s-cell-item { grid-area: item; }
  .s2s-cell-qty { grid-area: qty; font-size: 22px; }
  .s2s-cell-route { grid-area: route; white-space: normal; font-size: 13px; }
  .s2s-cell-pri { grid-area: pri; justify-self: end; align-self: center; }
  .s2s-cell-why { grid-area: why; min-width: 0; padding-top: 8px !important; border-top: 1px solid var(--pt-line-soft) !important; }
  .s2s-route-items li { grid-template-columns: minmax(0, 1fr) auto; }
  .s2s-route-items .s2s-code { grid-column: 1 / -1; }

  .s2s-map tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .s2s-map td { grid-area: auto; }
  .s2s-map td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--pt-muted); }
  .s2s-map .field-input { width: 100%; min-width: 0; }
  .s2s-map .s2s-cell-pri { justify-self: start; }
}


/* --- Order Plan For Retail Shop --------------------------------------------
   Its figures, chips and tables are Shop To Shop's: the two sit side by side
   in Data and are the same kind of work. What is its own is here — a bar
   that says what is being run, the files as a step, the answer as the next,
   and Setting as a page of cards.

   One surface (white on the page's grey), one line weight, one radius for
   cards and a smaller one for what sits inside them. Colour is kept for
   what it means: green is done or due, amber is a warning, red is wrong. */

.op { gap: 18px; }

.op-params { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.op-param { display: grid; gap: 6px; min-width: 0; }
.op-param > .field-label { font-size: 12px; font-weight: 700; color: var(--pt-slate); }
.op-param-input { width: 128px; min-width: 0; }
.op-param-input.op-date { width: 176px; }
.op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.op-actions-gap { flex: 1 1 0; }
.op-icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.op-icon-btn svg { flex: none; }
.op .btn.is-danger, .form-dialog .btn.is-danger { color: #b91c1c; }
.op-muted { color: var(--pt-muted); }
.op-nowrap { white-space: nowrap; }
.op-link { font-weight: 700; color: var(--pt-green-700); text-decoration: none; white-space: nowrap; }
.op-link:hover { text-decoration: underline; }
.op-tag { font-size: 11.5px; }

/* --- what is being run ------------------------------------------------------ */

.op-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 16px 18px;
  border: 1px solid var(--pt-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.op-bar-note { margin: 0 0 0 auto; align-self: center; max-width: 46ch; font-size: 12.5px; line-height: 1.6; color: var(--pt-slate); text-align: right; }
.op-mode { display: grid; min-width: 0; }

/* Two looks, one chosen: a pair that reads as a switch, not as two buttons. */
.op-seg { display: inline-flex; padding: 3px; border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-line-soft); }
.op-seg-btn {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--pt-slate); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.op-seg-btn:hover { color: var(--pt-ink); }
.op-seg-btn.is-on { background: #fff; color: var(--pt-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.04); }
.op-seg-btn:focus-visible { outline: 2px solid var(--pt-ink); outline-offset: 2px; }

.op-callout {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px;
  border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; color: #92400e; font-size: 13px; line-height: 1.6;
}
.op-callout svg { flex: none; margin-top: 2px; }

/* --- the steps -------------------------------------------------------------- */

.op-step { display: grid; gap: 12px; }
.op-step-head { display: flex; align-items: center; gap: 10px; }
.op-step-no { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pt-ink); color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.op-step-title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--pt-ink); }
.op-step-count { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--pt-line-soft); font-size: 12px; font-weight: 700; color: var(--pt-slate); }
.op-step-count.is-full { background: var(--pt-green-50); color: var(--pt-green-700); }

/* --- the files: three it needs in a row, two it can do without beneath -------- */

/* Every file in one go: the first thing under the step's heading. */
.op-many { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.op-many-hint { margin: 0; flex: 1 1 260px; font-size: 12.5px; line-height: 1.55; color: var(--pt-slate); }
@media (max-width: 560px) { .op-many > .btn { width: 100%; justify-content: center; } }
.op-files { display: grid; gap: 10px; }
.op-file-row { display: grid; gap: 12px; }
.op-file-row.is-needed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-file-row.is-spare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-file-label { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--pt-muted); }
.op-file {
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 150px; padding: 16px;
  border: 1.5px dashed #cbd5e1; border-radius: 16px; background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.op-file:hover { border-color: #94a3b8; }
.op-file.is-over { border-color: var(--pt-green); background: var(--pt-green-50); }
.op-file.is-done { border-style: solid; border-color: #a7f3d0; background: linear-gradient(180deg, #f0fdf4, #fff 70%); }
.op-file.is-error { border-style: solid; border-color: #fecaca; background: #fef2f2; }
.op-file-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.op-file-no { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--pt-line-soft); color: var(--pt-slate); font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.op-file.is-done .op-file-no { background: var(--pt-green-600); color: #fff; }
.op-file-title { margin: 0; min-width: 0; font-size: 14.5px; font-weight: 800; color: var(--pt-ink); }
.op-file-optional { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--pt-line-soft); font-size: 11.5px; font-weight: 700; color: var(--pt-slate); }
.op-file-body { display: grid; align-content: start; gap: 4px; min-width: 0; }
.op-file-hint, .op-file-facts { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--pt-slate); overflow-wrap: anywhere; }
.op-file-name { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 13px; font-weight: 700; color: var(--pt-green-700); }
.op-file-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-file-name svg { flex: none; }
.op-file-error { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: #b91c1c; }
/* Which shops Mandalay's warehouse sends to: a tick a shop, as many across as the page has room for. */
.op-mdy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; }
.op-mdy-tick { min-height: 40px; align-items: center; }
.op-mdy-tick.is-off span { color: var(--pt-slate); }
/* A link in a card wraps with the card: the page's other links are short and kept on a line. */
.op-file-link { display: block; font-size: 12.5px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
/* A list that is kept between runs says so, with when and by whom; one that could not be kept says that. */
.op-file-kept { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--pt-green-700); overflow-wrap: anywhere; }
.op-file-kept.is-not { color: #b45309; }
.op-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Before there is an answer: the one thing to press, and what it is waiting for. */
.op-run { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px; border: 1.5px dashed #cbd5e1; border-radius: 16px; background: #fff; }
.op-run.is-ready { border-style: solid; border-color: #a7f3d0; background: linear-gradient(180deg, #f0fdf4, #fff); }
.op-run-btn { min-width: 140px; min-height: 44px; font-size: 15px; }
.op-run-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pt-slate); }
.op-run.is-ready .op-run-note { font-weight: 700; color: var(--pt-green-700); }

/* --- the answer ------------------------------------------------------------- */

.op-result-head, .op-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.op-result-title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pt-ink); overflow-wrap: anywhere; }
.op-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-kpis--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-pickers .op-picked { margin: 0; flex: 1 1 240px; }
.op-result-actions { padding-top: 14px; border-top: 1px solid var(--pt-line); }
.op-day { display: grid; gap: 8px; }
.op-plan { display: grid; gap: 14px; }
.op-plan-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
.op-plan-name { min-width: 0; }
.op-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.op-search { flex: 1 1 220px; max-width: 320px; min-width: 0; }
.op-code { font-family: var(--font-mono); white-space: nowrap; }
.op-lines .fin-td-desc { min-width: 240px; white-space: normal; }
/* A main model standing for its glass group (order-plan-groups.js). */
.op-group-tag { margin-left: 6px; white-space: nowrap; }

/* Old / New Order's numbers: the two for every shop, then an AVG a shop column. */
.op-oldnew-globals { margin-bottom: 4px; }
.op-oldnew-avgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 12px; }
.op-oldnew-avg {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--pt-line); border-radius: 10px; background: #fff;
}
.op-oldnew-avg.is-new { border-color: #a7f3d0; background: var(--pt-green-50); }
.op-oldnew-loc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--pt-ink); }
.op-oldnew-avg .op-param-input { width: 88px; flex: none; text-align: center; }
.op-oldnew-say:empty { display: none; }
/* Old / New's numbers on the page: one line, and the box that changes them. */
.op-oldnew-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.op-oldnew-sum-text { display: grid; gap: 8px; min-width: 0; }
.op-oldnew-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.op-oldnew-all { display: flex; gap: 8px; align-items: center; }
.op-oldnew-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; width: 100%; }
.op-oldnew-foot .op-oldnew-say { margin: 0 auto 0 0; }
dialog.op-box .box-scroll > .op-oldnew-avgs { flex: 1 1 auto; min-height: 160px; overflow: auto; align-content: start; padding: 2px; overscroll-behavior: contain; }
.op-oldnew-avg[hidden] { display: none; }
/* The Stock file's shops: a few on its card, every one in a box. */
.op-file-more { align-self: flex-start; margin-top: 2px; }
.op-shop-list { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.op-shop-chip { padding: 5px 10px; border: 1px solid var(--pt-line); border-radius: 999px; background: #fff; font-size: 13px; color: var(--pt-ink); }
.op-shop-chip[hidden] { display: none; }
.op-shop-count { margin: 0; }
dialog.op-box .box-scroll > .op-shop-list { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 2px; overscroll-behavior: contain; }
/* A plan's lines come a page at a time (pager.js): the page scrolls, not a frame inside it. */
.fin-table-wrap:has(> .op-lines) { max-height: none; overflow-y: hidden; scroll-margin-top: 80px; }
.op-order.is-some { font-weight: 800; color: var(--pt-green-700); }
/* Order Qty put right by hand, before "save": the box, and what had been worked out under it. */
.op-qty-input { width: 88px; min-height: 36px; padding: 4px 8px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-order.is-edited .op-qty-input { border-color: #d97706; background: #fffbeb; }
.op-order.is-edited { color: #b45309; }
.op-was { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--pt-muted); white-space: nowrap; }
.op-lines tr.is-left .op-qty-input { text-decoration: line-through; color: var(--pt-muted); }

/* A plan opened from a list: a box over the page, as wide as the screen allows (a full screen on a phone). */
@media (min-width: 641px) {
  dialog.ucx-sheet.is-wide.op-box { width: min(1280px, calc(100vw - 32px)); max-height: 92vh; }
}
/* The box is as wide as it is: a wide table scrolls sideways in its own frame, the figures above it stay in view. */
.op-box-body { padding-bottom: 4px; grid-template-columns: minmax(0, 1fr); }
.op-box-body .op-plan { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.op-box-body .fin-table-wrap { overflow-x: auto; }

/* Frozen (the user's word, 2026-10-26): in a box the top — figures, search,
   ticks — stays put and only the lines scroll, their headings held, with the
   bar at the foot (Approve) and the sideways scroll always in view. Where the
   top is taller than the screen leaves room for, the box scrolls as a whole. */
dialog.op-box[open] .ucx-sheet-body { display: flex; flex-direction: column; min-height: 0; }
dialog.op-box .op-box-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 0; }
dialog.op-box .op-box-body > *,
dialog.op-box .box-freeze > *,
dialog.op-box .box-scroll > * { flex: none; }
dialog.op-box .op-box-body > .box-freeze { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
dialog.op-box .box-freeze > .box-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
dialog.op-box .box-scroll > .co-wrap,
dialog.op-box .box-scroll > .fin-table-wrap { flex: 1 1 auto; min-height: 160px; max-height: none; overflow: auto; overscroll-behavior: contain; }
dialog.op-box .box-freeze > .orq-bar { position: static; box-shadow: none; }
dialog.op-box .op-box-body > .form-note[hidden] { display: none; }
.op-box-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.op-foot { margin: 6px 0; }
.op-month { margin: 0; }

/* Picking: which shops are kept and sent, and which lines go on the list. */
.op-check { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--pt-ink); cursor: pointer; }
.op-td-pick { width: 40px; }
/* A kept order's ID (OR-Shop-Oct-001), under its shop or its day. */
.op-oid { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--pt-muted); letter-spacing: .01em; overflow-wrap: anywhere; }
.op-shop-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.op-shops tbody tr.is-due { background: var(--pt-green-50); }
.op-lines tr.is-left td:not(.op-td-pick) { color: var(--pt-muted); }
.op-lines tr.is-left .op-order { text-decoration: line-through; font-weight: 400; color: var(--pt-muted); }

/* --- Setting: a page of cards ------------------------------------------------- */

.op-set { display: grid; gap: 16px; max-width: 1120px; }
.op-card { display: grid; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--pt-line); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.op-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.op-card-text { flex: 1 1 320px; min-width: 0; }
.op-card-title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--pt-ink); }
.op-card-hint { margin: 4px 0 0; max-width: 78ch; font-size: 13px; line-height: 1.6; color: var(--pt-slate); }
.op-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.op-card .field-hint { margin: 0; max-width: 78ch; }
.op-set-numbers .op-param { flex: 1 1 150px; }
.op-set-numbers .op-param-input { width: 100%; }

.op-count { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--pt-slate); }
.op-set-shops { display: grid; gap: 10px; min-width: 0; }
.op-shop-table td { vertical-align: top; }
.op-shop-table tbody tr.is-off td { color: var(--pt-muted); }
.op-shop-cell { display: grid; gap: 2px; min-width: 0; }
.op-shop-note { font-size: 12px; line-height: 1.5; color: var(--pt-muted); white-space: normal; }
.op-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border: 1.5px dashed #cbd5e1; border-radius: 14px; text-align: center; font-size: 13.5px; color: var(--pt-slate); }
.op-empty p { margin: 0; max-width: 52ch; line-height: 1.6; }
.op-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--pt-line-soft); color: var(--pt-slate); }

.op-set-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.op-set-list { display: grid; gap: 8px; }
.op-set-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px;
  padding: 12px 14px; border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-bg);
}
.op-set-row-text { display: grid; gap: 2px; min-width: 0; }
.op-set-row-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 14.5px; font-weight: 800; color: var(--pt-ink); overflow-wrap: anywhere; }
.op-set-row-line { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--pt-slate); overflow-wrap: anywhere; }
.op-set-row-line.is-strong { font-weight: 700; color: var(--pt-ink); }
.op-set-row .btn { flex: none; }

.op-set-lark { display: grid; gap: 10px; }
/* A row a group, as Sale Target has: ticked or not, its name, and the way to take it out. */
.op-lark-rows { display: grid; gap: 8px; }
.op-lark-row { display: flex; align-items: center; gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-bg); }
.op-lark-row.is-off .op-lark-name { color: var(--pt-muted); font-weight: 600; }
.op-lark-on { flex: none; align-items: center; }
.op-lark-name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--pt-ink); overflow-wrap: anywhere; }
.op-lark-pick { max-width: 420px; }
.op-set-auto { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--pt-line-soft); }
.op-set-sub { margin: 0; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--pt-ink); }
.op-set-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 12px 14px; border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-bg); font-size: 13.5px; }
.op-set-facts dt { color: var(--pt-slate); }
.op-set-facts dd { margin: 0; color: var(--pt-ink); overflow-wrap: anywhere; }

.op-tick { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--pt-ink); cursor: pointer; }
.op-tick .op-check { margin-top: 2px; }

/* Setup › Lark Relay, drawn with the cards above. */
.lr-form { max-width: 640px; }
.lr-groups { display: grid; gap: 6px; }
.lr-group-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lr-group-list li { padding: 4px 10px; border: 1px solid var(--pt-line); border-radius: 999px; background: var(--pt-bg); font-size: 12.5px; font-weight: 700; color: var(--pt-ink); }
.lr-steps { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--pt-slate); }

/* Saving stays in reach however far down the page the change was made. */
.op-set-save {
  position: sticky; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--pt-line); border-radius: 16px; background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.op-set-save.is-dirty { border-color: #fde68a; }

/* These forms are longer than a phone is tall: the dialog itself scrolls, so its buttons are always reached. */
.form-dialog.op-dialog { overflow-y: auto; overscroll-behavior: contain; }
.op-set-form { display: grid; gap: 12px; margin: 4px 0 12px; }
.op-set-form .field { margin: 0; }
.op-set-form textarea.field-input { min-height: 72px; resize: vertical; }
.op-set-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* A table rule's table, inside its dialog: what it holds, and the sheet in and out. */
.op-set-table { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-bg); }
.op-set-table[hidden] { display: none; }
.op-set-table .field-hint, .op-set-table .op-set-row-line { margin: 0; }
.op-set-pair > [hidden] { display: none; }

@media (max-width: 900px) {
  .op-file-row.is-needed, .op-file-row.is-spare { grid-template-columns: minmax(0, 1fr); }
  .op-file { min-height: 0; }
  .op-bar { padding: 14px; }
  /* On a phone the switch is the width of the bar, its two halves equal. */
  .op-bar .op-param { flex: 1 1 100%; }
  .op-seg { display: flex; }
  .op-seg-btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .op-bar-note { flex-basis: 100%; margin: 0; max-width: none; text-align: left; }
  .op-kpis--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-card { padding: 16px; }
}

@media (max-width: 860px) {
  .op-param { flex: 1 1 130px; }
  .op-param-input, .op-param-input.op-date { width: 100%; }
  .op-search { max-width: none; flex-basis: 100%; }
  .op-lines .fin-td-desc { min-width: 0; }
  .op-step-count { margin-left: 0; }
  .op-step-head { flex-wrap: wrap; }
  .op-actions-gap { display: none; }
  .op-shop-cell { justify-items: end; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .op-seg-btn, .op-file { transition: none; }
}

/* On a phone or a short screen (2026-10-31): the frozen top left the lines a
   sliver ("the items below can hardly be seen"). The box's body scrolls as
   one instead: the figures and search go up out of the way, the lines then
   fill the box with their headings pinned (app.js fitTables), and the bar
   with Approve stays at the foot. A tall screen keeps the frozen top. */
@media (max-width: 640px), (max-height: 760px) {
  dialog.op-box[open] .ucx-sheet-body { display: block; }
  dialog.op-box .op-box-body,
  dialog.op-box .op-box-body > .box-freeze,
  dialog.op-box .box-freeze > .box-scroll { display: grid; grid-template-columns: minmax(0, 1fr); min-height: auto; }
  dialog.op-box .op-box-body,
  dialog.op-box .op-box-body > .box-freeze { gap: 12px; }
  dialog.op-box .box-freeze > .box-scroll { gap: 8px; }
  dialog.op-box .box-scroll > .co-wrap,
  dialog.op-box .box-scroll > .fin-table-wrap { min-height: 0; }
  dialog.op-box .box-freeze > .orq-bar { position: sticky; bottom: 0; z-index: 6; box-shadow: 0 -6px 20px rgba(15, 23, 42, .08); }
}