/* ================================================================
   cards.css — customer/job/invoice card grids + detail layouts
   ================================================================ */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-lg);
}
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-md); transition: box-shadow .15s, transform .1s;
  display: flex; flex-direction: column; gap: .5rem;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.card-title { font-family: var(--heading-font); font-weight: 600; font-size: 1.05rem; color: var(--dark); }
.card-title a { color: var(--dark); }
.card-meta { font-size: .82rem; color: var(--muted); display: flex; flex-direction: column; gap: .2rem; }
.card-meta i { width: 1.1rem; color: var(--faint); }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--border); }

.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-lg); align-items: stretch; }
.detail-main { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-lg); }
.detail-main .panel + .panel { margin-top: 0; }
.detail-side { display: flex; flex-direction: column; gap: var(--sp-lg); min-width: 0; }
.detail-side .panel + .panel { margin-top: 0; }

.info-list { display: grid; grid-template-columns: max-content 1fr; gap: .5rem var(--sp-md); font-size: .9rem; }
.info-list dt { color: var(--muted); white-space: nowrap; }
.info-list dd { color: var(--ink); word-break: break-word; min-width: 0; }

.timeline { display: flex; flex-direction: column; gap: var(--sp-md); }
.tl-item { display: flex; gap: var(--sp-md); }
.tl-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-alt); color: var(--primary);
}
.tl-item.inbound  .tl-icon { background: var(--info-bg); color: var(--info); }
.tl-item.outbound .tl-icon { background: var(--success-bg); color: var(--success); }
.tl-item.internal .tl-icon { background: var(--warning-bg); color: var(--warning); }
.tl-body { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-md); }
.tl-item.unread .tl-body { border-color: var(--accent); background: #FFF8F1; }
.tl-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--muted); margin-bottom: .25rem; }
.tl-head strong { color: var(--dark); }
.tl-text { font-size: .9rem; white-space: pre-wrap; }

.enroute-banner {
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: var(--r-md);
  background: var(--info-bg); color: var(--info); font-weight: 600; margin-bottom: var(--sp-lg);
}
.enroute-banner .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--info); animation: pulse-bg 1.4s infinite; }

tr.low-stock td { background: var(--warning-bg); }