/* Sales: day totals, item bars, hourly chart and the レジ締め dialog. Tokens and .btn / .dialog come from staff.css. */

.sl { max-width: 1400px; margin: 0 auto; display: grid; gap: 18px; align-content: start; padding: 20px var(--pad) 32px; transition: opacity .25s; }
.sl.is-stale .sl-stats, .sl.is-stale .sl-panels { opacity: .45; transition: opacity .25s; }

/* ---------- header ---------- */
.sl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sl-nav {
  flex: none; width: 46px; height: 46px; padding: 0 0 3px; display: grid; place-items: center;
  background: var(--white); border: var(--border); border-radius: 50%; font-size: 26px; font-weight: 900; line-height: 1;
  transition: transform .09s var(--ease-out), opacity .2s;
}
.sl-nav:active:not(:disabled), .sl-nav.is-pressed:not(:disabled) { transform: scale(.88); }
.sl-nav:disabled { opacity: .3; cursor: default; }
.sl-date { margin: 0; min-width: 7.4em; text-align: center; font-size: 28px; font-weight: 900; }
.sl-live { padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; font-weight: 900; white-space: nowrap; }
.sl-close-btn { margin-left: auto; }

/* ---------- stat tiles ---------- */
.sl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-right: 4px; }
.sl-stat {
  display: grid; gap: 2px; padding: 14px 20px 16px; background: var(--white);
  border: var(--border); border-radius: 20px; box-shadow: var(--shadow);
}
.sl-stat > span { font-size: 13px; font-weight: 900; }
.sl-stat .num { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.15; white-space: nowrap; }
.sl-stat small { font-size: 12px; font-weight: 800; }
.sl-stat--total { background: var(--pec); }
.sl-stat--deal { background: var(--hot); }

/* ---------- notes under the tiles ---------- */
.sl-notes { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-note { padding: 7px 14px; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 900; animation: fade-in .25s; }
.sl-note--combo { background: var(--hot); }
.sl-note--warn { background: var(--orange); }

/* ---------- cards ---------- */
.sl-panels { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; padding-right: 4px; align-items: stretch; }
.sl-card { padding: 20px 24px 22px; display: flex; flex-direction: column; background: var(--white); border: var(--border); border-radius: 22px; box-shadow: var(--shadow); }
.sl-h { margin: 0 0 14px; font-size: 16px; font-weight: 900; }
.sl-h small { margin-left: 6px; font-size: 11px; font-weight: 500; }
.sl-empty { margin: 24px 0; text-align: center; font-size: 14px; opacity: .5; }

.sl-items { display: grid; }
.sl-row { display: grid; grid-template-columns: 170px minmax(40px, 1fr) 52px 84px; align-items: center; gap: 12px; padding: 5px 0; }
.sl-row__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-row__track { display: block; height: 18px; }
.sl-bar {
  display: block; height: 100%; max-width: 100%; background: var(--c); border: 1.5px solid var(--ink); border-radius: 6px;
  transition: width .6s var(--ease-out); min-width: 0;
}
.sl-row__qty { font-size: 13px; text-align: right; }
.sl-row__amt { font-size: 13px; text-align: right; font-weight: 800; }

/* ---------- hourly chart ---------- */
.sl-card--hours { --plot-h: clamp(220px, 34vh, 330px); --bar-max: calc(var(--plot-h) - 50px); }
.sl-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; align-items: end; height: var(--plot-h); margin: 6px 4px 56px; border-bottom: var(--border); }
.sl-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.sl-col__plot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; }
.sl-col__t { font-size: 14px; white-space: nowrap; }
.sl-col__c { margin-bottom: 5px; font-size: 11px; font-weight: 800; }
.sl-col__bar {
  --r: 0; display: block; width: 100%; max-width: 92px; height: calc(var(--bar-max) * var(--r));
  background: var(--ink); border: 2px solid var(--ink); border-radius: 10px 10px 0 0; border-bottom: 0;
  transition: height .7s var(--ease-out);
}
.sl-col__bar.is-snack { background: var(--hot); }
.sl-col__ax { position: absolute; top: 100%; left: 0; right: 0; padding-top: 8px; text-align: center; font-size: 12px; font-weight: 900; line-height: 1.45; }

/* ---------- レジ締め dialog ---------- */
.sl-dlg { width: min(480px, 92vw); max-width: none; }
.sl-cl__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 900; }
.sl-cl__row > span { display: grid; gap: 1px; }
.sl-cl__row small { font-size: 11px; font-weight: 500; }
.sl-cl__row > b { font-size: 22px; }
.sl-cl__in {
  width: 168px; padding: 10px 14px; border: var(--border); border-radius: 12px; background: var(--white); outline: none;
  font-family: var(--font-label); font-weight: 900; font-size: 22px; text-align: right;
}
.sl-cl__in:focus { box-shadow: 0 0 0 4px var(--blue); }
.sl-cl__diff {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border: var(--border); border-radius: 16px; background: var(--cream-deep); font-weight: 900; transition: background-color .2s, color .2s;
}
.sl-cl__diff b { font-size: 24px; }
.sl-cl__diff[data-state="idle"] b { font-size: 14px; font-weight: 700; opacity: .6; }
.sl-cl__diff[data-state="ok"] { background: var(--green); color: var(--white); }
.sl-cl__diff[data-state="off"] { background: var(--orange); }
.sl-cl__diff:not([data-state="idle"]) { animation: pop-in .25s var(--ease-spring); }

@media (max-width: 900px) {
  .sl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-panels { grid-template-columns: minmax(0, 1fr); }
  .sl-row { grid-template-columns: 120px minmax(30px, 1fr) 46px 72px; gap: 8px; }
  .sl-date { min-width: 0; font-size: 22px; }
}