/* ============================================================
   Invosly Shared Styles
   一份样式,4 端复用 (website / dashboard / admin / mobile)
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&family=Sarabun:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --invosly-navy:       #1B2B5E;
  --invosly-navy-d:     #111D3F;
  --invosly-navy-l:     #2D3F7A;
  --invosly-gold:       #F0A500;
  --invosly-gold-l:     #FFC940;
  --invosly-gold-pale:  #FFF3D0;
  --invosly-gold-d:     #C88A00;
  /* Neutral */
  --invosly-white:      #FFFFFF;
  --invosly-g50:        #F8F9FC;
  --invosly-g100:       #EEF0F6;
  --invosly-g200:       #DDE1EF;
  --invosly-g300:       #C2C7D9;
  --invosly-g400:       #9BA3BB;
  --invosly-g500:       #6B7280;
  --invosly-g700:       #374151;
  --invosly-g900:       #111827;
  /* Status */
  --invosly-success:    #10B981;
  --invosly-success-bg: #D1FAE5;
  --invosly-warning:    #F59E0B;
  --invosly-warning-bg: #FEF3C7;
  --invosly-error:      #EF4444;
  --invosly-error-bg:   #FEE2E2;
  /* Fonts */
  --invosly-font-display: 'Prompt', 'Noto Sans Thai', sans-serif;
  --invosly-font-body:    'Sarabun', 'Noto Sans Thai', 'Noto Sans SC', sans-serif;
  --invosly-font-zh:      'Noto Sans SC', 'Sarabun', sans-serif;
  --invosly-font-mono:    'JetBrains Mono', 'Courier New', monospace;
  /* Radius / Shadow / Anim */
  --invosly-radius-sm:   6px;
  --invosly-radius-md:   10px;
  --invosly-radius-lg:   16px;
  --invosly-radius-full: 9999px;
  --invosly-shadow-card:    0 4px 16px rgba(27,43,94,0.08);
  --invosly-shadow-elev:    0 8px 32px rgba(27,43,94,0.14);
  --invosly-shadow-focus:   0 0 0 3px rgba(240,165,0,0.30);
  --invosly-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--invosly-font-body);
  color: var(--invosly-g900);
  background: var(--invosly-white);
  font-size: 14px;
  line-height: 1.5;
}
html[lang="zh"] body { font-family: var(--invosly-font-zh); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--invosly-g50); }
::-webkit-scrollbar-thumb { background: var(--invosly-g300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--invosly-g400); }

/* ============================================================
   LANGUAGE SELECT (dropdown)
   <div class="lang-select">         dark variant for navy bgs
   <div class="lang-select light">   light variant for white bgs
     <select>...</select>
   </div>
   ============================================================ */
.lang-select {
  position: relative;
  display: inline-block;
}
.lang-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--invosly-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 30px 7px 12px;
  border-radius: var(--invosly-radius-sm);
  cursor: pointer;
  outline: none;
  transition: all 150ms var(--invosly-ease);
  /* dark variant (default) */
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  min-width: 88px;
}
.lang-select select:hover  { background: rgba(255,255,255,0.18); }
.lang-select select:focus  { border-color: var(--invosly-gold); box-shadow: var(--invosly-shadow-focus); }
.lang-select::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid rgba(255,255,255,0.7);
  border-bottom: 1.5px solid rgba(255,255,255,0.7);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.lang-select select option {
  background: var(--invosly-white);
  color: var(--invosly-navy);
  font-family: var(--invosly-font-body);
}

/* light variant for white-background contexts (login/signup, dashboard topbar) */
.lang-select.light select {
  background: var(--invosly-g50);
  border: 1px solid var(--invosly-g200);
  color: var(--invosly-navy);
}
.lang-select.light select:hover { background: var(--invosly-white); border-color: var(--invosly-g300); }
.lang-select.light::after {
  border-right-color: var(--invosly-g500);
  border-bottom-color: var(--invosly-g500);
}

