/*
 * style.css — Sales Report LIFF (Slice 1.2)
 *
 * Imports the shared hub.css base (copied into this folder from liff/shared/).
 * Adds Sales Report-specific styles on top: channel table layout, the mismatch
 * warning, and the special-items section.
 *
 * The sticky footer uses env(safe-area-inset-bottom) via .hub-footer in hub.css.
 * (R6 — Android edge-to-edge). No override needed here because hub.css defines it.
 */

/* ── Channel table layout ────────────────────────────────────────────────────
   Each channel appears as a labelled row. Walk-in has three inputs (cups, calc,
   POS); delivery channels have two (cups, ฿). A compact grid fits three inputs
   on one line without horizontal scrolling on a phone held in portrait.         */

.channel-row {
  background-color: var(--color-surface);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}

.channel-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}

/* Inputs inside a channel row sit side by side. */
.channel-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Each input field label is shown as a tiny label above the field. */
.channel-input-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.channel-input-wrap .field-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

/* Make number inputs inside channel rows a bit more compact. */
.channel-inputs .hub-number {
  padding: 8px 6px;
  font-size: 0.9rem;
  width: 100%;
  min-width: 0;    /* allow flex to shrink below default min-content */
}

/* ── Walk-in mismatch warning ────────────────────────────────────────────────
   Shown below the Walk-in row when calc ฿ ≠ POS ฿. Hidden by default; app.js
   toggles visibility on input changes.                                          */

#walkin-mismatch-warning {
  display: none;   /* app.js calls setVisible() to show/hide */
  margin-top: 6px;
}

/* ── Section headings ────────────────────────────────────────────────────────
   "ยอดขาย" and "รายการพิเศษ" are h2 headings between the header and the channel
   list. Uses hub.css h2 styles.                                                  */

.section-heading {
  margin-top: 22px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Special items section ───────────────────────────────────────────────────
   TEST, LOST, PROMO, DISCOUNT — each gets a card with qty/baht + note fields.   */

.special-item-card {
  background-color: var(--color-surface);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}

.special-item-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}

/* Qty/baht field + note field side by side. */
.special-item-inputs {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.special-item-qty {
  flex: 0 0 80px;    /* fixed narrow width for the number */
}

.special-item-note {
  flex: 1;           /* note takes the remaining width */
}

/* ── Loading screen ──────────────────────────────────────────────────────────
   Centred spinner shown during LIFF init and draft load. hub.css provides the
   .hub-loading and .hub-spinner classes.                                         */

#loading-screen {
  min-height: 60vh;
}

/* ── Submitted notice ────────────────────────────────────────────────────────
   Read-only banner when the report was already submitted today.
   hub.css provides the base .hub-submitted-notice styles.                        */

#submitted-notice {
  /* Centre the notice in the viewport. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 24px;
}

/* ── Footer grand total display ──────────────────────────────────────────────
   The live grand total in the sticky footer. hub.css provides .hub-footer and
   .footer-total; this just tweaks the size slightly for prominence.              */

.footer-total {
  font-size: 1.2rem;
}