/* =========================================================
   PARTNERS — Unified Tax Invoice & Receipt System
   ========================================================= */
*{ box-sizing:border-box; }
body{
  margin:0; background:#e7e7e7; color:#111;
  font-family:Arial,"Noto Sans Thai",sans-serif;
}
.app{ max-width:880px; margin:auto; padding:18px; }
h1{ margin:0; font-size:25px; font-weight:900; letter-spacing:.5px; }
.sub{ color:#777; margin:4px 0 18px; font-size:13px; }

/* ---------------- CARD ---------------- */
.card{
  background:#fff; border-radius:12px; padding:18px;
  margin-bottom:18px; box-shadow:0 2px 10px #0001;
}
.section-title{
  font-size:16px; font-weight:900; margin:0 0 14px;
  padding-bottom:8px; border-bottom:1px solid #ddd;
  display:flex; justify-content:space-between; align-items:center;
}
.section-title small{ color:#888; font-weight:400; font-size:11px; }

label{ display:block; font-size:12px; color:#666; margin:9px 0 4px; }
input, textarea, select{
  width:100%; padding:10px; border:1px solid #ccc; border-radius:7px;
  font-size:14px; background:#fff; font-family:inherit; color:#111;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:#111; box-shadow:0 0 0 2px #1111;
}
textarea{ min-height:70px; resize:vertical; }

/* ---------------- GRID ---------------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-2 .full{ grid-column:1/-1; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

/* ---------------- BUTTONS ---------------- */
button{
  border:0; border-radius:8px; padding:12px 16px;
  font-weight:700; font-size:14px; cursor:pointer;
  font-family:inherit; transition:filter .15s;
}
button:hover{ filter:brightness(.95); }
button:active{ filter:brightness(.9); }
.btn-dark{ background:#111; color:#fff; }
.btn-light{ background:#eee; color:#111; }
.btn-danger{ background:#fff0f2; color:#b00020; }
.btn-full{ width:100%; }

/* =========================================================
   FORM SLIDER
   ========================================================= */
.form-header{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; margin-bottom:14px;
}
.form-title{ font-size:17px; font-weight:900; }
.form-subtitle{ color:#777; font-size:12px; line-height:1.5; margin-top:4px; }
.badge{
  flex-shrink:0; background:#111; color:#fff;
  border-radius:999px; padding:5px 10px;
  font-size:10px; font-weight:700; letter-spacing:.5px;
}
.required{ color:#d71920; }

.form-slider{
  display:flex;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  align-items:flex-start;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.form-slider::-webkit-scrollbar{ display:none; }

.form-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  min-width:0;
  padding:18px 4px 8px;
}

.slide-heading{
  font-size:13px; font-weight:900; color:#111;
  background:#f3f3f3; border-radius:999px;
  padding:6px 14px; display:inline-block;
  margin-bottom:12px;
  letter-spacing:.3px;
}
.slide-heading small{ color:#888; font-weight:400; margin-left:6px; }

.slide-actions{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:18px; padding-top:14px;
  border-top:1px dashed #eee;
}
.slide-actions button{ flex:1; min-width:110px; }

/* Form dots */
.form-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:14px;
}
.form-dots .dot{
  width:8px; height:8px; border-radius:50%;
  background:#ccc; transition:all .25s; cursor:pointer;
}
.form-dots .dot.active{ background:#111; width:24px; border-radius:99px; }

/* ---------------- PRODUCT ---------------- */
.product{
  border:1px solid #e2e2e2; padding:12px; border-radius:10px;
  margin-bottom:10px; background:#fafafa;
}
.product-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.product-head b{ font-size:14px; }
.picker-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:8px; margin-bottom:6px;
}
.product-grid{
  display:grid; grid-template-columns:1fr 80px 110px;
  gap:8px; margin-top:8px;
}
.remove{ background:#eee; border-radius:5px; padding:5px 10px; font-size:12px; }

/* ---------------- PAYMENT METHODS ---------------- */
.pay-methods{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-bottom:14px;
}
.pay-btn{
  background:#f2f2f2; color:#555;
  border:2px solid transparent;
  padding:14px 8px; font-size:13px; font-weight:700;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border-radius:10px; transition:all .2s;
}
.pay-btn .ico{ font-size:20px; line-height:1; }
.pay-btn:hover{ background:#ececec; }
.pay-btn.active{
  background:#111; color:#fff; border-color:#111;
}
.pay-detail{
  background:#fafafa; border:1px solid #eee;
  border-radius:10px; padding:12px; margin-bottom:10px;
}
.pay-detail[hidden]{ display:none; }

/* ---------------- RECORDS SLIDER ---------------- */
.records-header{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap;
}
.records-counter{
  font-size:12px; color:#666; font-weight:700;
  background:#f2f2f2; border-radius:999px; padding:4px 12px;
}

.records-slider{
  display:flex; gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:8px 2px 14px;
  scrollbar-width:none;
  align-items:flex-start;
}
.records-slider::-webkit-scrollbar{ display:none; }

.record-card{
  flex:0 0 100%;
  scroll-snap-align:start;
  min-width:0;
  border:1px solid #ddd; border-radius:12px;
  padding:14px; background:#fafafa;
}
.record-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:10px;
}
.record-name{ font-weight:900; font-size:14px; }
.record-store{ color:#777; font-size:11px; margin-top:3px; }
.record-sn{
  background:#111; color:#fff; padding:5px 8px;
  border-radius:5px; font-size:10px; font-weight:700;
  word-break:break-all; max-width:130px;
}
.record-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:7px; margin-top:10px;
}
.info-box{
  background:#fff; border:1px solid #e5e5e5;
  border-radius:6px; padding:8px; min-width:0;
}
.info-box span{ display:block; color:#888; font-size:9px; margin-bottom:3px; }
.info-box b{ font-size:11px; word-break:break-word; }
.record-buttons{
  display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;
}
.record-buttons button{ padding:8px 11px; font-size:11px; flex:1; min-width:80px; }

.records-nav{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:6px;
}
.records-nav button{
  background:#eee; padding:8px 16px; font-size:13px;
  flex:0 0 auto;
}
.records-nav button:disabled{ opacity:.4; cursor:not-allowed; }

.records-dots{
  display:flex; justify-content:center; gap:6px; flex:1;
  overflow:hidden; flex-wrap:wrap;
}
.records-dots .dot{
  width:6px; height:6px; border-radius:50%;
  background:#ccc; transition:all .2s; cursor:pointer;
}
.records-dots .dot.active{ background:#111; transform:scale(1.4); }

.empty{
  padding:30px 10px; text-align:center;
  color:#888; font-size:13px;
}

/* =========================================================
   PREVIEW
   ========================================================= */
.preview-section{ margin-top:22px; }
.preview-title{ font-size:18px; font-weight:900; margin:0 0 6px; }
.preview-note{ color:#777; font-size:12px; margin-bottom:12px; }

.preview-slider{
  display:flex; gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 4px 14px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.preview-slider::-webkit-scrollbar{ height:6px; }
.preview-slider::-webkit-scrollbar-thumb{ background:#bbb; border-radius:6px; }

.preview-slide{
  flex:0 0 100%; scroll-snap-align:center;
  min-width:0; display:flex; flex-direction:column; align-items:center;
}
.slide-label{
  font-size:12px; font-weight:700; color:#555;
  background:#f2f2f2; border-radius:999px;
  padding:5px 14px; margin-bottom:12px; white-space:nowrap;
}
.slide-body{
  width:100%; display:flex; justify-content:center; overflow:hidden;
}
.slide-dots{
  display:flex; justify-content:center; gap:8px; margin-top:8px;
}
.slide-dots .dot{
  width:8px; height:8px; border-radius:50%;
  background:#ccc; transition:all .2s;
}
.slide-dots .dot.active{ background:#111; width:22px; border-radius:99px; }
.slide-nav{ display:flex; justify-content:center; gap:10px; margin-top:8px; }
.slide-nav button{ background:#eee; padding:8px 14px; font-size:13px; }

/* =========================================================
   A4 — TAX INVOICE
   ========================================================= */
.a4-wrap{ display:block; overflow:hidden; }
#a4Receipt{
  width:210mm; min-height:297mm;
  padding:14mm 15mm; background:#fff; color:#111;
  box-shadow:0 2px 15px #0002;
  font-family:Arial,"Noto Sans Thai",sans-serif;
  font-size:11px; line-height:1.45; flex-shrink:0;
}
.ti-page{ text-align:right; font-size:10px; color:#666; margin-bottom:12px; }

/* ---------- HEADER (FIXED) ---------- */
.ti-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  padding-bottom:14px;
  border-bottom:1px solid #ddd;
}
.ti-company{ flex:1 1 auto; min-width:0; }
.ti-doc{ flex:0 0 auto; text-align:right; min-width:230px; }

.ti-company-en{
  font-size:19px; font-weight:900; letter-spacing:.3px; line-height:1.2;
}
.ti-company-th{ font-size:12.5px; font-weight:900; margin-top:4px; }
.ti-company-addr{
  font-size:10.5px; color:#333; margin-top:8px; line-height:1.6;
}
.ti-company-line{ font-size:10.5px; color:#333; margin-top:3px; }
.ti-company-line b{ color:#111; }

.ti-doc-en{
  font-size:19px; font-weight:900; line-height:1.15;
  letter-spacing:.5px; text-align:right;
}
.ti-doc-th{ font-size:13px; font-weight:900; margin-top:6px; text-align:right; }
.ti-doc-copy{ font-size:10.5px; color:#555; margin-top:4px; text-align:right; }
.ti-doc-meta{
  margin-top:20px; display:flex; flex-direction:column; gap:6px;
}
.ti-meta-row{
  display:grid; grid-template-columns:auto auto;
  gap:14px; align-items:baseline;
  font-size:11px; justify-content:end;
}
.ti-meta-row span{ color:#666; text-align:right; }
.ti-meta-row b{ font-weight:900; color:#111; text-align:right; min-width:110px; }

/* ---------- CUSTOMER BOX ---------- */
.ti-customer{
  background:#f5f5f5; border-radius:4px;
  padding:14px 16px; margin-top:16px; font-size:11px;
}
.ti-cust-row{
  display:grid; grid-template-columns:130px 1fr;
  gap:14px; align-items:baseline; padding:3px 0;
}
.ti-cust-bottom{
  grid-template-columns:1fr auto; margin-top:2px;
}
.ti-cust-label{ font-weight:900; color:#111; }
.ti-cust-value{
  font-weight:900; color:#111; font-size:11.5px;
  word-break:break-word;
}

/* ---------- ITEMS TABLE ---------- */
.ti-table{
  width:100%; border-collapse:collapse; margin-top:18px; font-size:11px;
}
.ti-table thead th{
  background:#f0f0f0; color:#111; font-weight:900;
  padding:9px 8px; text-align:left;
  border-top:1px solid #ddd; border-bottom:1px solid #ddd;
  font-size:10.5px; letter-spacing:.2px;
}
.ti-table .col-qty{ width:44px; text-align:center; }
.ti-table .col-price{ width:90px; text-align:right; }
.ti-table .col-amount{ width:98px; text-align:right; }
.ti-table thead th.col-qty,
.ti-table thead th.col-price,
.ti-table thead th.col-amount{ text-align:right; }
.ti-table tbody td{
  padding:12px 8px; border-bottom:1px solid #e5e5e5; vertical-align:top;
}
.ti-table tbody td:nth-child(4){ text-align:center; }
.ti-table tbody td:nth-child(5),
.ti-table tbody td:nth-child(6){ text-align:right; }
.ti-item-name{ font-weight:700; font-size:11.5px; }
.ti-item-sub{ font-size:10px; color:#555; margin-top:3px; line-height:1.5; }
.ti-item-sub b{ color:#333; font-weight:700; }
.ti-item-code{ font-size:10.5px; color:#111; word-break:break-all; }

/* ---------- PAYMENT ---------- */
.ti-pay{ margin-top:18px; padding-top:14px; border-top:1px solid #ddd; }
.ti-pay-title{
  font-size:12px; font-weight:900;
  letter-spacing:.4px; margin-bottom:10px;
}
.ti-pay-grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:40px;
}
.ti-pay-col{ display:flex; flex-direction:column; gap:4px; }
.ti-pay-row{
  display:grid; grid-template-columns:1fr auto;
  gap:14px; align-items:baseline;
  padding:3px 0; font-size:11px;
}
.ti-pay-row span{ color:#333; }
.ti-pay-row b{ font-weight:900; color:#111; text-align:right; }
.ti-pay-row .ti-pay-date{ font-size:10px; color:#666; font-weight:400; }
.ti-pay-left .ti-pay-row{ grid-template-columns:auto 1fr; }
.ti-pay-left .ti-pay-row b{ justify-self:end; }
.ti-pay-right .ti-pay-row{ grid-template-columns:1fr auto; }
.ti-pay-right .ti-pay-row span{ text-align:right; }
.ti-pay-net{
  border-top:1px solid #ddd; margin-top:4px; padding-top:8px; font-size:13px;
}
.ti-pay-net b{ font-size:13.5px; }

/* ---------- REMARKS + THAI ---------- */
.ti-remarks-section{
  margin-top:22px;
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:24px; align-items:start;
}
.ti-remarks-title{
  font-size:11.5px; font-weight:900;
  letter-spacing:.3px; margin-bottom:6px;
}
.ti-remarks-body{
  font-size:10.5px; color:#333; line-height:1.7; white-space:pre-wrap;
}
.ti-amount-th{
  background:#f5f5f5; border-radius:4px;
  padding:14px 16px; text-align:center;
  font-size:12.5px; font-weight:900; color:#111;
  align-self:start;
}

/* ---------- SIGNATURES ---------- */
.ti-signatures{
  margin-top:70px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:100px; padding-top:20px;
}
.ti-sig{
  border-top:1px solid #333; height:1px; position:relative;
}
.ti-sig::before{
  content:attr(data-label);
  position:absolute; top:6px; left:0;
  font-size:10px; color:#666;
}

/* =========================================================
   58MM
   ========================================================= */
#smallReceipt{
  width:58mm; padding:4mm 3mm 5mm;
  background:#fff; color:#111;
  font-family:Arial,"Noto Sans Thai",sans-serif;
  flex-shrink:0; box-shadow:0 2px 15px #0002;
}
.shop{ text-align:center; font-size:16px; font-weight:900; letter-spacing:.5px; }
.shop-sub{ text-align:center; color:#666; font-size:8px; margin-top:2px; }
.receipt-title{ text-align:center; font-size:13px; font-weight:900; margin-top:10px; }
.receipt-en{ text-align:center; font-size:8px; color:#666; letter-spacing:1px; }
.meta{ margin-top:9px; font-size:9px; line-height:1.6; }
.line{ border-top:1px dashed #777; margin:8px 0; }
.items{ width:100%; font-size:9px; border-collapse:collapse; }
.items th{ font-weight:700; border-bottom:1px solid #111; padding-bottom:4px; }
.items td{ padding:5px 0; vertical-align:top; }
.items .name{ width:55%; }
.items .qty{ width:15%; text-align:center; }
.items .price{ width:30%; text-align:right; }
.item-desc{ font-size:7px; color:#777; line-height:1.3; margin-top:2px; }
.summary{ font-size:9px; line-height:1.8; }
.summary-row{ display:flex; justify-content:space-between; }
.total{
  display:flex; justify-content:space-between;
  font-size:13px; font-weight:900; padding:5px 0;
}
.paid{
  margin:10px auto; text-align:center;
  border:2px solid #111; padding:5px;
  font-size:13px; font-weight:900; letter-spacing:2px;
}
.footer{
  text-align:center; font-size:8px; color:#555;
  line-height:1.6; margin-top:12px;
}

/* ---------------- SAVE ---------------- */
.save-area{ max-width:420px; margin:22px auto 30px; }
.save-btn{
  width:100%; background:#111; color:#fff;
  padding:14px; font-size:14px;
}

/* ---------------- TOAST ---------------- */
#toast{
  position:fixed; left:50%; bottom:30px;
  transform:translateX(-50%) translateY(80px);
  background:#111; color:#fff;
  padding:12px 20px; border-radius:10px;
  font-size:13px; font-weight:700;
  opacity:0; pointer-events:none;
  transition:all .3s; z-index:9999;
  box-shadow:0 4px 20px #0003;
  max-width:90vw; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------- MOBILE ---------------- */
@media (max-width:700px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .grid-2 .full{ grid-column:auto; }
  .picker-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:1fr 70px 100px; }
  .record-grid{ grid-template-columns:1fr; }
  .ti-header{ flex-direction:column; gap:14px; }
  .ti-doc{ text-align:left; min-width:0; width:100%; }
  .ti-doc-en, .ti-doc-th, .ti-doc-copy{ text-align:left; }
  .ti-meta-row{ justify-content:start; }
  .ti-meta-row span{ text-align:left; }
  .ti-meta-row b{ text-align:left; min-width:0; }
  .ti-pay-grid{ grid-template-columns:1fr; gap:14px; }
  .ti-remarks-section{ grid-template-columns:1fr; }
  .ti-signatures{ gap:40px; margin-top:40px; }
  .pay-methods{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .pay-btn{ font-size:11px; padding:10px 4px; }
  .pay-btn .ico{ font-size:16px; }
}

/* ---------------- PRINT A4 ---------------- */
@media print{
  @page{ size:A4; margin:0; }
  html, body{ background:#fff; margin:0; padding:0; }
  .app > *:not(#previewSection){ display:none !important; }
  .preview-section .slide-label,
  .preview-section .slide-dots,
  .preview-section .slide-nav,
  .save-area{ display:none !important; }
  .preview-slider{
    overflow:visible !important; display:block !important; padding:0 !important;
  }
  .preview-slide{ display:block !important; }
  .preview-slide:not(:first-child){ display:none !important; }
  .slide-body{ display:block !important; overflow:visible !important; }
  .a4-wrap{ overflow:visible !important; }
  #a4Receipt{
    box-shadow:none !important; transform:none !important; margin:0 !important;
  }
  #smallReceipt{ display:none !important; }
}