/* ===========================================================
   LOGISTICS VIEW — redesigned interior
   =========================================================== */

/* Extra status pills reused from .lv-pill */
.lv-pill.pending   { background: #FEF3C7; color: #92400E; }
.lv-pill.confirmed { background: #EFF6FF; color: #1D4ED8; }

/* Stat tiles row */
.lvx-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 11px 14px; background: #fff; border-top: 1px solid #EEE;
}
.lvx-tile {
  border: 1px solid #EEE; border-radius: 8px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.lvx-tile-ic {
  width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 5px;
}
.lvx-tile-ic svg { width: 15px; height: 15px; }
.lvx-tile-ic.blue   { background: #EFF6FF; color: #2563EB; }
.lvx-tile-ic.orange { background: #FCEDE7; color: #E8450A; }
.lvx-tile-ic.green  { background: #DCFCE7; color: #16A34A; }
.lvx-tile-ic.amber  { background: #FEF3C7; color: #B45309; }
.lvx-tile-num { font-family: 'Satoshi', system-ui, sans-serif; font-size: 28px; font-weight: 700; color: #0F0F0F; line-height: 1; }
.lvx-tile-lbl { font-size: 11px; color: #1A1A1A; font-weight: 600; margin-top: 4px; }
.lvx-tile-sub { font-size: 10px; color: #9a9a9a; }

/* Tighten the OUT/IN tables for the denser layout */
.lv-board .lvx-cols { background: #EFEFF0; }
.lv-board .lv-tbl td { height: 28px; }

/* ---- Redesigned chart panel ---- */
.lvx-chart { background: #fff; border-top: 1px solid #E8E8E8; padding: 12px 16px 14px; }
.lvx-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lvx-chart-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #999; font-family: 'Satoshi', system-ui, sans-serif; }
.lvx-chart-ic { display: flex; align-items: center; gap: 12px; color: #b0b0b0; }
.lvx-chart-ic svg { width: 14px; height: 14px; }

.lvx-chart-body { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: center; }

/* Donut */
.lvx-donut-wrap { display: flex; align-items: center; gap: 16px; }
.lvx-donut { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.lvx-donut-ring {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(
    #3B82F6 0deg 66.1deg,
    #22C55E 66.1deg 93.1deg,
    #F4845C 93.1deg 176.3deg,
    #8B5CF6 176.3deg 360deg
  );
}
.lvx-donut-hole {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lvx-donut-num { font-family: 'Satoshi', system-ui, sans-serif; font-size: 22px; font-weight: 700; color: #0F0F0F; line-height: 1; }
.lvx-donut-lbl { font-size: 10px; color: #9a9a9a; }
.lvx-legend { display: flex; flex-direction: column; gap: 7px; }
.lvx-leg { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #555; }
.lvx-leg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.lvx-leg b { margin-left: auto; color: #1A1A1A; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Horizontal bars */
.lvx-bars-title { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin-bottom: 10px; }
.lvx-bars { display: flex; flex-direction: column; gap: 9px; }
.lvx-bar-row { display: grid; grid-template-columns: 84px 1fr 34px; align-items: center; gap: 10px; }
.lvx-bar-lbl { font-size: 11px; color: #555; }
.lvx-bar-track { height: 12px; background: #F3F3F3; border-radius: 6px; overflow: hidden; }
.lvx-bar-fill { height: 100%; border-radius: 6px; }
.lvx-bar-val { font-size: 11px; color: #1A1A1A; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .lvx-tiles { grid-template-columns: 1fr 1fr; }
  .lvx-chart-body { grid-template-columns: 1fr; gap: 18px; }
}