/* ============================================================================
   Home page — pages/home.js
   ============================================================================
   Only what cabinet.css does not already say: the debt card, the action tiles,
   the figures, the two lists side by side and the welcome steps. Colours come
   from the tokens in /css/app.css alone, so the dark theme needs nothing here.

   Two layout choices worth knowing. The debt card and the list panels size
   their insides with container queries rather than the viewport, because the
   same card is full-width on a phone, two-thirds of the row beside the COD
   tile on a desktop, and a 430px column when the pickups panel sits beside the
   shipments — the viewport says nothing about which. Where container queries
   are missing, everything falls back to the stacked phone layout, which works
   at any width. And a list row is a grid, not the shared flex row: on a phone
   the status pill drops to a line of its own, because an 18-digit waybill
   number beside «Доставка не удалась» does not fit in 343px and a truncated
   number is useless.
   ========================================================================== */

.cab-home-h2 { font-size: 15px; font-weight: 650; color: var(--text-2); letter-spacing: -.01em; }

/* Something at least 44px high for a thumb, whatever the button's size class. */
.cab-home-tap { min-height: 44px; }

/* ── The summary failed ─────────────────────────────────────────────────── */

.cab-home-failure { align-items: center; flex-wrap: wrap; }
.cab-home-failure__text { flex: 1 1 200px; min-width: 0; }
.cab-home-failure__retry { min-height: 44px; }

/* ── Money: what they owe, and what we owe a merchant ───────────────────── */

.cab-home-money { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .cab-home-money--pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.cab-home-debt {
  container-type: inline-size;
  padding: 18px;
  border-top: 3px solid var(--brand);
}
.cab-home-debt--overdue { border-top-color: var(--danger); }

.cab-home-debt__inner { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

.cab-home-debt__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cab-home-debt__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-3);
}
.cab-home-debt__value {
  font-size: 34px; font-weight: 750; line-height: 1.1; letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.cab-home-debt__unit { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text-3); }
.cab-home-debt__cta { margin-top: 12px; min-height: 44px; width: 100%; }

.cab-home-debt__parts {
  list-style: none; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.cab-home-debt__part { font-size: 14px; }
.cab-home-debt__part + .cab-home-debt__part { border-top: 1px dashed var(--border-2); }
/* Each part is a link to what makes it up: the whole line is the target. */
.cab-home-debt__link {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 0;
  color: inherit; text-decoration: none;
}
.cab-home-debt__link:hover { text-decoration: none; }
.cab-home-debt__link:hover .cab-home-debt__name { text-decoration: underline; text-underline-offset: 3px; }
.cab-home-debt__link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.cab-home-debt__what { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cab-home-debt__name { display: inline-flex; align-items: center; gap: 6px; }
.cab-home-debt__count { font-size: 12.5px; color: var(--text-3); }
.cab-home-debt__sum { font-weight: 650; white-space: nowrap; }
.cab-home-debt__chev { flex: 0 0 auto; color: var(--text-4); }
.cab-home-debt__part--overdue { color: var(--danger); }
.cab-home-debt__part--overdue .cab-home-debt__chev { color: inherit; opacity: .7; }

@container (min-width: 520px) {
  .cab-home-debt__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: center; }
  .cab-home-debt__cta { width: auto; }
  .cab-home-debt__parts { border-top: 0; border-left: 1px solid var(--border); padding-left: 20px; }
}

/* Nothing owed: a sentence with a tick, not a large nought. */
.cab-home-clear { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.cab-home-clear__icon {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--success-soft); border: 1px solid var(--success-border); color: var(--success);
}
.cab-home-clear__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; }
.cab-home-clear__text strong { font-size: 15px; font-weight: 650; }

.cab-home-cod { justify-content: center; }

/* ── Quick actions ──────────────────────────────────────────────────────── */

/* As many equal columns as there are tiles — two when the viewer may not call a courier. */
.cab-home-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }

.cab-home-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 14px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  color: var(--text); text-align: center; text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.cab-home-action:hover { text-decoration: none; border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.cab-home-action:active { transform: translateY(1px); }
.cab-home-action:focus-visible { outline: none; box-shadow: var(--ring); }

.cab-home-action__icon {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r-md);
  display: grid; place-content: center;
  background: var(--brand-soft); color: var(--brand);
}
.cab-home-action__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-home-action__label { font-size: 14px; font-weight: 650; line-height: 1.25; }
.cab-home-action__hint { display: none; font-size: 12.5px; color: var(--text-3); line-height: 1.35; }

