/* Chỉ chứa style bổ sung ngoài Tailwind. Toàn bộ bố cục chính dùng Tailwind CDN. */

/* Vừa khổ điện thoại trong Mini App Telegram: Tailwind CDN tạo style bằng
   JavaScript sau khi trang tải, nên trước lúc đó trang chưa có bố cục và
   WebView có thể khóa tỉ lệ theo chiều rộng lúc chưa tạo style, trông như
   bị phóng to và phải chụm 2 ngón tay thu lại. Các quy tắc cốt lõi dưới
   đây nằm trong file CSS tải đồng bộ, nên bố cục đã là 1 cột vừa màn hình
   ngay từ đầu, Tailwind tải xong chỉ tô thêm, không đổi chiều rộng. */
* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
/* Khóa zoom chụm tay trên điện thoại: chỉ cho trượt dọc/ngang, không
   cho chụm để phóng to trang. Zoom trợ năng của hệ thống vẫn dùng được
   ngoài trang. */
body { touch-action: pan-x pan-y; }
/* Vuốt trong modal không kéo theo trang phía sau. */
[id$="Modal"] > div { overscroll-behavior: contain; }
body { margin: 0; }
.grid { display: grid; gap: 12px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.grid > * { min-width: 0; }
p, h1, h2, h3, b, span, a, label { overflow-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; }
body { font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); }
.pill { border-radius: 999px; }
.badge { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.badge-wait { background: #fef3c7; color: #92400e; }
.badge-waiting { background: #ffedd5; color: #9a3412; }
.badge-doing { background: #dbeafe; color: #1e40af; }
.badge-done { background: #dcfce7; color: #166534; }
.badge-sent { background: #ede9fe; color: #5b21b6; }
.queue-first { border: 2px solid #0071e3; background: #eff6ff; }
.tab-active { background: #0071e3 !important; color: #fff !important; border-color: #0071e3 !important; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35); }
input, select, textarea { outline: none; }
input:focus, select:focus, textarea:focus { border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); }
.hidden { display: none !important; }

/* Spin loading dùng chung cho các nút chờ backend, nhất là đăng nhập. */
.spinner { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: od-spin 0.8s linear infinite; }
.btn-loading { opacity: 0.7; pointer-events: none; }
@keyframes od-spin { to { transform: rotate(360deg); } }

/* Nút mắt hiện/ẩn mật khẩu, đặt trong ô mật khẩu. */
.eyeBtn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #6b7280; line-height: 1; cursor: pointer; padding: 4px; display: flex; align-items: center; }
.eyeBtn svg { width: 20px; height: 20px; display: block; }
.pwdWrap { position: relative; }
.pwdWrap input { padding-right: 40px; }

/* Điện thoại: tôn trọng vùng tai thỏ, thanh nav cuộn ngang một hàng
   thay vì xếp thành 3 hàng, thẻ bo nhỏ lại cho gọn. */
body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
#mainNav { scrollbar-width: none; }
#mainNav::-webkit-scrollbar { display: none; }
#mainNav .navBtn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .card { border-radius: 16px; padding: 16px; }
  /* iOS tự phóng to khi chạm vào ô nhập có cỡ chữ dưới 16px, và giữ
     nguyên mức phóng đó cho tới khi người dùng chụm tay thu lại. Đặt
     16px cho mọi ô nhập để chặn hẳn cơ chế tự phóng này, không khóa
     zoom của người dùng bằng maximum-scale hay user-scalable=no. */
  input, select, textarea { font-size: 16px !important; }
  /* Điện thoại: ô Tìm Order full hàng thay vì bị bóp dọc, nút chia đều
     hàng dưới; thẻ Thống kê 2 cột thay vì 1 cột dài; nav xếp hàng thay
     vì cuộn ngang cắt nửa nút. Các quy tắc này nằm trong CSS tải đồng
     bộ nên đúng ngay cả khi Tailwind CDN tải chậm. */
  #searchCard { flex-direction: column; align-items: stretch; }
  #searchCard > label { width: 100%; flex: none; }
  #statsCards { grid-template-columns: 1fr 1fr; gap: 12px; }
  #statsCards .card { padding: 12px; }
  #mainNav { flex-wrap: wrap; overflow-x: visible; }
}

.badge-paused { background: #e2e8f0; color: #334155; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-original { background: #ede9fe; color: #5b21b6; }