/* ============================================================
   Envíos — shipping dashboard chrome.
   Buttons, chips, fields, cards, banners, modals and empty states are the
   shared /ds/ components; the screens' layout stays inline in app.js (a
   port of the design file). This sheet holds only what inline styles
   cannot express: hover states on rows, the hover/focus drawer, and the
   KPI grid's breakpoints. !important is needed where a hover must beat a
   background set in the style attribute.
   ============================================================ */

body { background: var(--hb-cloud); }
::placeholder { color: var(--hb-chalkboard); opacity: .55; }

/* soft tint on hover (rows, quiet links) */
.hov-tint:hover { background: var(--hb-petalo-light) !important; }
.hov-agua:hover { background: var(--hb-agua-light) !important; color: var(--hb-chalkboard); }
.hov-sol:hover { background: var(--hb-sol-light) !important; }
.hov-dim:hover { filter: brightness(0.97); }

/* box remove ✕ */
.hov-x:hover { background: var(--hb-adobe-light) !important; color: var(--hb-text-adobe) !important; }

/* the little "i" info circle */
.hov-info:hover { border-color: var(--hb-text-agua) !important; color: var(--hb-text-agua) !important; }

/* side drawer that slides in from the row's right edge on hover, and on
   keyboard focus — the row head carries tabindex="0" */
.hb-drawer {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%) translateX(130%); opacity: 0;
  transition: transform .28s var(--ease-out), opacity .2s;
  display: flex; align-items: center; gap: 5px; max-width: 70%;
  background: var(--hb-paper); border: 1px solid var(--hb-line);
  border-radius: var(--radius-pill); padding: 6px 10px;
  box-shadow: var(--shadow-sm); pointer-events: none;
}
.hb-rowhead:hover .hb-drawer, .hb-rowhead:focus-within .hb-drawer, .hb-rowhead:focus .hb-drawer {
  transform: translateY(-50%) translateX(0); opacity: 1;
}

/* the toggle chip (filter) keeps its dashed look when it is an "add" slot */
.hb-chip--toggle[style*="dashed"]:hover { border-style: dashed; }

/* Top stat cards (live dashboard): 3-up on wide screens. At the 2-column
   width the red "Running low" card spans both rows on the left and the other
   two stack to its right; single column on phones. Scroll caps live here so
   the media queries can lift them. */
.hb-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.hb-kpi-list { overflow-y: auto; max-height: 280px; }
.hb-kpi-list--tall { max-height: 480px; }
@media (max-width: 900px) {
  .hb-kpis { grid-template-columns: 1fr 1fr; }
  .hb-kpis .hb-kpi--low { grid-row: 1 / 3; }
  .hb-kpis .hb-kpi--low .hb-kpi-list { max-height: none; flex: 1; }
}
@media (max-width: 600px) {
  .hb-kpis { grid-template-columns: 1fr; }
  .hb-kpis .hb-kpi--low { grid-row: auto; }
  .hb-kpis .hb-kpi--low .hb-kpi-list { max-height: 280px; flex: none; }
}