/* Tangerine Phuket — daily 9am review styling (mobile-first). */

/* Base rules apply at every width. The layout is mobile- FIRST: the phone
   layout is the default; wider viewports get progressive enhancements via
   @media (min-width: ...) gates below. */

:root {
  --flag-red: #c0392b;
  --text: #1a1a1a;
  --muted: #555;
  --rule: #ddd;
  --surface: #ffffff;
  --surface-alt: #f7f7f7;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--surface-alt);
  font-size: 16px;
  line-height: 1.4;
}

.review {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background: var(--surface);
}

.review h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.review .day {
  color: var(--muted);
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.review .empty-note {
  background: var(--surface-alt);
  padding: 0.75rem;
  border-radius: 4px;
  color: var(--muted);
}

.review section {
  margin-bottom: 1.5rem;
}

.review h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
}

.review dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.review dt {
  color: var(--muted);
}

.review dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Segment CM table: stacks cleanly on narrow screens. */
.segment-cm table {
  width: 100%;
  border-collapse: collapse;
}

.segment-cm th,
.segment-cm td {
  text-align: left;
  padding: 0.4rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.segment-cm th {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.segment-cm__cm {
  text-align: right;
}

.segment-cm__row--red .segment-cm__cm {
  color: var(--flag-red);
  font-weight: 700;
}

.segment-cm__flag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  background: var(--flag-red);
  color: #fff;
  font-size: 0.7rem;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

/* Rankings: a single column on phones, a 2x2 grid on wider viewports. */
.rankings__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.ranking h3 {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
  color: var(--muted);
}

.ranking__list {
  margin: 0;
  padding-left: 1.25rem;
}

.ranking__list li {
  margin-bottom: 0.2rem;
}

.ranking__metric {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Below-target + needs-attention: plain lists with clear reason labels. */
.below-target ul,
.needs-attention ul {
  margin: 0;
  padding-left: 1.25rem;
}

.needs-attention__note {
  color: var(--muted);
  font-size: 0.9rem;
}

.needs-attention__reason {
  font-weight: 600;
}

/* Goal progress reuses the dl grid above. */

/* Sync control: the "Sync now" button + its in-flight indicator + the result
   fragment slot. Mobile-first: the button is a full-width tap target on
   phones (the in-venue recovery path is a partner on their phone at 9:01am). */
.sync-control {
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  background: var(--surface-alt);
  border-radius: 4px;
}

.sync-control__button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--surface);
  background: var(--text);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.sync-control__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.sync-control__indicator {
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* The result fragment slot starts empty; HTMX swaps the fragment in here. */
.sync-result {
  margin-top: 0.5rem;
}

.sync-result h3 {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
  color: var(--muted);
}

.sync-result__errors {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
  color: var(--flag-red);
}

.sync-result__error {
  margin-bottom: 0.2rem;
}

/* Signed-in-as row (slice 4): who the partner is, plus a sign-out button. */
.signed-in-as {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.logout-button {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.logout-button:hover {
  background: var(--surface-alt);
}

/* --- Slice 5: day navigation, freshness, and error states ------------------- */

/* Day-navigation control: a full-width date picker on phones (the partner taps
   it to look back at a previous day). */
.day-nav {
  margin-bottom: 1rem;
}

.day-nav__label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.day-nav__label span {
  color: var(--muted);
  font-size: 0.9rem;
}

.day-nav__input {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* Stale-data banner: a prominent, hard-to-miss alert at the top of the review
   when the nightly sync is overdue. Warm amber so it reads as "attention", not
   "error" (a missed sync is recoverable with one tap). */
.stale-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem;
  background: #fff4e0;
  border: 1px solid #e0a93f;
  border-radius: 4px;
}

.stale-banner__text {
  flex: 1 1 auto;
}

.stale-banner__sync,
.empty-store__sync {
  display: inline-block;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--surface);
  background: var(--text);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.stale-banner__sync:disabled,
.empty-store__sync:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Last-sync indicator: quiet, always-on freshness marker. */
.last-sync {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Empty-store first-run state: a friendly call to action rather than a page of
   zeros that looks broken. */
.empty-store {
  padding: 1.25rem;
  background: var(--surface-alt);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  text-align: center;
}

.empty-store h2 {
  border: 0;
  margin-top: 0;
}

.empty-store__message {
  color: var(--muted);
  margin: 0 0 1rem;
}

.empty-store__sync {
  font-size: 1.05rem;
  padding: 0.6rem 1.25rem;
}

/* Per-day "no data" note (distinct from the whole-store empty state). */
.empty-note--day {
  color: var(--muted);
}

/* Login page (slice 4): mobile-first single-column form. */
.login {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  background: var(--surface);
}

.login h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.login__error {
  background: var(--flag-red);
  color: #fff;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  margin: 0 0 1rem;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.login__field span {
  color: var(--muted);
  font-size: 0.9rem;
}

.login__field input,
.login__field select {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.login__form button {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem;
  border: none;
  border-radius: 4px;
  background: var(--text);
  color: #fff;
  cursor: pointer;
}

/* --- Progressive enhancement for wider viewports (tablet / desktop) ---------- */
@media (min-width: 700px) {
  .review {
    max-width: 720px;
    padding: 2rem;
  }

  .review h1 {
    font-size: 1.8rem;
  }

  .rankings__grid {
    grid-template-columns: 1fr 1fr;
  }

  .login {
    max-width: 420px;
    padding: 2.5rem 2rem;
  }
}