/* ======================================================================
   trips.css — logistika TZ ekranlari: reys hayot sikli, ombor, hodisalar.
   Faqat app.css tokenlari (rang, radius, masofa) ishlatiladi — ikkala
   mavzuda (yorug' va to'q ko'k) bir xil to'g'ri ko'rinadi.
   ====================================================================== */

/* ---------- Umumiy ---------- */
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1280px) { .form-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .form-grid--4 { grid-template-columns: 1fr; } }

.trip-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 1150px) { .trip-grid { grid-template-columns: 1fr; } }

.trip-subhead {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-meta); font-weight: 650; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Ombor topshirig'i: bosqichlar lentasi ---------- */
.trip-steps { display: grid; gap: 2px; }
.trip-step {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s2); padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.trip-step:last-child { border-bottom: 0; }
.trip-step__dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--card);
  display: grid; place-items: center; color: var(--on-accent);
}
.trip-step[data-done="1"] .trip-step__dot { background: var(--green); border-color: var(--green); }
.trip-step__label { font-size: var(--fs-body, 13px); font-weight: 600; color: var(--ink); }
.trip-step[data-done="0"] .trip-step__label { color: var(--ink-3); font-weight: 500; }
.trip-step__when { font-size: var(--fs-meta); color: var(--ink-2); text-align: right; }

/* ---------- Hujjatlar ro'yxati ---------- */
.trip-docs { display: grid; gap: var(--s2); }
.trip-doc {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
}
.trip-doc[data-state="given"] { border-color: var(--green-line); background: var(--green-soft); }
.trip-doc[data-state="ready"] { border-color: var(--blue-line); background: var(--blue-soft); }
.trip-doc__icon {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display: grid; place-items: center; background: var(--card-2); color: var(--ink-2);
}
.trip-doc[data-state="given"] .trip-doc__icon { background: var(--green); color: var(--on-accent); }
.trip-doc[data-state="ready"] .trip-doc__icon { background: var(--blue); color: var(--on-accent); }
.trip-doc__body { display: grid; min-width: 0; flex: 1 1 auto; }
.trip-doc__body b { font-size: var(--fs-body, 13px); font-weight: 600; color: var(--ink); }
.trip-doc__body small { font-size: var(--fs-meta); color: var(--ink-2); }
.trip-doc__acts { display: flex; gap: 6px; flex: 0 0 auto; }

/* ---------- Nuqtalar: tanlash, sabab, o'tkazilganlar ---------- */
.trip-stop__check { margin: 4px 2px 0 0; flex: 0 0 auto; width: 16px; height: 16px; }
.trip-stop__reason {
  margin-top: 6px; font-size: var(--fs-meta); color: var(--ink-2);
  padding: 4px 8px; border-left: 3px solid var(--amber); background: var(--amber-soft);
  border-radius: 0 8px 8px 0;
}
.trip-moved { margin-top: var(--s3); }
.trip-moved > summary {
  cursor: pointer; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2);
  padding: 6px 0;
}
.trip-moved .stop { opacity: .72; }

