* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f5f6f8; color: #222; }

#app { display: flex; flex-direction: column; height: 100vh; }

.screen { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem; padding-bottom: 80px; }
.screen.hidden { display: none; }

h1, h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }

/* Auth */
.auth-card { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-top: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.auth-tab-btn { flex: 1; padding: 0.6rem; border: none; background: #e9ecef; border-radius: 0.5rem; font-size: 0.95rem; min-height: 48px; }
.auth-tab-btn.active { background: #0056b3; color: #fff; }
.auth-panel { display: none; }
.auth-panel.active { display: block; }

.form-group { margin-bottom: 0.75rem; }
.form-group label { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: #555; }
.form-group input { width: 100%; padding: 0.65rem; font-size: 1rem; border: 1px solid #ced4da; border-radius: 0.5rem; min-height: 48px; }
.form-error { color: #c0392b; font-size: 0.85rem; margin-bottom: 0.5rem; min-height: 1.2rem; }

.btn { display: inline-block; width: 100%; padding: 0.75rem; font-size: 1rem; border: none; border-radius: 0.5rem; min-height: 48px; cursor: pointer; margin-bottom: 0.5rem; }
.btn-primary { background: #0056b3; color: #fff; }
.btn-secondary { background: #e9ecef; color: #222; }
.btn-danger { background: #c0392b; color: #fff; }

/* Top bar */
.top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }

/* Language selector in settings */
.lang-selector { display: flex; gap: 0.25rem; }
.lang-selector .lang-btn { flex: 1; padding: 0.4rem; border: 1px solid #ced4da; background: #fff; border-radius: 0.5rem; font-size: 0.75rem; min-height: 36px; }
.lang-selector .lang-btn.active { background: #0056b3; color: #fff; border-color: #0056b3; }

/* Scan options */
.scan-options { display: flex; align-items: center; margin-bottom: 0.5rem; }
.toggle-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; color: #555; user-select: none; }
.toggle-label input { display: none; }
.toggle-switch { position: relative; width: 40px; height: 22px; background: #ced4da; border-radius: 11px; transition: background 0.2s; flex-shrink: 0; }
.toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle-label input:checked + .toggle-switch { background: #0056b3; }
.toggle-label input:checked + .toggle-switch::after { transform: translateX(18px); }
.scan-format-badge { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.35rem; border-radius: 3px; background: #e8f0fe; color: #174ea6; vertical-align: middle; }

/* Scanner */
/* No fixed height: html5-qrcode renders the <video> at the container width and
   derives the viewfinder/scan-region coordinates from that video's rendered
   height. A fixed height clips the video, so the shaded viewfinder and the area
   actually scanned drift apart. Let the container grow to the video instead. */
.scanner-wrap { width: 100%; background: #000; border-radius: 0.75rem; overflow: hidden; margin-bottom: 0.75rem; }

/* Cards */
.result-card, .card { background: #fff; border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 0.75rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.result-card.hidden { display: none; }
.card-title { font-weight: 600; margin-bottom: 0.25rem; }
.card-meta { font-size: 0.85rem; color: #666; }
.card-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.qty-controls { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.qty-controls button { width: 48px; height: 48px; font-size: 1.25rem; border: 1px solid #ced4da; background: #fff; border-radius: 0.5rem; }
.qty-controls input { flex: 1 1 auto; height: 48px; text-align: center; font-size: 1rem; border: 1px solid #ced4da; border-radius: 0.5rem; min-width: 0; }

/* Item dialog */
.item-dialog img { max-width: 100%; border-radius: 0.5rem; display: block; margin: 0 auto 0.5rem; }
.item-dialog .dialog-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }
.item-dialog .dialog-desc.expanded { -webkit-line-clamp: unset; display: block; }
.item-dialog .dialog-stock { font-size: 0.85rem; color: #555; margin-bottom: 0.5rem; }
.item-dialog .dialog-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }

/* Empty state */
.empty-state { text-align: center; color: #888; padding: 2rem 0; font-size: 0.95rem; }
.empty-state.hidden { display: none; }

/* Unified item widget */
.item-widget { display: flex; gap: 0.75rem; }
.item-widget-media { flex-shrink: 0; width: 80px; height: 80px; }
.item-widget-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; background: #e9ecef; display: block; }
.item-widget-thumb-placeholder { width: 100%; height: 100%; border-radius: 0.5rem; background: #e9ecef; }
.item-widget-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-widget-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.item-widget-name { font-weight: 600; font-size: 0.95rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-widget-category { font-size: 0.8rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; flex-shrink: 0; text-align: right; }
.item-widget-desc { font-size: 0.8rem; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5rem; }
.item-widget-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: auto; }
.item-widget-actions .qty-controls { width: auto; }
.item-widget-actions .qty-controls input { width: 56px; }

/* Actions bar */
.actions-bar { position: sticky; bottom: 0; background: #f5f6f8; padding: 0.5rem 0; }
.actions-bar.hidden { display: none; }

/* Bottom nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; background: #fff; border-top: 1px solid #dee2e6; padding: 0.25rem 0; z-index: 100; }
.bottom-nav.hidden { display: none; }
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; background: none; border: none; padding: 0.4rem; font-size: 0.7rem; color: #666; position: relative; min-height: 56px; }
.nav-btn.active { color: #0056b3; }
.nav-icon { font-size: 1.25rem; line-height: 1; }
.nav-label { font-size: 0.7rem; }
.badge { position: absolute; top: 2px; right: 20%; background: #c0392b; color: #fff; border-radius: 50%; width: 20px; height: 20px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; }
.badge.hidden { display: none; }

/* Orders */
.status-pending { color: #f39c12; }
.status-approved { color: #27ae60; }
.status-rejected { color: #c0392b; }
.status-executed { color: #2980b9; }

.order-card { cursor: pointer; }
.order-summary { pointer-events: none; }
.order-items { margin-top: 0.5rem; border-top: 1px solid #ececec; padding-top: 0.5rem; }
.order-item-row { display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem 0; }
.order-item-media { flex-shrink: 0; width: 40px; height: 40px; }
.order-item-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 0.35rem; background: #e9ecef; display: block; }
.order-item-thumb-placeholder { width: 100%; height: 100%; border-radius: 0.35rem; background: #e9ecef; }
.order-item-body { flex: 1; min-width: 0; }
.order-item-name { font-weight: 500; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-item-meta { font-size: 0.75rem; color: #666; }

/* Item type tag with an explanatory popup (popup element is appended to body
   so it is never clipped by scroll/overflow containers) */
.type-tag {
  cursor: help;
}
.type-tip-popup {
  position: fixed;
  z-index: 3000;
  background: #202124;
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  max-width: 240px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}