/* ============================================================================
   Rep Hitlist — hidden panel, namespaced to #panel-hitlist / .hl-* only.
   Reuses .dist-* table/button/error classes from distribution.css (loaded
   globally), so only hitlist-specific pieces live here.
   ========================================================================== */

#panel-hitlist { font-size: 13px; }

#panel-hitlist .hl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:4px 0 12px; }
#panel-hitlist .hl-title { margin:0; font-size:20px; font-weight:650; letter-spacing:-0.01em; }
#panel-hitlist .hl-sub { font-size:12px; color:#64748b; margin-top:3px; }

#panel-hitlist .hl-card { background:#fff; border:1px solid #e6eaf0; border-radius:10px; padding:15px 17px; margin-bottom:15px; }
#panel-hitlist .hl-card-head { display:flex; align-items:center; gap:11px; margin-bottom:11px; flex-wrap:wrap; }
#panel-hitlist .hl-card-head h3 { margin:0; font-size:14px; font-weight:640; color:#0f172a; }
#panel-hitlist .hl-card-sub { font-size:11.5px; color:#94a3b8; }

#panel-hitlist .hl-owner-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px; margin-bottom:11px; }
#panel-hitlist .hl-owner-card { background:#fff; border:1px solid #e6eaf0; border-radius:9px; padding:12px 14px; }
#panel-hitlist .hl-owner-name { font-size:13px; font-weight:650; color:#0f172a; }
#panel-hitlist .hl-owner-kpis { font-size:11.5px; color:#64748b; margin:4px 0 9px; }

#panel-hitlist .hl-play-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }

#panel-hitlist .hl-play {
  display:inline-block; padding:2px 9px; border-radius:11px; font-size:10.5px;
  font-weight:700; letter-spacing:.03em; white-space:nowrap;
}
#panel-hitlist .hl-play-winback { background:#fee2e2; color:#b91c1c; }
#panel-hitlist .hl-play-save    { background:#fef3c7; color:#92400e; }
#panel-hitlist .hl-play-expand  { background:#dcfce7; color:#166534; }

#panel-hitlist .hl-filters { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
#panel-hitlist .hl-filters select, #panel-hitlist .hl-filters input {
  border:1px solid #d8dee7; border-radius:7px; padding:6px 9px; font-size:12px; color:#334155; background:#fff;
}
#panel-hitlist .hl-filters input { min-width:220px; }

#panel-hitlist .hl-why { max-width:420px; font-size:11.5px; color:#475569; }

#panel-hitlist .hl-method {
  background:#f8fafc; border:1px solid #e2e8f0; border-left:3px solid #94a3b8;
  border-radius:6px; padding:12px 15px; margin:0 0 24px; font-size:11.5px; line-height:1.6; color:#475569;
}

#panel-hitlist .hl-row { cursor:pointer; }

/* account gap drawer (reuses .dist-drawer-* classes; only the container id
   and the category chips are hitlist-specific) */
/* Above .topbar (z-index 1000) — see #dist-drawer note in distribution.css */
#hl-drawer { position:fixed; inset:0; z-index:1200; }

#panel-hitlist .hl-cat-row { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.hl-cat {
  display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600;
}
.hl-cat-on { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.hl-cat-off { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.hl-cat-sm { padding:1px 7px; font-size:9.5px; border-radius:9px; margin-left:5px; white-space:nowrap; }

@media (max-width: 760px) {
  #panel-hitlist .hl-filters { margin-left:0; }
  #panel-hitlist .hl-why { max-width:none; }
}