/* ---------- Hodisalar (reys kartochkasida) ---------- */
.trip-incidents { display: grid; gap: var(--s2); }
.trip-incident {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s2);
  align-items: center; text-align: left; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer; color: var(--ink);
}
.trip-incident:hover { background: var(--row-hover); }
.trip-incident__text {
  font-size: var(--fs-body, 13px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-incident small { grid-column: 1 / -1; font-size: var(--fs-meta); color: var(--ink-3); }

/* ---------- O'zgarishlar tarixi ---------- */
.trip-history { display: grid; }
.trip-event {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s3);
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.trip-event:last-child { border-bottom: 0; }
.trip-event__when { display: grid; align-content: start; }
.trip-event__when b { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.trip-event__when small { font-size: var(--fs-meta); color: var(--ink-3); }
.trip-event__body { display: grid; gap: 2px; min-width: 0; }
.trip-event__body b { font-size: var(--fs-body, 13px); font-weight: 600; color: var(--ink); }
.trip-event__body span { font-size: var(--fs-meta); color: var(--ink); }
.trip-event__body small { font-size: var(--fs-meta); color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .trip-event { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Yakunlash oynasi: har buyurtma natijasi ---------- */
.trip-results { display: grid; gap: 6px; }
.trip-results__bar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.trip-result {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--s3); align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.trip-result--closed { grid-template-columns: 28px minmax(0, 1fr) auto; background: var(--card-2); }
.trip-result__seq {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-ink); font-size: 11px; font-weight: 700;
}
.trip-result__body { display: grid; min-width: 0; }
.trip-result__body b {
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-result__body small {
  font-size: 10.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-result__ctl { display: grid; gap: 6px; }
.trip-results__closed { margin-top: var(--s4); }
.trip-results__closed > summary {
  cursor: pointer; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2);
  margin-bottom: var(--s2);
}
@media (max-width: 720px) {
  .trip-result { grid-template-columns: 28px minmax(0, 1fr); }
  .trip-result__ctl { grid-column: 1 / -1; }
}

/* ---------- Reys tuzish: navbat filtrlari ---------- */
.trip-queue__head { border-top: 1px solid var(--line-soft); margin-top: var(--s2); }
.trip-queue__tools { display: grid; gap: 6px; padding: 4px 0 8px; }
.trip-queue__tools .input, .trip-queue__tools .select { min-height: 32px; font-size: var(--fs-meta); }
.trip-queue__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.trip-queue__act { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.trip-queue__act .btn { white-space: nowrap; flex: 0 0 auto; }
.trip-queue-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.trip-tag {
  display: inline-block; font-size: 10px; font-weight: 600; line-height: 1.4;
  padding: 1px 6px; border-radius: var(--r-pill);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-tag--crit { background: var(--red-soft); color: var(--red-ink); }
.trip-tag--warn { background: var(--amber-soft); color: var(--amber-ink); }
.trip-tag--info { background: var(--blue-soft); color: var(--blue-ink, var(--blue)); }
.trip-queue__note { color: var(--ink-2); font-style: italic; }
.trip-access textarea { margin-top: 6px; width: 100%; }
.trip-access__label {
  display: block; margin-top: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink);
}

/* ---------- Ombor ekrani ---------- */
.wh-toolbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.wh-toolbar .status-tabs { margin: 0; }
.wh-date { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta);
           color: var(--ink-2); }
.wh-date .input { min-height: 34px; width: auto; }
.wh-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.wh-grid > .state { grid-column: 1 / -1; }
.wh-card {
  display: grid; gap: var(--s3); padding: var(--pad-card); cursor: pointer;
  border-left: 4px solid var(--line-strong); outline-offset: 2px;
}
.wh-card:hover { background: var(--card-hover); }
.wh-card[data-status="sent_to_warehouse"] { border-left-color: var(--blue); }
.wh-card[data-status="ready_to_load"] { border-left-color: var(--green); }
.wh-card[data-status="loaded"] { border-left-color: var(--line-strong); opacity: .9; }
.wh-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.wh-card__code { font-size: var(--fs-card); font-weight: 700; color: var(--ink); }
.wh-card__sub { font-size: var(--fs-meta); color: var(--ink-2); margin-top: 2px; }
.wh-card__transport {
  display: flex; align-items: center; gap: 6px; font-size: var(--fs-body, 13px);
  color: var(--ink); font-weight: 600;
}
.wh-card__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.wh-stat {
  display: grid; padding: 8px; border-radius: 10px; background: var(--card-2);
}
.wh-stat small { font-size: 10.5px; color: var(--ink-3); }
.wh-stat b { font-size: 15px; color: var(--ink); font-weight: 700; }
.wh-card__meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-meta); color: var(--ink-2);
}
.wh-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.wh-card__note {
  font-size: var(--fs-meta); color: var(--ink); padding: 6px 10px; border-radius: 8px;
  background: var(--amber-soft);
}
.wh-card__acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.wh-summary {
  display: grid; gap: var(--s4) var(--s6);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* Tor katakda yorliq USTIDA, qiymat ostida (kv__key 172px qat'iy kenglikda
   qiymat uchun joy qolmasdi) */
.wh-summary .kv__row { flex-direction: column; gap: 2px; border-bottom: 0; padding-bottom: 0; }
.wh-summary .kv__key { flex: none; font-size: var(--fs-meta); }
.wh-summary .kv__val { font-weight: 600; }
.wh-orders { display: grid; gap: var(--s2); }
.wh-order {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s3);
  align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.wh-order:last-child { border-bottom: 0; }
.wh-order__body { display: grid; gap: 2px; min-width: 0; }
.wh-order__body b { font-size: var(--fs-body, 13px); color: var(--ink); }
.wh-order__body small { font-size: var(--fs-meta); color: var(--ink-2); }
.wh-order__items { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-meta); color: var(--ink); }
.wh-order__kg { font-size: var(--fs-meta); color: var(--ink-2); white-space: nowrap; }

/* ---------- Hodisalar ---------- */
.inc-grid { display: grid; gap: var(--s4) var(--s8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .inc-grid { grid-template-columns: 1fr; } }
.inc-cause {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 420px;
}
.inc-text { margin: 0; white-space: pre-wrap; color: var(--ink); }
.inc-order { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); }
/* Ta'sirlangan buyurtmalar ro'yxati (60+ nuqtali reys) oyna ichida o'zi aylanadi */
.inc-orders { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
/* Ro'yxat ustidagi ochiq hodisalar yig'masi: soni bor tur o'z ohangida
   (tanlangan segmentda — umumiy oq-shaffof ko'rinish qoladi) */
.inc-tabs .status-tab:not([aria-selected="true"]) .status-tab__count[data-tone="crit"] {
  background: var(--red-soft); color: var(--red-ink);
}
.inc-tabs .status-tab:not([aria-selected="true"]) .status-tab__count[data-tone="warn"] {
  background: var(--amber-soft); color: var(--amber-ink);
}
.inc-tabs .status-tab:not([aria-selected="true"]) .status-tab__count[data-tone="info"] {
  background: var(--blue-soft); color: var(--blue-ink);
}

/* ---------- Buyurtmalar ro'yxati: yetkazilmagan sababi ---------- */
.od-fail-note {
  color: var(--red-ink); font-size: 10.5px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Sozlamalar: mos kelmagan GPS obyektlari ---------- */
.gps-unmatched {
  margin-top: var(--s2); padding: 10px 12px; border-radius: 10px;
  background: var(--amber-soft); border: 1px solid var(--amber-line);
}
.gps-unmatched__title { font-size: var(--fs-meta); font-weight: 650; color: var(--ink); }
.gps-unmatched__hint { font-size: 10.5px; color: var(--ink-2); margin: 2px 0 6px; }
.gps-unmatched ul { margin: 0; padding-left: 18px; font-size: var(--fs-meta); color: var(--ink); }
/* Noma'lum GPS obyektlari jadvali (logistika TZ L-13) — tor o'ng ustunga
   sig'adi: nom, ID va oxirgi signal bitta katakda, yonida taklif va «Bog'lash» */
.gps-unmatched--done { background: var(--green-soft); border-color: var(--green-line); }
.gps-unknown__scroll { max-height: 320px; overflow-y: auto; }
.gps-unknown__table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.gps-unknown__table th {
  text-align: left; font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  padding: 2px 4px 4px; border-bottom: 1px solid var(--amber-line);
  position: sticky; top: 0; background: var(--amber-soft);   /* uzun ro'yxatda sarlavha qoladi */
}
.gps-unmatched--done .gps-unknown__table th { background: var(--green-soft); }
.gps-unknown__table td {
  padding: 6px 4px; vertical-align: top; color: var(--ink);
  border-bottom: 1px solid var(--amber-line);
}
.gps-unknown__table tbody tr:last-child td { border-bottom: 0; }
.gps-unmatched--done .gps-unknown__table th,
.gps-unmatched--done .gps-unknown__table td { border-color: var(--green-line); }
.gps-unknown__table td:first-child { overflow-wrap: anywhere; }
.gps-unknown__table .gps-unknown__act { text-align: right; white-space: nowrap; }
.gps-unknown__name { font-weight: 650; }
.gps-unknown__meta { font-size: 10.5px; color: var(--ink-2); margin-top: 1px; }
/* Kuryer → haydovchi: ism bo'yicha taklif va «Bog'lash» tugmasi */
.courier-suggest { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.courier-suggest b { color: var(--ink); }
.gps-unknown__sug { font-weight: 600; white-space: nowrap; }
.gps-unknown__none { color: var(--ink-3); }
.gps-unknown__bound {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  color: var(--green-ink); font-weight: 650;
}
.gps-unknown__bound svg { width: 12px; height: 12px; flex: 0 0 12px; }

/* ---------- Chop etish: yig'ish ro'yxati ---------- */
@media print {
  .wh-card__acts, .trip-doc__acts, .breadcrumb { display: none !important; }
  .wh-order { break-inside: avoid; }
}

/* ======================================================================
   KUNLIK OMBOR REJASI (2026-10-02) — .whp-*: bo'lim va kun, bosqich
   kartalari, mahsulotlar jadvali (tur bo'yicha guruh, blok/dona/kg,
   reyslar ustunlari) va mashinalar bo'yicha yuklash kartalari.
   ====================================================================== */
/* minmax(0,1fr): keng jadval (min-width) butun sahifani kengaytirib yubormasin */
.whp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.whp-top, .whp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.whp-top { justify-content: space-between; }
.whp-seg {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card);
}
.whp-seg__btn {
  height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: var(--fs-table); font-weight: 600; cursor: pointer;
}
.whp-seg__btn:hover { color: var(--ink); background: var(--card-2); }
.whp-seg__btn[aria-selected="true"], .whp-seg__btn[aria-pressed="true"] {
  background: var(--blue); color: var(--on-accent, #fff);
}
.whp-seg--sm .whp-seg__btn { height: 28px; padding: 0 10px; font-size: 12px; }
.whp-seg--sm .whp-seg__btn[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-ink); }
.whp-day { display: inline-flex; align-items: center; gap: 6px; }
.whp-day__step {
  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--ink-2); cursor: pointer;
}
.whp-day__step:hover { color: var(--ink); border-color: var(--line-strong); }
.whp-day__step svg { width: 15px; height: 15px; }
.whp-day__cur {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-2);
  font-size: var(--fs-table);
}
.whp-day__cur svg { width: 15px; height: 15px; color: var(--ink-3); }
.whp-day__cur b { color: var(--ink); }
.whp-day__q {
  height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.whp-day__q[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); }

/* Bosqich kartalari — bosilsa filtr */
.whp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.whp-kpi {
  --kc: var(--blue);
  display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line);
  border-left: 4px solid var(--kc); border-radius: var(--r-card, 14px); background: var(--card);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.whp-kpi:hover { box-shadow: var(--shadow-card); }
.whp-kpi.is-on { border-color: var(--kc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kc) 25%, transparent); }
.whp-kpi--static { cursor: default; }
.whp-kpi--static:hover { box-shadow: none; }
.whp-kpi--info { --kc: var(--blue); }
.whp-kpi--warn { --kc: var(--amber); }
.whp-kpi--ok { --kc: var(--green); }
.whp-kpi--muted { --kc: var(--muted); }
.whp-kpi__title { color: var(--ink-3); font-size: var(--fs-meta); font-weight: 650; }
.whp-kpi__value { color: var(--ink); font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.whp-kpi__note { color: var(--ink-2); font-size: var(--fs-meta); }

.whp-views { display: inline-flex; gap: 4px; }
.whp-views__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-2);
  font: inherit; font-size: var(--fs-table); font-weight: 600; cursor: pointer;
}
.whp-views__btn svg { width: 15px; height: 15px; }
.whp-views__btn[aria-selected="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); }
.whp-search { width: 230px; min-height: 34px; margin-left: auto; }
.whp-search[hidden] { display: none; }
.whp-totals {
  display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: var(--fs-meta);
}
.whp-totals b { color: var(--ink); font-variant-numeric: tabular-nums; }
.whp-totals__warn { color: var(--red-ink); font-weight: 600; }

/* Mahsulotlar jadvali */
.whp-card { overflow: hidden; }
.whp-note {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-3); font-size: var(--fs-meta);
}
.whp-note svg { width: 14px; height: 14px; }
.whp-wrap { max-height: calc(100vh - 330px); min-height: 280px; overflow: auto; }
.whp-table { min-width: 720px; }
.whp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--card-2); }
.whp-table tfoot td {
  position: sticky; bottom: 0; z-index: 2; background: var(--card-2); color: var(--ink);
  font-weight: 700; border-top: 1px solid var(--line);
}
.whp-table .num, .whp-mini .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.whp-table td, .whp-table th { padding-top: 7px; padding-bottom: 7px; }
/* Guruh qatori yagona katak (colspan) — umumiy «oxirgi katak o'ngga» qoidasidan chiqadi */
.whp-table tr.whp-group td {
  padding-top: 10px; text-align: left; white-space: normal;
  background: color-mix(in srgb, var(--blue-soft) 35%, var(--card));
  border-bottom: 1px solid var(--line-soft);
}
.whp-group b { margin-right: 10px; color: var(--ink); font-size: var(--fs-table); }
.whp-group span { color: var(--ink-3); font-size: var(--fs-meta); }
.whp-name { min-width: 260px; max-width: 380px; }
.whp-name b, .whp-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whp-name b { color: var(--ink); font-weight: 600; }
.whp-name small { color: var(--ink-3); font-size: 11.5px; }
.whp-blocks { color: var(--ink); font-weight: 700; }
.whp-col { color: var(--ink-2); }
.whp-col.is-zero { color: var(--ink-3); opacity: .5; }

