/*
 * style.css — Inventory LIFF specific styles.
 *
 * hub.css (copied from liff/shared/) provides the base: dark navy moodboard,
 * form fields, collapsible sections, item rows, sticky footer, photo section,
 * month-end banner, and all shared layout.
 *
 * This file adds only Inventory-specific overrides and additions.
 */

/* ── Session heading (used in index.html for "ช่วงเปิดร้าน" / "ช่วงปิดร้าน") ─ */

.session-heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 0 4px 0;
}

.section-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 16px;
  margin-bottom: 8px;
}

/* ── Write-in item "+" button row ────────────────────────────────────────── */

.write-in-row {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0 4px 0;
}

/* ── Item count inputs — tighter layout for 3 fields side by side ────────── */

/*
 * Each count input wrapper (built by buildItemRowElement in app.js) uses
 * inline styles for its flex-column layout. The hub-number class from hub.css
 * already right-aligns numeric values, but we make inventory count inputs
 * a bit more compact than the default to fit 3 per row.
 */
.hub-item-counts .hub-number {
  width: 68px;
  min-width: 56px;
  padding: 6px 4px;
  font-size: 0.9rem;
  text-align: center;
}

/* ── Remaining % (เหลือ %) — amber highlight when visible ─────────────────── */

.hub-remaining-pct.visible {
  background-color: rgba(255, 152, 0, 0.06);
  border-radius: 6px;
  padding: 6px 8px;
}

/* The % label inside a visible pct wrap. */
.hub-remaining-pct.visible label {
  color: var(--color-warning);
  font-weight: 600;
}

/* ── Month-end opened column emphasis ────────────────────────────────────── */

/*
 * On month-end days the "opened" field's label is changed to "เปิดแล้ว %"
 * by app.js. No special CSS is needed here — the month-end banner (hub.css
 * .hub-month-end-banner) already communicates the mode switch to the barista.
 */

/* ── Write-in item name input ────────────────────────────────────────────── */

/*
 * Write-in item rows have an editable name input where config items show a
 * static label. Ensure it matches the style of the item name label.
 */
.hub-item-row input.hub-input[id$="-name"] {
  font-size: 0.9rem;
  min-height: 38px;
  padding: 6px 10px;
}

/* ── Collapsible section count badge ────────────────────────────────────── */

/*
 * The section title shows "CategoryName (N)" where N is the item count.
 * The count is rendered in a slightly muted colour to de-emphasise it.
 */
.hub-section-header .section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

/* When a section is collapsed, the title text fades slightly. */
.hub-section:not(.expanded) .hub-section-header .section-title {
  color: var(--color-text-muted);
}

/* ── Photo preview thumbnail ─────────────────────────────────────────────── */

/*
 * hub.css already defines .hub-photo-preview (display:none by default,
 * display:block when .visible is added). Add a subtle border so the preview
 * reads as distinct from the surrounding navy background.
 */
.hub-photo-preview {
  border: 1px solid var(--color-border);
  margin-top: 8px;
}

/* ── Footer progress line ─────────────────────────────────────────────────── */

/*
 * The inventory footer shows "N รายการ / ต้องเติม: M" instead of a task count.
 * hub.css already styles .footer-progress; no override needed. This comment
 * documents the expected format so future editors know the CSS is intentional.
 */

/* ── Responsive item row grid on wider screens ──────────────────────────── */

/*
 * On screens wider than 420 px (tablets, landscape phones), allow the count
 * inputs to sit fully in a row without wrapping.
 */
@media (min-width: 420px) {
  .hub-item-counts {
    flex-wrap: nowrap;
  }

  .hub-item-counts .hub-number {
    width: 72px;
  }
}

/* ── Friday photo controls ──────────────────────────────────────────────── */

/*
 * Photo upload control — only shown on Fridays (applyFridayMode() in app.js
 * adds .visible to #photo-section). Previously these rules lived inline on
 * the <input> and <div> in index.html; moved here to match Phase B/C house
 * style (no inline styles for static design rules).
 */
#photo-input        { color: var(--color-text); margin-bottom: 8px; display: block; }
#photo-status       { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 6px; }
.hub-month-end-banner .banner-hint { font-size: 0.82rem; }