.cab-home-action--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.cab-home-action--primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.cab-home-action--primary .cab-home-action__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.cab-home-action--primary .cab-home-action__hint { color: rgba(255, 255, 255, .82); }

@media (min-width: 640px) {
  .cab-home-action {
    flex-direction: row; justify-content: flex-start; gap: 14px;
    min-height: 84px; padding: 16px; text-align: left;
  }
  .cab-home-action__hint { display: block; }
}

/* ── Thirty days in four figures ────────────────────────────────────────── */

.cab-home-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cab-home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .cab-home-stats .cab-stat { padding: 14px 12px; }
  .cab-home-stats .cab-stat__value { font-size: 23px; }
}
/* A tile is a link to its chip on the shipments list. */
.cab-home-stat {
  color: inherit; text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cab-home-stat:hover { text-decoration: none; border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.cab-home-stat:focus-visible { outline: none; box-shadow: var(--ring); }
.cab-home-stat--alert { background: var(--warning-soft); border-color: var(--warning-border); }
.cab-home-stat--alert:hover { border-color: var(--warning); }
.cab-home-stat--alert .cab-stat__label,
.cab-home-stat--alert .cab-stat__value { color: var(--warning); }

/* ── Recent shipments and open pickups ──────────────────────────────────── */

.cab-home-lists { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .cab-home-lists--pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.cab-home-panel { container-type: inline-size; overflow: hidden; }
.cab-home-panel .card__header { justify-content: space-between; flex-wrap: nowrap; }
.cab-home-panel .card__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A 44px target inside the 59px header: the negative margins keep the bar its height.
   On a phone it says only «Все», so the panel's own title is the part left whole. */
.cab-home-more { height: 44px; margin: -7px -8px -7px auto; flex: 0 0 auto; }
.cab-home-more__short { display: none; }
@container (max-width: 399px) {
  .cab-home-more__long { display: none; }
  .cab-home-more__short { display: inline; }
}

.cab-home-panel__error {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 16px; text-align: center; font-size: 13.5px;
}

/* Phone: number and time, then who and where, then the status on its own line. */
.cab-row.cab-home-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title when"
    "sub   sub"
    "pill  pill";
  align-items: center; gap: 3px 12px;
  min-height: 64px;
}
.cab-home-row__title { grid-area: title; }
.cab-home-row__when { grid-area: when; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.cab-home-row__sub { grid-area: sub; }
.cab-home-row__pill { grid-area: pill; display: flex; margin-top: 3px; min-width: 0; }
.cab-home-row__pill .cab-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Room enough: the status moves up beside the number, the time under it. */
@container (min-width: 400px) {
  .cab-row.cab-home-row {
    grid-template-areas:
      "title pill"
      "sub   when";
  }
  .cab-home-row__pill { justify-content: flex-end; margin-top: 0; }
  .cab-home-row__when { text-align: right; }
}

/* ── Welcome, for an account with nothing yet ───────────────────────────── */

.cab-home-welcome {
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 18px;
  background: linear-gradient(180deg, var(--brand-soft) 0, var(--surface) 180px);
}
.cab-home-welcome__title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.cab-home-welcome__text { margin-top: 6px; max-width: 62ch; color: var(--text-2); font-size: 14.5px; }

.cab-home-steps { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cab-home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cab-home-step {
  display: flex; gap: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
@media (min-width: 900px) { .cab-home-step { flex-direction: column; } }
.cab-home-step__num {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 14px;
}
.cab-home-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cab-home-step__title { font-size: 15.5px; font-weight: 650; }
.cab-home-step__text { color: var(--text-3); font-size: 13.5px; line-height: 1.45; margin-bottom: 6px; }
/* margin-top: auto lines the three buttons up when the steps stand side by side. */
.cab-home-step__action { margin-top: auto; align-self: flex-start; min-height: 44px; }
@media (max-width: 559px) { .cab-home-step__action { align-self: stretch; } }

/* ── Loading ────────────────────────────────────────────────────────────── */

.cab-home-skeleton { display: flex; flex-direction: column; gap: 16px; }
.cab-home-skeleton__debt { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cab-home-skeleton__big { height: 34px; width: 180px; }
.cab-home-skeleton__tile { height: 96px; border-radius: var(--r-lg); }
.cab-home-skeleton__row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-bottom: 1px solid var(--border);
}
.cab-home-skeleton__row:last-child { border-bottom: 0; }
@media (min-width: 640px) { .cab-home-skeleton__tile { height: 84px; } }