/* FashionStock Manager v2 — mobile-first styles */
:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --ink: #1f2430;
  --muted: #6b7280;
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --danger: #dc2626;
  --ok: #059669;
  --warn: #d97706;
  --radius: 12px;
  --shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}
/* The `hidden` attribute must always win over component display rules
   (e.g. .modal-backdrop sets display:flex which would otherwise
   override the browser's default [hidden]{display:none}). */
[hidden]{display:none!important}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Pyidaungsu", "Myanmar3", "Noto Sans Myanmar", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: 76px; /* space for bottom nav */
}
h2 { font-size: 1.25rem; margin: 14px 0 10px; }
h3 { font-size: 1.05rem; margin: 18px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--danger); font-size: 0.9rem; }

/* Banner */
.banner { padding: 10px 14px; font-size: 0.9rem; }
.banner.warn { background: #fef3c7; color: #92400e; border-bottom: 1px solid #fcd34d; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; width: 100%; max-width: 380px; text-align: center; }
.login-logo { font-size: 3rem; }
.login-card h1 { margin: 8px 0 2px; font-size: 1.4rem; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--primary); color: #fff; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.shop-name { font-weight: 700; font-size: 1.05rem; }
.shop-sub { font-size: 0.8rem; opacity: 0.85; }

/* Views */
#views { padding: 4px 12px 12px; max-width: 720px; margin: 0 auto; }
.view-head { display: flex; justify-content: space-between; align-items: center; }

/* Stats */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; text-align: center; }
.stat-label { font-size: 0.8rem; color: var(--muted); }
.stat-val { font-size: 1.35rem; font-weight: 700; color: var(--primary-dark); }
.stat-unit { font-size: 0.75rem; color: var(--muted); }

