/* ==========================================================================
   ELS Sales Kit — module "sales" (Target & Penjualan)
   Every selector is scoped to .m-sales (the #view while this module renders, and
   the sheets this module opens, which carry class "m-sales"). Tokens only.
   ========================================================================== */

/* ---------- Page layout ---------- */
.m-sales .sl-top { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.m-sales .sl-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.m-sales .sl-today-slot, .m-sales .sl-month-slot { min-width: 0; }
@media (min-width: 1024px) {
  .m-sales .sl-top { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--space-5); }
}

/* ---------- Today hero ---------- */
.m-sales .sl-today { padding: var(--space-5); }
.m-sales .sl-today-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.m-sales .sl-today-main { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); min-width: 0; }
.m-sales .sl-amount-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-sales .sl-kicker { font-size: var(--fs-xs); font-weight: 750; color: var(--muted); letter-spacing: .02em; }
.m-sales .sl-amount {
  font-size: clamp(1.25rem, 1rem + 1.6vw, var(--fs-2xl)); font-weight: 800; letter-spacing: -.025em; line-height: 1.12;
  font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere;
}
.m-sales .sl-amount-md { font-size: clamp(1.2rem, 1rem + 1.1vw, var(--fs-xl)); }
.m-sales .sl-amount-sub { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.m-sales .sl-status { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.m-sales .sl-pill {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-glow);
  font-size: var(--fs-xs); font-weight: 750; line-height: 1.3;
}
.m-sales .sl-ring { flex: none; }
.m-sales .sl-ring .ring-sublabel { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.m-sales .sl-ring-empty {
  flex: none; width: 112px; height: 112px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  border: 2px dashed var(--stroke-strong); color: var(--dim); font-size: var(--fs-xs); font-weight: 650; line-height: 1.2; padding: 14px;
}
.m-sales .sl-ring-empty .ico { color: var(--accent-ink); }

/* stats inside the hero */
.m-sales .sl-today-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.m-sales .sl-stat {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke);
}
.m-sales .sl-stat-label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-xs); font-weight: 750; color: var(--muted); }
.m-sales .sl-stat-label { line-height: 1.3; }
.m-sales .sl-stat-label span { min-width: 0; overflow-wrap: anywhere; }
.m-sales .sl-stat-label .ico { color: var(--accent-ink); }
.m-sales .sl-stat-value { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.m-sales .sl-stat-sub { font-size: var(--fs-xs); color: var(--dim); font-weight: 600; line-height: 1.35; }
.m-sales .sl-stat .progress { margin-top: 2px; }

/* visits counter */
.m-sales .sl-counter {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--stroke);
}
.m-sales .sl-counter-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-sales .sl-counter-num {
  font-size: var(--fs-3xl); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  transform-origin: left center;
}
.m-sales .sl-counter-num.bump { animation: slBump .34s var(--ease-spring); }
@keyframes slBump { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.m-sales .sl-counter-btns { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.m-sales .btn.sl-cbtn { width: 52px; height: 52px; }
.m-sales .btn.sl-cbtn .ico { width: 22px; height: 22px; }
.m-sales .btn.sl-visit-plus { box-shadow: 0 10px 22px -10px var(--accent-glow), inset 0 1px 0 var(--inset-hi); }

@media (min-width: 720px) and (max-width: 1023.98px) {
  .m-sales .sl-today-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-sales .sl-counter { grid-column: auto; flex-direction: column; align-items: flex-start; padding: var(--space-3) var(--space-4); }
}

/* "transactions > visits" helper */
.m-sales .sl-sync {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: var(--space-3);
  padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-glow);
  font-size: var(--fs-sm); color: var(--text); font-weight: 600;
}
.m-sales .sl-sync > .ico { color: var(--accent-ink); }

.m-sales .sl-motive {
  display: flex; align-items: flex-start; gap: 10px; margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px dashed var(--stroke-strong); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
}
.m-sales .sl-motive .ico { color: var(--accent-ink); margin-top: 2px; }

/* ---------- Month card ---------- */
.m-sales .sl-month .card-body > * + * { margin-top: var(--space-4); }
.m-sales .sl-month-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.m-sales .sl-month-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.m-sales .sl-month-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m-sales .sl-month-stats .sl-stat-value { font-size: var(--fs-md); }
.m-sales .sl-reminder { margin-top: 0; }

/* ---------- Tabs & panels ---------- */
.m-sales .sl-tabs-sec { min-width: 0; }
@media (max-width: 399.98px) {
  .m-sales .sl-tabs .tab { padding: 0 10px; }
  .m-sales .sl-tabs .tab > .ico { display: none; }
}
/* header actions: on phones the primary action takes the row, "Atur Target" becomes a round icon button */
@media (max-width: 719.98px) {
  .m-sales .page-hero-actions { flex-wrap: nowrap; }
  .m-sales .page-hero-actions .sl-act-new { flex: 1 1 auto; }
  .m-sales .page-hero-actions .sl-act-targets { flex: none; width: 48px; min-height: 48px; padding: 0; }
  .m-sales .page-hero-actions .sl-act-targets > span { display: none; }
}
.m-sales .sl-panel { margin-top: var(--space-4); min-width: 0; }
.m-sales .sl-panel-inner { animation: slFade var(--dur-slow) var(--ease-out) both; }
.m-sales .sl-panel-inner.sl-static { animation: none; }
@keyframes slFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.m-sales .sl-month-panel > * + * { margin-top: var(--space-4); }
.m-sales .sl-charts { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .m-sales .sl-charts { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.m-sales .sl-chart-note { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--dim); font-weight: 600; }

/* charts re-drawn after a data change should not replay their entrance animation */
.m-sales .sl-static .ch-anim .ch-bar,
.m-sales .sl-static .ch-anim .ch-donut-seg,
.m-sales .sl-static .ch-anim .ch-line,
.m-sales .sl-static .ch-anim .ch-area,
.m-sales .sl-static .ch-anim .ch-dot { animation: none; }

/* category breakdown */
.m-sales .sl-cat { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 560px) and (max-width: 1023.98px) {
  .m-sales .sl-cat { grid-template-columns: 180px minmax(0, 1fr); }
}
.m-sales .sl-cat-list { display: flex; flex-direction: column; }
.m-sales .sl-cat-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto 44px; align-items: center; gap: 10px;
  min-height: 38px; font-size: var(--fs-sm);
}
.m-sales .sl-cat-row + .sl-cat-row { border-top: 1px solid var(--stroke); }
.m-sales .sl-cat-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 650; }
.m-sales .sl-cat-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sales .sl-cat-name .ico { color: var(--muted); }
.m-sales .sl-cat-meta { color: var(--dim); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.m-sales .sl-cat-amt { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-sales .sl-cat-pct { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* history header */
.m-sales .sl-hist-head { display: flex; flex-direction: column; gap: var(--space-3); }
.m-sales .sl-hist-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-md); }
.m-sales .sl-hist-title .ico { color: var(--accent-ink); }
.m-sales .sl-month-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.m-sales .sl-month-chips::-webkit-scrollbar { display: none; }
.m-sales .sl-month-chips .chip { flex: none; }

/* ---------- Entry lists ---------- */
.m-sales .sl-days > * + * { margin-top: var(--space-4); }
.m-sales .sl-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: 0 4px 8px; font-size: var(--fs-sm);
}
.m-sales .sl-day-name { font-weight: 750; color: var(--muted); }
.m-sales .sl-day-sum { font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.m-sales .sl-entry { align-items: flex-start; }
.m-sales .sl-entry .tile { margin-top: 2px; }
.m-sales .sl-entry .li-right { align-self: center; }
.m-sales .sl-entry-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.m-sales .sl-entry-cust { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.m-sales .sl-entry-time { color: var(--dim); font-variant-numeric: tabular-nums; }
.m-sales .sl-entry-note {
  flex-basis: 100%; color: var(--dim); font-size: var(--fs-xs); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-sales .sl-entry-right { display: flex; align-items: center; gap: 2px; }
.m-sales .sl-amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.m-sales .sl-amt-inline { display: none; }
.m-sales .sl-entry-more { color: var(--dim); }
@media (max-width: 419.98px) {
  /* narrow phones: the exact amount moves under the product name, the row keeps its full width for text */
  .m-sales .sl-entry .sl-amt { display: none; }
  .m-sales .sl-amt-inline {
    display: block; flex-basis: 100%; margin-bottom: 2px;
    color: var(--text); font-size: var(--fs-base); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  }
}
.m-sales .sl-list-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: 0 4px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600;
}
.m-sales .sl-list-foot strong { font-size: var(--fs-md); }

.m-sales .sl-note {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  color: var(--dim); font-size: var(--fs-xs); font-weight: 600;
}

/* ---------- Sheet: sale form ---------- */
.m-sales .sl-form > * + * { margin-top: var(--space-5); }
.m-sales .sl-form .field + .field { margin-top: var(--space-5); }
.m-sales .sl-form-row { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.m-sales .sl-form-row > .field + .field { margin-top: 0; }
@media (min-width: 480px) {
  .m-sales .sl-form-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4); }
}
.m-sales .sl-recent { margin-top: var(--space-2); }
.m-sales .sl-recent-label { font-size: var(--fs-xs); color: var(--dim); font-weight: 700; margin-bottom: 8px; }
.m-sales .sl-recent-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px; padding: 2px; }
.m-sales .sl-recent-chips::-webkit-scrollbar { display: none; }
.m-sales .sl-recent-chips .chip { flex: none; white-space: nowrap; min-height: 34px; }

