/*
 * style.css — Inventory VIEW (owner read-only) specific styles.
 *
 * hub.css (copied from liff/inventory/) provides the base: layout, form fields,
 * sticky footer, PIN-lock overlay, buttons, loading spinner, error/success
 * notices, and all shared layout.
 *
 * This file adds ONLY the read-only view's specific styles:
 *   - submitted badge (green/grey states)
 *   - date navigation row (prev / date input / next)
 *   - category sections + read-only item rows
 *   - flagged-item highlight + prominent remainingPct badge
 *   - empty state
 *
 * NO edit-affordance styles — this page is strictly read-only.
 */

/* ── Submitted badge ──────────────────────────────────────────────────────── */

.view-badge {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 8px;
}

/* Green — submitted (ส่งแล้ว). */
.view-badge.badge-submitted {
  background-color: rgba(22, 163, 74, 0.10);
  color: var(--color-success);
  border: 1px solid rgba(22, 163, 74, 0.30);
}

/* Grey — not yet submitted (ยังไม่ส่ง). */
.view-badge.badge-pending {
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ── Header counts line ───────────────────────────────────────────────────── */

.view-header-counts {
  font-size: 0.88rem;
  color: var(--color-text);
  margin-top: 6px;
  font-weight: 500;
}

/* ── Date navigation row ──────────────────────────────────────────────────── */

.view-date-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.view-date-nav-btn {
  flex: 0 0 auto;
  /* Slightly smaller than a full secondary button so the date input gets room. */
  min-height: 40px;
  padding: 6px 12px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.view-date-input {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 6px 10px;
  font-size: 0.9rem;
  text-align: center;
}

/* ── Category section ─────────────────────────────────────────────────────── */

.view-category {
  background-color: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  overflow: hidden;
}

.view-category-header {
  background-color: var(--color-surface-alt);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

/* ── Read-only item row ───────────────────────────────────────────────────── */

.view-item-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

.view-item-row:last-child {
  border-bottom: none;
}

/* Flagged rows get an orange-tinted background so the owner spots them. */
.view-item-flagged {
  background-color: rgba(255, 136, 0, 0.06);
}

/* ── Item name + unit (left column) ──────────────────────────────────────── */

.view-item-main {
  min-width: 0;   /* allow text truncation inside a grid cell */
}

.view-item-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
}

.view-item-unit {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Count cells (right column) ──────────────────────────────────────────── */

.view-item-counts {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.view-count-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
}

.view-count-label {
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

.view-count-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

/* ── Flagged remainingPct badge ──────────────────────────────────────────── */
/*
 * This is what the owner scans for: which items need a refill, and how much
 * is left. Visually prominent — orange background, bold.
 */
.view-item-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: #B45309;
  background-color: rgba(255, 136, 0, 0.14);
  border: 1px solid rgba(255, 136, 0, 0.40);
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
  flex: 1 1 100%;
  text-align: center;
  margin-top: 4px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.view-empty {
  text-align: center;
  padding: 48px 16px;
}

.view-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.view-empty-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.view-empty-date {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ── Responsive: wider count cells on tablets ────────────────────────────── */

@media (min-width: 420px) {
  .view-item-counts {
    flex-wrap: nowrap;
  }

  .view-item-pct {
    flex: 0 0 auto;
    margin-top: 0;
  }
}