/* portal-history.css — Modul History Penjualan BERSAMA (manager). Kelas ter-scope `.history-*`
   + gaya filter/chart `.hf-*`/`.hc-*` (dipindah dari index.html). Pakai token tema yang sudah ada
   (--accent/--card/--input/--soft/--border/--text/--text2/--muted/--tray-border/--clay*). */

.history-sec{ width:min(95vw,1480px); margin-left:calc(50% - min(47.5vw,740px)); margin-top:18px; margin-bottom:32px; }
.history-sec.hidden{ display:none; }
@media(max-width:780px){ .history-sec{ width:100%; margin-left:0; } }
.history-head{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin:0 0 12px; }
.history-head small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.history-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--clay,0 6px 24px rgba(0,0,0,.07)); }
.hist-srch{ background-color:var(--input); border:none; border-radius:11px; padding:10px 14px; font-size:13px; font-family:inherit; color:var(--text); box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); }
.hist-srch::placeholder{ color:var(--muted); }

/* ---- filter bar (dipindah dari index.html) ---- */
.hist-filters{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin-bottom:16px; }
.hf-dd{ position:relative; }
.hf-dd-btn{ display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:11px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .2s, transform .12s; }
.hf-dd-btn:hover{ border-color:var(--accent); }
.hf-dd-btn:active{ transform:scale(.97); }
.hf-cnt{ font-size:11px; font-weight:700; color:#fff; background:linear-gradient(135deg,#7B3FE4,#5535C0); border-radius:999px; padding:1px 8px; }
.hf-cnt.all{ background:var(--border); color:var(--muted); }
.hf-car{ color:var(--muted); font-size:10px; }
.hf-dd-panel{ position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:190px; max-height:300px; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 44px -14px rgba(0,0,0,.45); padding:8px; display:none; }
.hf-dd.open .hf-dd-panel{ display:block; }
.hf-opt{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap; user-select:none; }
.hf-opt:hover{ background:color-mix(in srgb,var(--accent) 12%,transparent); }
.hf-opt input{ accent-color:#7B3FE4; width:15px; height:15px; }
.hf-all{ border-bottom:1px solid var(--border); margin-bottom:4px; font-weight:700; }
.hf-srch{ min-width:150px; }
.hf-metric{ appearance:none; -webkit-appearance:none; padding:9px 32px 9px 14px; border-radius:11px; border:1px solid var(--border); background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B3FE4' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center; color:var(--text); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; transition:border-color .2s; }
.hf-metric:hover{ border-color:var(--accent); }
.hf-actions{ display:flex; gap:8px; }

/* ---- summary + chart (dipindah dari index.html) ---- */
.hist-summary{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.hist-summary b{ color:var(--accent); font-size:15px; }
.hist-chart-wrap{ position:relative; height:340px; }
@media(max-width:640px){ .hist-chart-wrap{ height:280px; } }
.hist-chart-wrap svg{ width:100%; height:100%; display:block; overflow:visible; }
.hc-grid{ stroke:var(--border); stroke-width:1; }
.hc-yr{ stroke:var(--border); stroke-width:1; stroke-dasharray:3 4; }
.hc-yrlbl{ font-size:11px; font-weight:800; fill:var(--text2); }
.hc-ylbl{ font-size:10px; fill:var(--muted); }
.hc-line{ fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 4px 8px rgba(123,63,228,.35)); }
.hc-dot{ fill:var(--card); stroke:var(--accent); stroke-width:2.5; }
.hc-hover{ fill:var(--accent); }
.hc-tip{ position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--tray-border); border-radius:11px; padding:8px 12px; box-shadow:var(--clay); font-size:11.5px; opacity:0; transform:translate(-50%,-130%); transition:opacity .12s; white-space:nowrap; z-index:5; }
.hc-tip b{ color:var(--accent); }