/* Lists */
.list { display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.item .grow { flex: 1; min-width: 0; }
.item .t { font-weight: 600; }
.item .s { font-size: 0.82rem; color: var(--muted); }
.badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.badge.ok { background: #d1fae5; color: #065f46; }
.badge.low { background: #fef3c7; color: #92400e; }
.badge.out { background: #fee2e2; color: #991b1b; }
.empty { text-align: center; color: var(--muted); padding: 18px; background: var(--card); border-radius: var(--radius); }

/* Forms */
label { display: block; font-size: 0.9rem; margin: 8px 0; }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], input[type=month], select {
  width: 100%; padding: 10px 12px; font-size: 1rem; font-family: inherit;
  border: 1px solid #d1d5db; border-radius: 8px; background: #fff; margin-top: 4px;
}
input:focus, select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.search { margin: 6px 0 10px; }
.form-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 10px; }
.row { display: flex; gap: 8px; align-items: center; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Buttons */
.btn { font-family: inherit; font-size: 0.95rem; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:active { background: var(--primary-dark); }
.btn.ghost { background: transparent; border-color: #d1d5db; color: var(--ink); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.small { padding: 7px 12px; font-size: 0.85rem; }
.btn.block { display: block; width: 100%; margin-top: 8px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 6px; }
/* Sync-status pill: 🟢 online · ⏳ syncing · 📴 offline */
.net-pill {
  font-size: .72rem; background: rgba(255,255,255,.14); border: 1px solid #e8c86a;
  color: #ffe9a8; border-radius: 999px; padding: 4px 10px; white-space: nowrap;
  align-self: center;
}

/* Cart */
.cart-summary { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-top: 10px; }
.cart-summary .row { justify-content: space-between; margin: 6px 0; }
.cart-summary input[type=number] { width: 120px; margin-top: 0; }
.grand { font-size: 1.15rem; }
.grand b { color: var(--primary-dark); }
.qty-ctl { display: flex; align-items: center; gap: 6px; }
.qty-ctl button { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; font-size: 1rem; }

/* Bottom nav */
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; background: var(--card); border-top: 1px solid #e5e7eb; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav button { flex: 1; background: none; border: none; padding: 8px 2px 6px; font-size: 1.2rem; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: inherit; }
.bottomnav button span { font-size: 0.68rem; }
.bottomnav button.active { color: var(--primary); font-weight: 700; }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal { background: var(--card); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 18px; }
@media (min-width: 560px) { .modal-backdrop { align-items: center; } .modal { border-radius: 16px; } }
.modal h3 { margin-top: 0; }
.modal .row { justify-content: flex-end; margin-top: 12px; }

/* Voucher */
.voucher { font-size: 0.92rem; }
.v-head { text-align: center; margin-bottom: 8px; }
.v-head h3 { margin: 0 0 2px; }
.v-row { display: flex; justify-content: space-between; padding: 2px 0; }
.v-row.grand { font-size: 1.1rem; font-weight: 700; }
.v-thanks { text-align: center; margin-top: 10px; }
.v-item { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted #e5e7eb; }

/* Toast */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 99; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

/* Print: only voucher */
@media print {
  body { padding: 0; background: #fff; }
  body * { visibility: hidden; }
  #voucher-print, #voucher-print * { visibility: visible; }
  #voucher-print { position: absolute; top: 0; left: 0; width: 100%; padding: 8px; }
  .no-print { display: none !important; }
}

@media (min-width: 720px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Added for bilingual UI (EN/MM toggle) ---- */
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.lang-toggle { display: inline-flex; background: rgba(255,255,255,0.18); border-radius: 20px; padding: 2px; }
.lang-toggle button {
  border: none; background: transparent; color: #fff; font-family: inherit;
  font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 18px; cursor: pointer;
}
.lang-toggle button.active { background: #fff; color: var(--primary-dark); }
.login-card { position: relative; }
.login-lang { position: absolute; top: 12px; right: 12px; background: #eef0f6; }
.login-lang button { color: var(--muted); }
.login-lang button.active { background: var(--primary); color: #fff; }

/* Row item (used by JS renderers) */
.row-item {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.badge.warn { background: #fef3c7; color: #92400e; }

/* Payment type segmented control */
.seg { display: flex; gap: 6px; }
.seg-btn { border: 1px solid #d1d5db; background: #fff; color: var(--ink); }
.seg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Voucher balance row */
.v-row.bal b { color: var(--danger); }

/* Status tags in reports */
.tag { display: inline-block; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.tag.warn { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.tag.ok { background: #ecfdf5; color: var(--ok); border: 1px solid #a7f3d0; }
.r-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Unpaid-only toggle active state */
#btn-rep-unpaid.active { background: var(--warn); border-color: var(--warn); color: #fff; }

.warn-text { color: var(--danger); }

/* Low-stock alert badge on nav */
.bottomnav button { position: relative; }
.nav-badge {
  position: absolute; top: 2px; right: 6px;
  background: var(--danger); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* Logo */
.login-logo img { width: 76px; height: 76px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; }
.v-logo { width: 52px; height: 52px; margin-bottom: 4px; }

.login-logo img, .brand-logo, .v-logo { border-radius: 50%; }

/* Install button (icon only, big) */
#btn-install { font-size: 1.5rem; padding: 8px 12px; line-height: 1; }

/* Steps list (iOS install) */
.steps { margin: 0 0 14px 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Stay-signed-in checkbox */
.check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.check input { width: auto; margin: 0; }

/* ============ GOLD ELEGANT THEME — ရွှေအညာ 👑 ============ */
:root {
  --bg: #f6f1e6;
  --card: #fffdf8;
  --ink: #2c2313;
  --muted: #8d7c58;
  --primary: #c19a2b;
  --primary-dark: #96711a;
  --danger: #c0392b;
  --ok: #1e7d4f;
  --warn: #b97a0c;
  --radius: 16px;
  --shadow: 0 2px 12px rgba(120, 90, 20, 0.10);
  --gold-grad: linear-gradient(135deg, #dbb445 0%, #bd8f1e 55%, #97700f 100%);
  --ink-grad: linear-gradient(135deg, #241c0e 0%, #4d3a16 100%);
}
body {
  background: radial-gradient(1100px 280px at 50% -120px, #f0e2bd 0%, rgba(240,226,189,0) 60%), var(--bg);
}
/* Headings with gold accent bar */
h2 { display: flex; align-items: center; gap: 8px; }
h2::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--gold-grad); flex: none; }
/* Top bar — deep espresso bronze with gold */
.topbar { background: var(--ink-grad); border-bottom: 2px solid var(--primary); box-shadow: 0 2px 10px rgba(40, 28, 8, 0.35); }
.shop-name { color: #f2dd9a; letter-spacing: 0.3px; }
.topbar .btn.ghost { color: #f7ecd0; border-color: rgba(242, 221, 154, 0.5); }
.lang-toggle { background: rgba(242, 221, 154, 0.16); }
.lang-toggle button.active { background: var(--gold-grad); color: #241c0e; }
/* Login card */
.login-card { border-top: 4px solid var(--primary); box-shadow: 0 8px 28px rgba(120, 90, 20, 0.16); }
.login-logo img { box-shadow: 0 0 0 3px #fffdf8, 0 0 0 6px var(--primary); }
.login-lang button.active { background: var(--gold-grad); color: #241c0e; }
/* Buttons */
.btn { border-radius: 12px; font-weight: 600; }
.btn.primary { background: var(--gold-grad); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 3px 10px rgba(150, 113, 26, 0.35); }
.btn.primary:active { filter: brightness(0.92); }
.btn.ghost { border-color: #ddcfa4; color: var(--ink); background: #fffdf8; }
.btn.small { border-radius: 10px; }
/* Stat cards with icon chips */
.stat { border: 1px solid #f0e4c4; padding: 14px 10px; }
.stat-ic {
  width: 42px; height: 42px; margin: 0 auto 8px; border-radius: 14px;
  background: linear-gradient(135deg, #f9edcb 0%, #f0dca6 100%);
  border: 1px solid #e7d199;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-label { font-weight: 600; }
.stat-val { color: var(--primary-dark); }
/* Cards & rows */
.item, .row-item, .form-card, .cart-summary, .empty {
  border: 1px solid #f0e4c4;
  border-radius: var(--radius);
}
/* Inputs */
input:focus, select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
/* Bottom nav — floating gold-trimmed bar */
body { padding-bottom: 96px; }
.bottomnav {
  left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: 22px; border: 1px solid #e9d9ac;
  box-shadow: 0 6px 20px rgba(120, 90, 20, 0.18);
  background: #fffdf8;
}
.bottomnav button { padding: 10px 2px 8px; }
.bottomnav button.active { color: var(--primary-dark); }
.bottomnav button.active::after {
  content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--gold-grad); margin-top: 2px;
}
/* Modals — gold grab handle */
.modal { border: 1px solid #f0e4c4; }
.modal::before {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #e8d096, #c19a2b, #e8d096); margin: 0 auto 14px;
}
/* Segmented + toggles */
.seg-btn.active { background: var(--gold-grad); border-color: var(--primary-dark); }
#btn-rep-unpaid.active { background: var(--warn); border-color: var(--warn); }
/* Badges stay, slightly warmed */
.badge.low, .badge.warn { background: #fbf0d3; color: #8a5f0b; border: 1px solid #eed9a4; }
/* Print: keep voucher readable on thermal printers */
@media print {
  .v-row.grand b, .stat-val { color: #000 !important; }
}