/* ---------- Buttons ---------- */
.invosly-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--invosly-radius-sm);
  border: 1.5px solid transparent;
  font-family: var(--invosly-font-body);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 150ms var(--invosly-ease);
  white-space: nowrap;
}
.invosly-btn:hover         { transform: translateY(-1px); }
.invosly-btn:active        { transform: translateY(0); }
.invosly-btn-primary       { background: var(--invosly-navy); color: #fff; border-color: var(--invosly-navy); }
.invosly-btn-primary:hover { background: var(--invosly-navy-l); border-color: var(--invosly-navy-l); }
.invosly-btn-gold          { background: var(--invosly-gold); color: #fff; border-color: var(--invosly-gold); }
.invosly-btn-gold:hover    { background: var(--invosly-gold-l); border-color: var(--invosly-gold-l); }
.invosly-btn-ghost         { background: transparent; color: var(--invosly-navy); border-color: var(--invosly-g300); }
.invosly-btn-ghost:hover   { background: var(--invosly-g50); }
.invosly-btn-ghost-light   { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.invosly-btn-ghost-light:hover { background: rgba(255,255,255,0.1); }

/* ---------- Status badges ---------- */
.invosly-badge {
  display: inline-flex; align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--invosly-radius-full);
  font-size: 12px; font-weight: 600;
}
.invosly-badge::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0;
}
.invosly-badge.paid    { background: var(--invosly-success-bg); color: #065F46; }
.invosly-badge.paid::before    { background: var(--invosly-success); }
.invosly-badge.pending { background: var(--invosly-warning-bg); color: #92400E; }
.invosly-badge.pending::before { background: var(--invosly-warning); }
.invosly-badge.overdue { background: var(--invosly-error-bg);   color: #991B1B; }
.invosly-badge.overdue::before { background: var(--invosly-error); }
.invosly-badge.draft   { background: var(--invosly-g100);       color: var(--invosly-g700); }
.invosly-badge.draft::before   { background: var(--invosly-g300); }

/* ---------- Card ---------- */
.invosly-card {
  background: var(--invosly-white);
  border-radius: var(--invosly-radius-lg);
  border: 1px solid var(--invosly-g100);
  box-shadow: var(--invosly-shadow-card);
}

/* ---------- Inputs ---------- */
.invosly-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--invosly-g200);
  border-radius: var(--invosly-radius-sm);
  font-family: var(--invosly-font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.invosly-input:focus { border-color: var(--invosly-gold); box-shadow: var(--invosly-shadow-focus); }

/* ---------- Brand mark helpers ---------- */
.invosly-brand-light {
  display: flex; align-items: center; gap: 9px;
  color: #fff;
  font-family: var(--invosly-font-display);
  font-weight: 700;
}
.invosly-brand-light img {
  border-radius: 7px;
  object-fit: cover;
}

/* ---------- Utility ---------- */
.invosly-mono     { font-family: var(--invosly-font-mono); }
.invosly-display  { font-family: var(--invosly-font-display); }
.invosly-text-navy   { color: var(--invosly-navy); }
.invosly-text-gold   { color: var(--invosly-gold); }
.invosly-text-muted  { color: var(--invosly-g500); }

/* ---------- Phone-frame helpers (mobile preview) ---------- */
.invosly-phone {
  width: 360px; height: 760px;
  background: var(--invosly-g50);
  border-radius: 42px; overflow: hidden;
  position: relative;
  box-shadow: 0 28px 70px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.invosly-phone::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: var(--invosly-navy-d);
  border-radius: 0 0 18px 18px;
  z-index: 100;
}
.invosly-phone-inner { width: 100%; height: 100%; overflow: hidden; position: relative; }

/* ---------- A4 WYSIWYG paper editor ---------- */
.invosly-paper-stage {
  background: #E5E7EB;
  padding: 28px 16px 60px;
  min-height: 100%;
  overflow-y: auto;
}
.invosly-paper {
  width: 794px; min-height: 1123px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 8px 32px rgba(27,43,94,0.18);
  position: relative;
  padding: 80px 40px 50px;
  font-family: var(--invosly-font-body);
  font-size: 13px;
  color: #000;
}
/* Zoom controller in topbar */
.invosly-zoom { display:inline-flex; align-items:center; gap:6px; }
.invosly-zoom button {
  width: 28px; height: 28px; border-radius: 6px;
  background: #fff; border: 1px solid var(--invosly-g300);
  color: var(--invosly-g500); cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.invosly-zoom button:hover { background: var(--invosly-g50); color: var(--invosly-navy); }
.invosly-zoom .zlabel { font-family: var(--invosly-font-mono); font-size: 12px; color: var(--invosly-g500); min-width: 42px; text-align: center; }
/* Inline-editable text — looks like flat text, shows a subtle outline on hover/focus */
.paper-edit {
  background: transparent;
  border: 1px solid transparent;
  padding: 1px 4px;
  margin: -1px -4px;
  border-radius: 3px;
  outline: none;
  font: inherit;
  color: inherit;
  display: inline-block;
  width: 100%;
  min-width: 1ch;
  box-sizing: border-box;
  resize: none;
}
.paper-edit:hover:not(:focus):not(:disabled) { background: rgba(27,43,94,0.05); }
.paper-edit:focus { background: #FFFDF5; border-color: var(--invosly-gold); box-shadow: 0 0 0 2px rgba(240,165,0,0.2); }
.paper-edit::placeholder { color: #C2C7D9; font-style: italic; }
/* Empty fields show a faint border so the user knows where to type */
.paper-edit:placeholder-shown:not(:focus) { border-color: var(--invosly-g200); }
/* Placeholder version (e.g. invoice no auto-gen hint) */
.paper-edit-mono { font-family: var(--invosly-font-mono); }
.paper-edit-num  { font-family: var(--invosly-font-mono); text-align: right; }
.paper-edit-center { text-align: center; }
.paper-edit-right  { text-align: right; }
/* Date input on white paper */
.paper-edit[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.4; cursor: pointer;
}
/* Inline select (WHT, copy_label) */
.paper-select {
  background: transparent; border: 1px dashed #C2C7D9;
  border-radius: 4px; padding: 0 6px; font: inherit; color: inherit;
  cursor: pointer;
}
.paper-select:hover { background: rgba(27,43,94,0.04); }
.paper-select:focus { background: #FFFDF5; border-color: var(--invosly-gold); outline: none; }

/* Buyer typeahead dropdown */
.paper-typeahead {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid var(--invosly-g200);
  box-shadow: 0 8px 24px rgba(27,43,94,0.15);
  border-radius: 6px; z-index: 50; max-height: 220px; overflow-y: auto;
  margin-top: 4px;
}
.paper-typeahead-item {
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--invosly-g100);
}
.paper-typeahead-item:last-child { border-bottom: none; }
.paper-typeahead-item:hover { background: var(--invosly-g50); }
.paper-typeahead-item .ta-name { font-weight: 600; color: #111; }
.paper-typeahead-item .ta-meta { font-size: 11px; color: var(--invosly-g500); margin-top: 2px; font-family: var(--invosly-font-mono); }

/* Items table */
.paper-items { width: 100%; border-collapse: collapse; margin-top: 14px; }
.paper-items th { background: #1B2B5E; color: #fff; padding: 9px 8px; font-size: 13px; font-weight: 700; }
.paper-items th.col-desc  { text-align: left; }
.paper-items th.col-unit  { text-align: center; width: 64px; }
.paper-items th.col-qty   { text-align: center; width: 64px; }
.paper-items th.col-amt   { text-align: right;  width: 96px; }
.paper-items th.col-tot   { text-align: right;  width: 120px; }
.paper-items th.col-x     { width: 24px; }
.paper-items td { border-bottom: 1px solid #E5E7EB; padding: 8px 8px; vertical-align: top; }
.paper-items td.col-amt, .paper-items td.col-tot { font-family: var(--invosly-font-mono); text-align: right; font-size: 14px; }
.paper-items td.col-qty  { font-family: var(--invosly-font-mono); text-align: center; font-size: 14px; }
.paper-items td.col-unit { text-align: center; font-size: 13px; }
.paper-items td.col-x button { background: transparent; border: none; color: var(--invosly-g300); cursor: pointer; font-size: 16px; }
.paper-items td.col-x button:hover { color: var(--invosly-error); }

/* Totals strip — bottom of items */
.paper-totals { display: grid; grid-template-columns: 1fr 120px 120px; }
.paper-totals .words {
  grid-column: 1 / 2; grid-row: 1 / 5;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px; font-weight: 700; color: var(--invosly-navy);
  font-style: italic; text-align: center; line-height: 1.3; font-size: 13px;
}
.paper-totals .row-label { padding: 8px 8px; font-weight: 700; font-size: 13px; border-bottom: 1px solid #E5E7EB; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.paper-totals .row-val   { padding: 8px 8px; font-family: var(--invosly-font-mono); text-align: right; font-size: 14px; border-bottom: 1px solid #E5E7EB; }
.paper-totals .total-row { background: var(--invosly-navy); color: #fff; font-size: 15px; padding: 11px 8px; }
.paper-totals .total-row.row-val { font-weight: 700; }

.invosly-phone-inner ::-webkit-scrollbar { display: none; }

/* ============================================================
   AUTH PAGES — login / signup / admin-login
   2026-05-05: frontend-auth 合并进 dashboard+sinvosly 后补的样式
   `.auth-shell`/`.auth-card` 给商家 login/signup 用（浅色渐变背景）
   `.admin-shell`/`.admin-card` 给 sinvosly admin-login 用（navy 背景）
   ============================================================ */
.auth-shell, .admin-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}
.auth-shell {
  background: linear-gradient(135deg, var(--invosly-g50) 0%, var(--invosly-g100) 100%);
}
.admin-shell {
  background: linear-gradient(135deg, var(--invosly-navy-d) 0%, var(--invosly-navy) 100%);
}

.lang-corner { position: absolute; top: 16px; right: 16px; z-index: 10; }

.auth-card, .admin-card {
  width: 100%;
  max-width: 440px;
  background: var(--invosly-white);
  border-radius: var(--invosly-radius-lg);
  padding: 40px 36px;
  box-shadow: var(--invosly-shadow-elev);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-logo { text-align: center; margin-bottom: 4px; }

.auth-title, .admin-title {
  font-family: var(--invosly-font-display);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: var(--invosly-navy);
  margin-bottom: 4px;
}
.auth-sub, .admin-sub {
  font-size: 13px;
  color: var(--invosly-g500);
  text-align: center;
  margin-top: -8px;
  margin-bottom: 8px;
}

.auth-field, .auth-row, .admin-field {
  display: flex; flex-direction: column; gap: 6px;
}
.auth-field label, .auth-row label, .admin-field label {
  font-size: 13px; font-weight: 500; color: var(--invosly-g700);
}

.admin-input {
  padding: 10px 12px;
  border: 1px solid var(--invosly-g200);
  border-radius: var(--invosly-radius-sm);
  font-size: 14px;
  background: var(--invosly-white);
  color: var(--invosly-g900);
  transition: border-color 120ms var(--invosly-ease), box-shadow 120ms var(--invosly-ease);
}
.admin-input:focus {
  outline: none;
  border-color: var(--invosly-gold);
  box-shadow: var(--invosly-shadow-focus);
}

.auth-error, .admin-error {
  background: var(--invosly-error-bg);
  color: #991B1B;
  padding: 10px 12px;
  border-radius: var(--invosly-radius-sm);
  font-size: 13px;
  border: 1px solid #FECACA;
}

.admin-btn {
  background: var(--invosly-navy);
  color: var(--invosly-white);
  padding: 12px;
  border: none;
  border-radius: var(--invosly-radius-sm);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms var(--invosly-ease);
}
.admin-btn:hover  { background: var(--invosly-navy-l); }
.admin-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.admin-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--invosly-gold-pale);
  color: var(--invosly-gold-d);
  border-radius: var(--invosly-radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.auth-foot {
  text-align: center;
  font-size: 13px;
  color: var(--invosly-g500);
  margin-top: 4px;
}
.auth-link {
  color: var(--invosly-navy);
  font-weight: 500;
  text-decoration: none;
}
.auth-link:hover { color: var(--invosly-gold); text-decoration: underline; }

.terms-note {
  font-size: 11px;
  color: var(--invosly-g400);
  text-align: center;
  line-height: 1.5;
  margin-top: -4px;
}

.back-link {
  font-size: 13px;
  color: var(--invosly-g500);
  text-decoration: none;
  transition: color 120ms var(--invosly-ease);
}
.back-link:hover { color: var(--invosly-navy); }