/* The owner view (docs/phase-1-spec.md section 15), on top of the cloud's
   shared sheet (/static/web/base.css): the day on the restaurant's green,
   charts drawn on the server, and the lists and tables of each page. */

.day-switch { display: flex; align-items: center; gap: 6px; margin: 0; }

.day-switch h1 {
  margin: 0 6px;
  font: 700 28px/1.15 var(--display);
  letter-spacing: -0.01em;
}

.step {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}

.step svg { width: 18px; height: 18px; }
.step.off { opacity: 0.35; }

.date-input {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font: 500 14px var(--text);
  color: var(--ink);
}

.show {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font: 600 14px var(--text);
}

.fresh { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14px; }

.fresh::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-wash);
}

/* The day: what came in so far, hour by hour, on the restaurant's green. */
.day {
  background: var(--green);
  color: var(--cream);
  border-radius: 26px;
  padding: 28px 32px 20px;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 18px 40px;
  align-items: end;
}

.day-figure p { margin: 0; color: var(--cream-soft); font-size: 15px; }

.figure {
  display: block;
  margin: 6px 0 12px;
  font: 700 clamp(52px, 6.6vw, 82px)/0.92 var(--display);
  font-stretch: 78%;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.figure small { font-size: 0.4em; font-weight: 600; letter-spacing: 0; margin-right: 0.12em; }
.versus { display: inline-flex; align-items: center; gap: 6px; color: var(--marigold); font-weight: 600; }
.versus.down { color: #ffb4a3; }
.versus svg { width: 16px; height: 16px; }
.versus-note { display: block; color: var(--cream-soft); font-size: 13px; margin-top: 2px; }

.strip-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--cream-soft); font-size: 12.5px; }
.strip-key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.strip-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.key-past { background: var(--cream); }
.key-now { background: var(--marigold); }
.key-mark { background: var(--mark); }
.strip-empty { margin: 0; color: var(--cream-soft); }

/* Charts: a wide drawing for computers, a narrow one for phones. */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-narrow { display: none; }
.chart .grid { stroke: var(--line); }
.chart .axis { fill: var(--ink-faint); font-size: 12px; }
.chart .tick { fill: var(--ink-soft); font-size: 13px; }
.strip .grid { stroke: rgba(246, 239, 223, 0.14); }
.strip .axis { fill: rgba(246, 239, 223, 0.55); font-size: 11px; }
.strip .tick { fill: rgba(246, 239, 223, 0.62); font-size: 12px; }
.strip .base { stroke: rgba(246, 239, 223, 0.35); }
.strip .bar.past { fill: var(--cream); }
.strip .bar.now { fill: var(--marigold); }
.strip .bar.later { fill: rgba(246, 239, 223, 0.14); }
.strip .mark { fill: var(--mark); }
.days .bar.day { fill: var(--green-2); }
.days .bar.today { fill: var(--marigold); }
.days .value { fill: var(--ink); font-size: 12.5px; font-weight: 600; }
.days .average { stroke: var(--amber); stroke-dasharray: 5 5; }
.chart-key { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; color: var(--amber); font-size: 13px; font-weight: 600; }
.key-average { width: 18px; border-top: 2px dashed var(--amber); }

/* Four facts in one ruled band rather than four boxes. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.fact { padding: 18px 22px 20px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
.fact h3 { margin: 0; font: 600 14px var(--text); color: var(--ink-soft); }
.fact .value { display: block; margin-top: 4px; font: 650 30px/1.1 var(--display); font-stretch: 85%; letter-spacing: -0.01em; }
.fact p { margin: 6px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.fact p strong { color: var(--ink); font-weight: 600; }

.split { display: block; width: 100%; height: 8px; margin: 12px 0 8px; border-radius: 4px; }
.split .track { fill: var(--line); }
.split .cash { fill: var(--green); }
.split .card { fill: var(--marigold); }
.split-key { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }
.split-key span:last-child { text-align: right; }
.split-key strong { display: block; color: var(--ink); font: 650 19px/1.2 var(--display); font-stretch: 85%; white-space: nowrap; }

/* Things to look at: worst first; good news last and quiet. */
.look { list-style: none; margin: 0; padding: 0; }

