/* ============================================================================
   Вызов курьера — styles for pages/pickups.js only
   ============================================================================
   The shared vocabulary (.cab-page, .cab-row, .cab-pill, .cab-steps, .cab-kv,
   .cab-note, .cab-sticky-actions) is in cabinet.css and used as it is. What is
   here is what only these three pages draw: the calendar leaf on a list row,
   the day and time tiles on the form, and the two cards on a заявка.

   Every choice on the form is a tile rather than a select, because the form
   is filled in on a phone and a native picker is a full-screen detour for a
   question with four answers. Tiles are at least 44px tall for a thumb, and
   the inputs go to 16px text below 900px, which is also what stops iOS
   zooming the page every time one is focused.

   Tokens only (app.css defines them for both themes). White appears only on
   a --brand ground, which is what cabinet.css does for its raised tab too.
   ========================================================================== */

/* ── Chips: «Активные» / «Все», and the quick reasons when cancelling ───── */

.cab-pickups-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cab-pickups-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cab-pickups-chip:hover { background: var(--surface-3); color: var(--text); }
.cab-pickups-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.cab-pickups-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.cab-pickups-chip__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-content: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--brand-soft); color: var(--brand);
}
.cab-pickups-chip.is-active .cab-pickups-chip__count { background: color-mix(in srgb, #fff 22%, transparent); color: #fff; }

.cab-pickups-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.cab-pickups-reasons .cab-pickups-chip { min-height: 36px; padding: 0 12px; font-size: 13px; }

@media (max-width: 899px) {
  .cab-pickups-chip { min-height: 44px; }
  .cab-pickups-reasons .cab-pickups-chip { min-height: 40px; }
}

/* ── The list ───────────────────────────────────────────────────────────── */

.cab-pickups-row { min-height: 76px; }

/* A leaf off a desk calendar: the day a courier comes is what the list is
   scanned for, so it is the one thing on the row drawn larger than text. */
.cab-pickups-day {
  flex: 0 0 auto; align-self: center;
  width: 52px; padding: 5px 0 6px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
}
.cab-pickups-day__top {
  max-width: 100%; padding: 0 3px;
  font-size: 10.5px; font-weight: 650; color: var(--text-3); text-transform: lowercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab-pickups-day__num {
  margin: 2px 0 1px;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cab-pickups-day__mon { font-size: 11px; color: var(--text-3); }
.cab-pickups-day.is-today { background: var(--brand-soft); border-color: var(--brand-border); }
.cab-pickups-day.is-today .cab-pickups-day__num,
.cab-pickups-day.is-today .cab-pickups-day__top { color: var(--brand); }
[data-theme="dark"] .cab-pickups-day.is-today .cab-pickups-day__num,
[data-theme="dark"] .cab-pickups-day.is-today .cab-pickups-day__top { color: var(--brand-700); }
/* Done with: still readable, no longer competing with what is coming. */
.cab-pickups-day.is-over { opacity: .6; }

.cab-pickups-row__pieces { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }

/* On a phone the pill has no room beside three lines of text — «Курьер
   назначен» would leave the time window a hundred pixels — so it moves under
   them, and the calendar leaf keeps the left edge to itself. */
@media (max-width: 520px) {
  .cab-pickups-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "day main" "day side";
    column-gap: 12px; row-gap: 6px; align-items: start;
  }
  .cab-pickups-row .cab-pickups-day { grid-area: day; align-self: start; }
  .cab-pickups-row .cab-row__main { grid-area: main; }
  .cab-pickups-row .cab-row__side {
    grid-area: side; flex-direction: row; align-items: center; justify-content: flex-start;
    flex-wrap: wrap; gap: 8px; text-align: left;
  }
}

.cab-pickups-more { padding: 12px 16px; border-top: 1px solid var(--border); }
.cab-pickups-more .btn { min-height: 44px; }

.cab-pickups-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ── The form ───────────────────────────────────────────────────────────── */

.cab-pickups-h {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 16px; font-weight: 650; letter-spacing: -.01em;
}
.cab-pickups-h__n {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700;
}
[data-theme="dark"] .cab-pickups-h__n { color: var(--brand-700); }

.cab-pickups-label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.cab-pickups-hint { margin: 0; font-size: 13px; }

.cab-pickups-restored { align-items: center; }
.cab-pickups-restored__text { flex: 1; min-width: 0; }

/* Past addresses: a strip that scrolls inside itself, never the page. */
.cab-pickups-places {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: -2px -2px 0;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.cab-pickups-place {
  flex: 0 0 auto; max-width: 260px; min-height: 52px;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start;
}
.cab-pickups-place:hover { background: var(--surface-2); }
.cab-pickups-place:focus-visible { outline: none; box-shadow: var(--ring); }
.cab-pickups-place > svg { flex: 0 0 auto; color: var(--text-3); }
.cab-pickups-place__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cab-pickups-place__title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-pickups-place__sub { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-pickups-place.is-active { border-color: var(--brand); background: var(--brand-soft); }
.cab-pickups-place.is-active > svg { color: var(--brand); }

/* «В черте города» or not — two cards, since each needs its sentence. */
.cab-pickups-options { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cab-pickups-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cab-pickups-option {
  display: flex; align-items: flex-start; gap: 10px; min-height: 56px; padding: 12px;
  border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface); cursor: pointer;
}
.cab-pickups-option:hover { background: var(--surface-2); }
.cab-pickups-option input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--brand); }
.cab-pickups-option__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-pickups-option__title { font-weight: 600; }
.cab-pickups-option__sub { font-size: 12.5px; color: var(--text-3); }
.cab-pickups-option.is-active { border-color: var(--brand); background: var(--brand-soft); }

/* The week ahead as tiles, scrolling inside itself on a phone and sharing
   the row out evenly where there is room for all eight. */
.cab-pickups-days {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: -2px -2px 0;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.cab-pickups-dayopt {
  flex: 0 0 auto; width: 76px; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cab-pickups-dayopt:hover { background: var(--surface-2); }
.cab-pickups-dayopt:focus-visible { outline: none; box-shadow: var(--ring); }
.cab-pickups-dayopt__top { font-size: 13px; font-weight: 650; white-space: nowrap; }
.cab-pickups-dayopt__bottom { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.cab-pickups-dayopt--other > svg { color: var(--text-3); }
.cab-pickups-dayopt.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.cab-pickups-dayopt.is-active .cab-pickups-dayopt__bottom,
.cab-pickups-dayopt.is-active > svg { color: color-mix(in srgb, #fff 85%, transparent); }
.cab-pickups-dayopt:disabled { opacity: .45; cursor: not-allowed; background: var(--surface-2); }
@media (min-width: 900px) {
  .cab-pickups-days { overflow: visible; }
  .cab-pickups-dayopt { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Time slots. On a phone the whole day takes a row of its own and the parts
   pair up under it — a part left alone on the last row takes the row too,
   so the grid never ends in half a tile. */
.cab-pickups-slots { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cab-pickups-slot {
  min-height: 56px; min-width: 0; padding: 8px 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cab-pickups-slot:hover { background: var(--surface-2); }
.cab-pickups-slot:focus-visible { outline: none; box-shadow: var(--ring); }
.cab-pickups-slot__name { font-size: 13.5px; font-weight: 650; }
.cab-pickups-slot__time { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.cab-pickups-slot.is-active { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.cab-pickups-slot.is-active .cab-pickups-slot__name { color: var(--brand); }
[data-theme="dark"] .cab-pickups-slot.is-active .cab-pickups-slot__name { color: var(--brand-700); }
.cab-pickups-slot:disabled { opacity: .45; cursor: not-allowed; background: var(--surface-2); }
.cab-pickups-slot--whole,
.cab-pickups-slot:not(.cab-pickups-slot--whole):nth-child(even):last-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .cab-pickups-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cab-pickups-slot--whole,
  .cab-pickups-slot:not(.cab-pickups-slot--whole):nth-child(even):last-child { grid-column: auto; }
}

/* The piece count: minus, the number, plus — all a thumb wide. */
.cab-pickups-stepper { display: flex; align-items: stretch; gap: 8px; }
.cab-pickups-stepper .input {
  flex: 1 1 auto; min-width: 0; height: 44px;
  text-align: center; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.cab-pickups-stepper__btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
.cab-pickups-stepper__btn svg { width: 18px; height: 18px; flex-basis: 18px; }

.cab-pickups-summary {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
}
.cab-pickups-summary > svg { flex: 0 0 auto; color: var(--text-3); }

@media (max-width: 899px) {
  .cab-pickups-form .input,
  .cab-pickups-form .select,
  .cab-pickups-form .textarea { font-size: 16px; }
  .cab-pickups-form .input,
  .cab-pickups-form .select { min-height: 44px; }
  .cab-pickups-summary { flex: 1 1 100%; justify-content: center; margin-right: 0; }
}

/* ── One заявка ─────────────────────────────────────────────────────────── */

.cab-pickups-headline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The stepper drops its labels below 560px (cabinet.css); this line is what
   then says which number is now. */
.cab-pickups-step-caption { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
@media (min-width: 561px) { .cab-pickups-step-caption { display: none; } }

.cab-pickups-grid { align-items: start; }

.cab-pickups-courier { display: flex; align-items: center; gap: 12px; }
.cab-pickups-courier__avatar {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 15px;
}
[data-theme="dark"] .cab-pickups-courier__avatar { color: var(--brand-700); }
.cab-pickups-courier--pending .cab-pickups-courier__avatar { background: var(--surface-3); color: var(--text-3); }
.cab-pickups-courier__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cab-pickups-courier__name { font-weight: 650; overflow-wrap: anywhere; }
.cab-pickups-courier__call { flex: 0 0 auto; min-height: 44px; }

.cab-pickups-counts { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cab-pickups-count {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border);
}
.cab-pickups-count__label { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.cab-pickups-count__value { font-size: 18px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cab-pickups-count__value.cab-muted { font-size: 14px; font-weight: 600; }

/* A secondary button in the danger colour: cancelling is available, not
   recommended, and a solid red block at the head of the page reads as the
   thing to press. */
.cab-pickups-cancel { color: var(--danger); }
.cab-pickups-cancel:hover { border-color: var(--danger-border); background: var(--danger-soft); }

.cab-pickups-row--static { cursor: default; }
.cab-pickups-row--static:hover { background: none; }