/* ══════════════════════════════════════════════════
   CUSTOMER HISTORY (js/21-history.js)
   ══════════════════════════════════════════════════ */

/* search on its own row, the filters under it */
.hist-search-row { margin-bottom: 10px; }
.hist-search-row .search-wrap { flex: 1 1 auto; max-width: 640px; }
.hist-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.hist-filters select.field { width: auto; min-width: 190px; height: 38px; font-size: 13.5px; }
.hist-filters .btn { height: 38px; }

.hist-count { font-size: 12.5px; color: var(--muted); margin: 0 2px 10px; }
.hist-count .link-btn { padding: 0; font-size: 12.5px; }

/* one card per customer */
.hist-list { display: flex; flex-direction: column; gap: 10px; }
.hist-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.hist-head {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px 10px; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.hist-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hist-who { flex: 1 1 auto; min-width: 0; }
.hist-name { font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.hist-contact { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.hist-nums { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-nums b { color: var(--text); font-weight: 600; }
.hist-chev { flex: none; width: 10px; height: 10px; border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .15s; }
.hist-card.open .hist-chev { transform: rotate(-135deg); margin-top: 4px; }
.hist-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 13px; }
.hist-chips .tag { text-transform: none; letter-spacing: .01em; font-size: 11.5px; }

/* every visit, newest first */
.hist-timeline { border-top: 1px solid var(--line-soft); background: var(--card-2); padding: 6px 16px 12px; }
.hist-since { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 8px 0 2px; }
.hist-visit { padding: 11px 0; border-bottom: 1px dashed var(--line); }
.hist-visit:last-child { border-bottom: none; }
.hist-visit-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.hist-date { font-weight: 500; min-width: 92px; }
.hist-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-lines { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; line-height: 1.55; }
.hist-lines li::before { content: '·'; color: var(--faint); margin-right: 7px; }
.hist-code { font-size: 10.5px; letter-spacing: .06em; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.hist-note { color: var(--muted); }
.hist-remark { font-size: 12.5px; color: var(--muted); margin-top: 5px; white-space: pre-line; }
.hist-acts { margin-top: 7px; }

/* ── Phones ── */
@media (max-width: 700px) {
  .hist-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hist-filters select.field { min-width: 0; width: 100%; height: 44px; }
  .hist-filters .btn { height: 44px; }
  .hist-head { flex-wrap: wrap; gap: 6px 12px; padding: 13px 14px 9px; position: relative; padding-right: 36px; }
  .hist-who { flex: 1 1 100%; }
  .hist-nums { justify-content: flex-start; gap: 12px; }
  .hist-chev { position: absolute; right: 16px; top: 20px; }
  .hist-chips { padding: 0 14px 12px; }
  .hist-timeline { padding: 4px 14px 10px; }
  .hist-date { min-width: 0; }
  .hist-acts .btn { width: 100%; }
}
@media (hover: none), (any-pointer: coarse) {
  .hist-acts .btn { height: 40px; }
}