.look li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.look li:first-child { border-top: 0; }
.sign { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.sign svg { width: 16px; height: 16px; }
.sign.bad { background: var(--chilli-wash); color: var(--chilli); }
.sign.warn { background: var(--amber-wash); color: var(--amber); }
.sign.good { background: var(--ok-wash); color: var(--ok); }
.look p { margin: 0; }
.look .then { display: block; color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }
.look a { font-weight: 600; font-size: 13.5px; }

/* Ranked lists: best sellers and categories, so numbers are honest here. */
.ranked { list-style: none; margin: 0; padding: 0; counter-reset: rank; }

.ranked li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.ranked li:first-child { border-top: 0; }
.ranked li::before { counter-increment: rank; content: counter(rank); color: var(--ink-faint); font-weight: 600; }
.ranked .name { font-weight: 600; }
.ranked .qty { color: var(--ink-soft); font-weight: 400; }
.ranked .amount { font-weight: 600; }
.ranked .bar { grid-column: 2 / 4; width: 100%; height: 4px; border-radius: 2px; }
.bar .track { fill: var(--line); }
.bar .fill { fill: var(--green-2); }

.short { color: var(--chilli); font-weight: 600; }
.over { color: var(--amber); font-weight: 600; }
.exact { color: var(--ok); font-weight: 600; }
.today-row td { background: rgba(244, 191, 42, 0.12); }
.share { display: inline-flex; align-items: center; gap: 8px; }
.share .bar { width: 72px; height: 6px; border-radius: 3px; }

.headline { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.headline .big { font: 700 44px/1 var(--display); font-stretch: 80%; letter-spacing: -0.02em; }
.headline .big small { font-size: 0.45em; font-weight: 600; letter-spacing: 0; }
.headline p { margin: 6px 0 0; color: var(--ink-soft); }

/* The checks: who did what, who allowed it, and why. */
.checks { list-style: none; margin: 12px 0 0; padding: 0; }

.checks li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.checks time { color: var(--ink-soft); font-weight: 600; }
.checks .what { font-weight: 600; }
.checks .who { grid-column: 2 / 3; color: var(--ink-soft); font-size: 13.5px; }
.checks .why { grid-column: 2 / 4; font-size: 13.5px; }
.checks .why::before { content: "\201C"; }
.checks .why::after { content: "\201D"; }
.checks .amount { font-weight: 600; text-align: right; }
.tag.void, .tag.cancel { background: var(--chilli-wash); color: var(--chilli); }
.tag.discount { background: var(--amber-wash); color: var(--amber); }
.tag.cash { background: #ece6d8; color: var(--ink-soft); }
.tag.approval { background: var(--ok-wash); color: var(--ok); }

.drawer { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.drawer div { padding: 6px 18px 6px 0; }
.drawer div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.drawer span { display: block; color: var(--ink-soft); font-size: 13.5px; }
.drawer strong { display: block; font: 650 26px/1.2 var(--display); font-stretch: 85%; }
.drawer .result strong { color: var(--green); }

.count { font: 650 34px/1.1 var(--display); font-stretch: 85%; display: block; margin: 4px 0; }

/* The back office: what is owed by age, downloads, and entries that stay
   though cancelled. */
.aging { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 8px; }
.aging div { padding: 4px 16px 4px 0; }
.aging div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.aging span { display: block; color: var(--ink-soft); font-size: 13.5px; }
.aging strong { display: block; font: 650 22px/1.25 var(--display); font-stretch: 85%; }
.sub { margin: 14px 0 4px; font: 600 14px var(--text); color: var(--ink-soft); }
.headline h2 { margin: 0 0 4px; font: 650 19px/1.3 var(--display); }
.headline .up { color: var(--chilli); font-weight: 600; }
.headline .down { color: var(--ok); font-weight: 600; }

.download {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

tr.gone td { color: var(--ink-faint); }
td.wrap { white-space: normal; min-width: 150px; }
tr.gone td .note.cancel { color: var(--chilli); }
td .note.over { color: var(--amber); font-weight: 600; }
td .note.exact { color: var(--ok); font-weight: 600; }
.aging.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.headline .big.loss { color: var(--chilli); }
tr.strong td { font-weight: 700; border-top: 1px solid var(--line-strong); }
.back { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; vertical-align: -4px; color: var(--ink); }
.back svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .day-switch h1 { font-size: 21px; margin: 0 2px; }
  .date-input { display: none; }
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
  .day { grid-template-columns: 1fr; padding: 22px 18px 16px; border-radius: 22px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { padding: 14px 16px 16px; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .fact .value { font-size: 25px; }
  .drawer { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 12px 0; }
  .drawer div + div { padding-left: 0; border-left: 0; }
  .drawer div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
  .checks li { grid-template-columns: 48px minmax(0, 1fr); }
  .checks .amount { grid-column: 2; text-align: left; }
  .checks .why { grid-column: 2; }
  .headline .big { font-size: 36px; }
  .aging { grid-template-columns: 1fr 1fr; gap: 10px 0; }
  .aging div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* One moment of motion: the day's bars rise when the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .strip .bar.past,
  .strip .bar.now {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  @keyframes rise {
    from { transform: scaleY(0.02); }
    to { transform: scaleY(1); }
  }
}

/* The branch switcher, for an owner of several branches. */
.branch-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 12px 0 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

.branch-switch select,
.branch-switch button {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  font: 600 13px var(--text);
  color: var(--ink);
}

.branch-switch a { flex-basis: 100%; color: var(--green); font-weight: 600; }