/* ============================================================
   Ezylife Mobile — production mount layer (admin)
   Adds only what the static handoff leaves to engineering:
   a full-viewport host, real-device safe-area insets, real
   <img> inside the photo frame, and touch feedback.
   Everything visual lives in ezm-tokens.css + ezm-components.css.
   ============================================================ */

/* Full-viewport host that replaces the desktop shell on phones. */
.ezm-host { position: fixed; inset: 0; z-index: 1000; height: 100dvh; background: var(--canvas); }
.ezm-host > .ezm, .ezm-host .ezm-screen { height: 100%; }

/* Real-device safe areas override the mock's fixed 54/30px values. */
.ezm {
  --safe-top: calc(env(safe-area-inset-top, 0px) + 16px);
  --safe-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}

/* Real product image fills the photo frame at the designed ratio. */
.ezm-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ezm-photo.has-img { background-image: none; }

/* Touch-first feedback (no hover transforms). */
.ezm button:active, .ezm a:active, .ezm-card.is-tappable:active { opacity: .82; }
.ezm :focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* A tappable card/row shows it. */
.ezm-tap { cursor: pointer; }

/* Search field (live) — matches the inline style used in the Stock mock. */
.ezm-search { flex: 1; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel);
  display: flex; align-items: center; gap: 8px; padding: 0 13px; color: var(--ink-faint); }
.ezm-search input { flex: 1; border: 0; background: none; outline: none; font-family: var(--body); font-size: 14.5px; color: var(--ink); }
.ezm-search input::placeholder { color: var(--ink-faint); }

/* Toast (not in the static kit; spec'd in README §4). */
.ezm-toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 74px); transform: translateX(-50%) translateY(8px);
  z-index: 1200; max-width: 88%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: var(--body); font-size: 13.5px;
  display: flex; align-items: center; gap: 9px; opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
  box-shadow: 0 10px 30px rgba(58,50,43,.16); }
.ezm-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ezm-toast.is-top { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 64px); transform: translateX(-50%) translateY(-8px); }
.ezm-toast.is-top.is-on { transform: translateX(-50%) translateY(0); }
.ezm-field-error { color: var(--alert, #c0392b); font-size: 12px; margin-top: 5px; font-weight: 500; }
.is-invalid { border-color: var(--alert, #c0392b) !important; }
.ezm-toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.ezm-toast.is-error::before { background: var(--alert); }

/* Photo code overlay on a real image (ref chip, bottom-left). */
.ezm-photo__code.on-img { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ============================================================
   Responsive: mobile-first, scales up to a desktop nav-rail layout.
   ============================================================ */
.ezm-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }

@media (min-width: 768px) {
  .ezm-screen { flex-direction: row; }
  .ezm-tabbar {
    order: -1; flex-direction: column; width: 232px; height: 100%;
    border-top: 0; border-right: 1px solid var(--line);
    padding: calc(var(--safe-top)) 14px 18px; gap: 4px; justify-content: flex-start;
    background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .ezm-tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 12px 14px; border-radius: 12px; }
  .ezm-tab.is-active { background: var(--panel-2); }
  .ezm-tab__label { font-size: 14.5px; }
  .ezm-tab__ico { width: 23px; display: inline-flex; justify-content: center; }
  .ezm-header { padding-top: 22px; }
  .ezm-header__row, .ezm-header__supplier, .ezm-body > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important; }
}
@media (min-width: 1280px) {
  .ezm-tabbar { width: 256px; }
  .ezm-header__row, .ezm-header__supplier, .ezm-body > * { max-width: 1160px; }
}