/* category picker: a calm 3 x 3 grid of tiles (phones) / compact rows (wider sheets) */
.m-sales .sl-cat-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-sales .sl-cat-chips .chip {
  flex-direction: column; justify-content: center; gap: 5px; min-height: 66px; padding: 8px 6px;
  border-radius: 16px; text-align: center; font-size: var(--fs-xs); font-weight: 700; line-height: 1.2;
}
.m-sales .sl-cat-chips .chip .ico { width: 20px; height: 20px; }
.m-sales .sl-cat-chips .chip.active .chip-check { display: none; }
.m-sales .sl-cat-chips .chip.active { box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 18px -12px var(--accent-glow); }
@media (min-width: 480px) {
  .m-sales .sl-cat-chips .chip {
    flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 46px; padding: 6px 12px;
    text-align: left; font-size: var(--fs-sm);
  }
  .m-sales .sl-cat-chips .chip .ico { width: 18px; height: 18px; }
}
.m-sales .sl-date-other { margin-top: var(--space-3); }
.m-sales .sl-form-foot { display: flex; justify-content: center; }
.m-sales .btn.sl-del-link { color: var(--red-ink); }
.m-sales .btn.sl-del-link:hover { background: var(--red-soft); }

/* customer picker inside the form */
.m-sales .sl-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.m-sales .sl-cust-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: var(--space-2); }
.m-sales .sl-cust-pill {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px 6px 8px 10px; border-radius: 16px;
  background: var(--accent-soft); border: 1px solid var(--accent-glow);
}
.m-sales .sl-cust-name { font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.m-sales .sl-cust-sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.m-sales .sl-picker-list { min-height: 120px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-sales .sl-counter-num.bump, .m-sales .sl-panel-inner { animation: none; }
}