/* Mashinalar bo'yicha */
.whp-trips { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s3); align-items: start; }
.whp-trip { display: grid; gap: 10px; padding: 14px; border-left: 4px solid var(--blue); }
.whp-trip--pick { border-left-color: var(--blue); }
.whp-trip--loaded { border-left-color: var(--green); }
.whp-trip--gone { border-left-color: var(--amber); }
.whp-trip--done { border-left-color: var(--line-strong); }
.whp-trip__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.whp-trip__title { display: block; color: var(--ink); font-size: var(--fs-card); font-weight: 700; }
.whp-trip__head small { color: var(--ink-2); font-size: var(--fs-meta); }
.whp-trip__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.whp-trip__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.whp-mini td, .whp-mini th { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
.whp-fill { --fc: var(--blue); display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-meta); }
.whp-fill__bar { position: relative; flex: 1 1 auto; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--muted-soft); }
.whp-fill__bar i { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--fc); }
.whp-fill--low { --fc: var(--chart-6); }
.whp-fill--info { --fc: var(--blue); }
.whp-fill--ok { --fc: var(--green); }
.whp-fill--crit { --fc: var(--red); }

@media (max-width: 1100px) {
  .whp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .whp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .whp-kpi { padding: 10px 11px; }
  .whp-kpi__value { font-size: 16px; }
  .whp-search { width: 100%; margin-left: 0; }
  .whp-trips { grid-template-columns: minmax(0, 1fr); }
  .whp-trip__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Chop etish: boshqaruv qismlari yashiriladi; «Chop etish» (bitta mashina) —
   faqat o'sha karta */
@media print {
  .whp-top, .whp-bar, .whp-kpis, .whp-note, .whp-trip__acts { display: none !important; }
  .whp-wrap { max-height: none; overflow: visible; }
  .whp-table thead th, .whp-table tfoot td { position: static; }
  .whp-trip { break-inside: avoid; }
  body.whp-print-one .whp-totals, body.whp-print-one .page__head { display: none !important; }
  body.whp-print-one .whp-trip:not(.is-print) { display: none !important; }
  body.whp-print-one .whp-trips { display: block; }
}