*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Tahoma,sans-serif;background:#f5f7fb;color:#172033}.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}aside{background:#101827;color:white;padding:24px 18px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;margin-bottom:32px}.logo{width:44px;height:44px;border-radius:12px;background:#ed1c24;display:grid;place-items:center;font-weight:800;font-size:20px}.brand small{display:block;color:#94a3b8;margin-top:3px}nav{display:grid;gap:8px}.nav{border:0;background:transparent;color:#cbd5e1;text-align:left;padding:12px 14px;border-radius:10px;font-size:14px;cursor:pointer}.nav.active,.nav:hover{background:#202b3e;color:#fff}.side-note{margin-top:auto;border-top:1px solid #263248;padding-top:16px;color:#94a3b8;font-size:12px}.side-note span{color:#64748b}main{padding:28px 34px;max-width:1600px;width:100%}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}h1{margin:0;font-size:26px}header p,.card p{color:#718096;margin:5px 0 0}.primary{background:#ed1c24!important;color:white!important;border-color:#ed1c24!important}button{border:1px solid #d8dee9;background:white;padding:10px 14px;border-radius:9px;cursor:pointer;color:#27364b}.view{display:none}.view.active{display:block}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.kpi,.card{background:white;border:1px solid #e6eaf0;border-radius:14px;box-shadow:0 2px 8px #1720330a}.kpi{padding:18px}.kpi span{color:#7a8798;font-size:13px}.kpi strong{display:block;font-size:28px;margin-top:8px}.card{padding:20px;margin-bottom:16px}.card-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.card h2{margin:0;font-size:18px}.card-head input{max-width:330px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;background:#f7f9fc;color:#5f6d7e;font-weight:600;padding:11px;border-bottom:1px solid #e5e9ef;white-space:nowrap}td{padding:10px 11px;border-bottom:1px solid #edf0f4;vertical-align:top}input,select,textarea{width:100%;border:1px solid #d7dde6;border-radius:8px;padding:10px 11px;background:#fff;font:inherit;color:#172033}textarea{min-height:72px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{font-size:13px;font-weight:600;color:#475569}.form-grid input,.form-grid select,.form-grid textarea{margin-top:6px;font-weight:400}.wide{grid-column:1/-1}.hidden{display:none!important}.drop{display:grid;place-items:center;border:2px dashed #d5dbe5;border-radius:12px;padding:32px;cursor:pointer}.drop input{display:none}.drop b{font-size:16px}.drop span{color:#7b8795;margin-top:6px}.master-stats{display:flex;gap:40px;margin-top:18px}.master-stats span{display:block;color:#7a8798;font-size:12px}.master-stats b{font-size:18px}.steps{display:flex;align-items:center;margin:0 0 18px}.steps span{font-size:12px;color:#94a3b8;background:#e9edf3;border-radius:20px;padding:7px 12px}.steps span.on{background:#feecee;color:#c91720;font-weight:700}.steps i{height:1px;background:#d9dfe7;flex:1}.bd-chip{background:#f2f4f8;padding:9px 12px;border-radius:8px;font-weight:700}.actions{display:flex;gap:8px}.picker{border:1px solid #e0e5ec;border-radius:10px;padding:12px;margin-bottom:15px;background:#fafbfc}.pick{padding:9px;border-bottom:1px solid #eee;cursor:pointer}.pick:hover{background:#fff}.items input{min-width:90px;padding:7px}.items textarea{min-width:160px;min-height:45px;padding:7px}.photo-label{display:inline-block;padding:7px 9px;background:#f1f5f9;border-radius:7px;cursor:pointer;white-space:nowrap}.photo-label input{display:none}.thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;margin-right:4px}.empty{text-align:center;color:#94a3b8;padding:28px}.bottom-actions{display:flex;justify-content:flex-end;gap:10px;margin:18px 0 50px}.status{display:inline-block;border-radius:20px;padding:5px 9px;background:#fff3cd;color:#7a5b00;font-size:12px}.status.draft{background:#eef2f7;color:#526173}@media(max-width:900px){.app{grid-template-columns:1fr}aside{display:none}main{padding:18px}.kpis{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}}#toast{position:fixed;right:22px;bottom:22px;background:#111827;color:#fff;padding:12px 16px;border-radius:10px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}
.master-hint{margin-top:14px;padding:10px 12px;background:#f7f9fc;border-radius:8px;color:#526173;font-size:12px}

.excel-bar{display:flex;gap:30px;padding:10px 12px;background:#eef3f8;border:1px solid #d7dee8;border-bottom:0;font-size:13px;font-weight:600}
.excel-sheet{border:1px solid #d7dee8;max-height:62vh}
.excel-sheet table{min-width:2600px;background:white}
.excel-sheet th{position:sticky;top:0;z-index:2;background:#d9eaf7;color:#172033;text-align:center;border:1px solid #b8c5d1}
.excel-sheet td{border:1px solid #d5dbe3;text-align:center;min-width:85px;height:64px;background:#fff}
.excel-sheet td.left{text-align:left;min-width:220px}
.hist-thumb{display:block;width:64px;height:54px;object-fit:contain;margin:auto}

.brand{align-items:flex-start}
.brand>div:last-child{min-width:0;line-height:1.35}
.brand b{display:block;font-size:14px;white-space:normal}
.brand small{font-size:11px;line-height:1.45;white-space:normal}
.import-result{margin-top:14px;padding:14px;border-radius:10px;background:#f4f7fb;border:1px solid #dce3ec;line-height:1.6}.diff-ok{padding:14px;border-radius:10px;background:#eef9f1;color:#216e39}.diff-warn{padding:14px;border-radius:10px;background:#fff8e6;color:#765600}.diff-warn ul{margin:8px 0 0;padding-left:22px}.gp-table{min-width:1250px}.gp-table td.left{min-width:260px}.gp-table input{min-width:110px}.gp-table td:nth-child(n+4){text-align:right}

.gp-table th small,.quote-paper th small{display:block;font-weight:400;color:#7b8795;margin-top:3px}.gp-table th{vertical-align:bottom}.quote-paper{border:1px solid #dfe4ea;background:#fff;padding:28px;max-width:1000px;margin:auto}.quote-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #ed1c24;padding-bottom:16px;margin-bottom:16px}.quote-head>div:first-child{display:flex;align-items:center;gap:12px}.quote-logo{width:48px;height:48px;border-radius:10px;background:#ed1c24;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:800}.quote-title{text-align:right;font-size:24px;font-weight:800}.quote-title small{font-size:12px;color:#718096}.quote-info{display:grid;gap:6px;font-size:13px;margin-bottom:18px}.quote-paper table th{text-align:center}.quote-paper table td:nth-child(1),.quote-paper table td:nth-child(3),.quote-paper table td:nth-child(4),.quote-paper table td:nth-child(5){text-align:right}.quote-bottom{display:grid;grid-template-columns:1fr 360px;gap:30px;margin-top:18px}.quote-totals>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #edf0f4}.quote-totals .grand{font-size:17px;border-top:2px solid #172033;border-bottom:0;margin-top:4px;padding-top:10px}.quote-note{margin-top:18px;padding:14px;background:#f7f9fc;border-radius:9px;line-height:1.7;font-size:13px}@media(max-width:900px){.quote-bottom{grid-template-columns:1fr}}

/* V2.3 exact-form quotation preview */
#quoteDocumentPreview{overflow:auto;background:#eef1f5;padding:18px}
.doc-sheet{width:900px;min-height:1120px;margin:0 auto;background:#fff;padding:28px 34px;color:#111;font-family:Tahoma,"Noto Sans Thai",sans-serif;font-size:13px;box-shadow:0 1px 5px #0002}
.doc-company{width:520px;border:2px solid #111;display:flex;align-items:center;padding:14px 18px;gap:20px;line-height:1.75;font-weight:600}
.doc-logo{width:88px;height:98px;background:#ed1c24;color:#fff;font-size:34px;font-weight:900;display:flex;align-items:center;justify-content:center;border-radius:2px;flex:none}
.doc-title-line{margin-top:28px;border-top:3px solid #6f6f91;position:relative;height:28px}.doc-title-tab{position:absolute;right:0;top:-34px;border:3px solid #6f6f91;border-bottom:0;padding:8px 35px;background:#fff;font-size:16px;font-weight:700}
.doc-customer-tab{margin-top:8px;border-bottom:2px solid #111;width:420px;padding:0 0 5px 30px;font-weight:700}.doc-customer-tab:before{content:"ลูกค้า";margin-left:-30px;margin-right:30px}
.doc-cust-grid{display:grid;grid-template-columns:90px 1fr 160px;margin-top:22px;row-gap:8px;line-height:1.5}.doc-dots{border-bottom:1px dotted #bbb;padding-bottom:4px}.doc-date{text-align:center;border-bottom:1px dotted #bbb}
.doc-items{width:100%;border-collapse:collapse;margin-top:30px;table-layout:fixed}.doc-items th,.doc-items td{border:1px dotted #777;padding:6px;vertical-align:top}.doc-items th{height:26px;text-align:center}.doc-items .no{width:70px;text-align:center}.doc-items .qty{width:90px;text-align:right}.doc-items .price{width:100px;text-align:right}.doc-items .total{width:130px;text-align:right;background:#ffffc9;font-weight:700}.doc-items tbody td{height:34px}.doc-bodyspace{min-height:410px;padding:20px 8px!important}.doc-detail{margin-top:150px;line-height:2;font-weight:600}.doc-note{margin-top:120px;line-height:1.8;font-size:11px}.doc-sum{margin-left:auto;width:360px;border-collapse:collapse}.doc-sum td{padding:7px}.doc-sum td:first-child{text-align:right;font-weight:700}.doc-sum td:last-child{width:130px;text-align:right;background:#ffff8c;border:1px solid #555;font-weight:700}.doc-payline{display:flex;justify-content:space-between;margin-top:14px}.doc-paybox{border-bottom:2px solid #111;width:310px;padding:5px 8px;font-weight:700}.doc-signarea{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;margin-top:15px}.doc-approvals{line-height:1.9}.doc-customer-sign{background:#ffff8c;border:1px dotted #777;height:135px;text-align:center;padding-top:8px}
.credit-sheet .doc-title-line{border-color:#172b4d}.credit-sheet .doc-title-tab{border-color:#172b4d}
.credit-sheet .credit-head{display:flex;justify-content:space-between;margin-top:18px}.credit-sheet .credit-label{font-weight:700;font-size:17px}
.credit-sheet .doc-detail{margin-top:80px}.credit-sheet .doc-note{margin-top:60px}
@media(max-width:1000px){#quoteDocumentPreview{padding:8px}.doc-sheet{transform-origin:top left}}

.official-company{width:690px;min-height:145px;padding:12px 22px;gap:24px;box-sizing:border-box;align-items:center}
.official-logo{width:105px;height:auto;object-fit:contain;flex:none}
.official-company-text{font-size:16px;line-height:1.35;font-weight:500}
.official-company-text b{font-weight:800}

.settings-list{margin-top:18px;border-top:1px solid #e5e7eb}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px solid #e5e7eb}
.setting-row small{display:block;color:#6b7280;margin-top:3px}
.settings-grid{margin-bottom:12px}

/* V2.8 GP workspace */
.gp-head{padding-bottom:4px}
.gp-guide{display:flex;align-items:stretch;gap:8px;margin:14px 0 12px;overflow:auto}
.gp-step{min-width:185px;flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #dbe5f0;border-radius:14px;background:#f8fbff}
.gp-step>b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e7f0fb;color:#24568f}
.gp-step span{display:flex;flex-direction:column;gap:2px}.gp-step small{color:#6b7280}.gp-step.final{background:#f0faf4;border-color:#bfe3cb}.gp-step.final>b{background:#d8f1e1;color:#257044}
.gp-arrow{display:grid;place-items:center;font-size:22px;color:#8da0b4}
.gp-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;border:1px dashed #b8c9dc;border-radius:12px;background:#fbfdff}
.gp-presets span{font-weight:700;margin-right:4px}.gp-presets button,.row-gp-buttons button{border:1px solid #b7cbe0;background:white;color:#315b84;border-radius:9px;padding:7px 12px;font-weight:700;cursor:pointer}
.gp-presets button:hover,.row-gp-buttons button:hover{background:#edf5fc}.gp-presets .recommended{background:#eaf4ff;border-color:#7fb2df}
.gp-input-box,.final-price-box{display:flex;align-items:center;border:2px solid #c8d9e8;border-radius:10px;background:white;overflow:hidden;min-width:105px}
.gp-input-box input,.final-price-box input{border:0!important;outline:0;width:82px;text-align:right;padding:9px 6px;background:transparent}
.gp-input-box span,.final-price-box span{padding:0 7px;color:#6b7280;font-weight:700}
.row-gp-buttons{display:flex;gap:4px;justify-content:center;margin-top:5px}.row-gp-buttons button{padding:3px 7px;font-size:11px}
.gp-table td.suggested-price{background:#fff7db;font-weight:800;color:#7a5a00;font-size:14px}
.gp-table td.actual-gp{background:#edf8f0;font-weight:800;color:#267342}
#confirmPricing{font-size:15px;padding:11px 18px;border-radius:10px}

.shared-status{position:fixed;right:16px;bottom:14px;z-index:9999;background:#edf8f0;border:1px solid #b7dfc3;color:#23633a;padding:8px 12px;border-radius:12px;font-size:12px;box-shadow:0 4px 18px #0001}
.shared-status.offline{background:#fff2f2;border-color:#efc2c2;color:#a33}

/* Official 24 Shopping sidebar logo */
.official-sidebar-logo{
  width:40px;
  height:40px;
  object-fit:contain;
  flex:0 0 40px;
  display:block;
}

.recover-note{display:inline-block;margin-top:6px;color:#237a45;font-weight:700}

.data-flow-guide{background:#f8fafc;border:1px solid #d9e2ec;border-radius:14px;padding:14px 16px;margin:0 0 18px}
.flow-guide-title{font-weight:800;margin-bottom:9px;color:#172b4d}
.flow-guide-row{display:flex;align-items:flex-start;gap:9px;margin:6px 0;font-size:13px;line-height:1.45}
.flow-pill,.field-dest{display:inline-flex;align-items:center;border-radius:999px;font-weight:700;white-space:nowrap}
.flow-pill{min-width:105px;justify-content:center;padding:4px 9px;font-size:11px}
.field-dest{padding:2px 7px;margin-left:5px;font-size:10px;vertical-align:middle}
.flow-pill.both,.field-dest.both{background:#ebe7ff;color:#5845a7}
.flow-pill.purchasing,.field-dest.purchasing{background:#fff0df;color:#965415}
.flow-pill.quotation,.field-dest.quotation{background:#e4f6eb;color:#267249}
@media(max-width:760px){.flow-guide-row{display:block}.flow-pill{margin-bottom:4px}}

/* V3.4 Sales-friendly UI: cheerful, fast to scan, still professional */
:root{
  --sales-purple:#7657d6;
  --sales-pink:#f28bb5;
  --sales-blue:#69aee8;
  --sales-green:#64bf91;
  --sales-orange:#f1aa62;
  --sales-yellow:#fff4bf;
  --sales-ink:#25334a;
  --sales-soft:#f7f8fc;
}
body{background:linear-gradient(135deg,#f8f7ff 0%,#fffafd 45%,#f7fbff 100%);color:var(--sales-ink)}
.main,.content{background:transparent}
.card{border:1px solid #e8e7f1;border-radius:18px;box-shadow:0 5px 20px rgba(53,63,93,.06);overflow:hidden}
.card-head{background:linear-gradient(90deg,#faf8ff,#fff);border-bottom:1px solid #eeeaf7}
.card-head h2{color:#35405a}
input,select,textarea{border-radius:11px!important;border-color:#dfe3ec!important;transition:.15s ease}
input:focus,select:focus,textarea:focus{border-color:#8c73dc!important;box-shadow:0 0 0 3px rgba(118,87,214,.10)!important}
button,.btn{border-radius:11px;transition:.15s ease}
button:hover,.btn:hover{transform:translateY(-1px)}
.primary,.btn-primary{background:linear-gradient(135deg,#6f57d2,#8b6fe1)!important;box-shadow:0 5px 12px rgba(111,87,210,.18)}
.data-flow-guide{background:linear-gradient(135deg,#fbf8ff,#fffafd);border-color:#e5dcfa;box-shadow:inset 4px 0 0 #8a70dd}
.flow-guide-title:before{content:"✨ ";font-size:15px}
.flow-guide-row{padding:3px 0}
.flow-pill,.field-dest{box-shadow:0 2px 5px rgba(40,50,80,.05)}
.flow-pill.both,.field-dest.both{background:#eee8ff;color:#644bb8}
.flow-pill.purchasing,.field-dest.purchasing{background:#fff0df;color:#9b5a1b}
.flow-pill.quotation,.field-dest.quotation{background:#e3f6ec;color:#26734b}
.gp-steps{border-radius:16px!important;background:linear-gradient(90deg,#faf7ff,#f7fbff)!important}
.gp-step{border-radius:13px!important}
.gp-suggest,.suggested-price{background:#fff6c9!important;border-radius:10px}
.gp-actual,.actual-gp{background:#e4f7ed!important;border-radius:10px}
[data-gp-all],.gp-quick button{border-radius:999px!important;font-weight:800!important}
table{border-radius:12px;overflow:hidden}
thead th{background:#f2effc!important;color:#3c4260!important}
tbody tr:hover{background:#fcfbff!important}
.shared-status{border-radius:999px!important;box-shadow:0 4px 14px rgba(40,50,80,.10)!important}
.nav-item,.sidebar a{border-radius:11px}
.nav-item:hover,.sidebar a:hover{background:rgba(255,255,255,.08)}
/* small visual destination icons */
.field-dest.both:before{content:"↔ ";font-weight:900}
.field-dest.purchasing:before{content:"🛒 ";font-size:9px}
.field-dest.quotation:before{content:"🧾 ";font-size:9px}

.flow-pill.history,.field-dest.history{background:#eaf0f7;color:#52657a}
.field-dest.history:before{content:"🗂️ ";font-size:9px}

/* V3.5.3 photo remove */
.photo-wrap{position:relative;display:inline-block;margin:2px 6px 2px 0}.photo-remove{position:absolute;right:-5px;top:-7px;width:20px;height:20px;border:0;border-radius:50%;background:#fff;color:#d92d20;box-shadow:0 1px 5px #0003;cursor:pointer;font-weight:800;line-height:18px;padding:0}.photo-remove:hover{background:#fee4e2}.photo-thumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px}

.setting-card{background:#fff;border:1px solid #e8e4f5;border-radius:18px;padding:18px;margin:16px 0}.bank-admin{margin:16px 0;padding:14px;background:#faf8ff;border-radius:14px}.bank-row{display:grid;grid-template-columns:1.1fr 1.6fr 1fr 1.4fr 36px;gap:8px;margin:8px 0}.bank-row input{min-width:0}.mini-danger{border:0;border-radius:10px;background:#fee4e2;color:#b42318;font-weight:800;cursor:pointer}@media(max-width:900px){.bank-row{grid-template-columns:1fr 1fr}.mini-danger{height:38px}}

.gp-table .total-inc-vat{font-weight:800;background:#fff7d6}.gp-table tfoot .gp-total-row td{border-top:2px solid #8b5cf6;background:#f7f3ff;font-weight:800;padding:14px 8px}.gp-table tfoot .total-label{text-align:right;color:#5b21b6}.gp-table tfoot .total-inc-vat{background:#fff0b3;color:#7a4b00}

/* V3.6.3 pricing */
.gp-table .profit-inc{font-weight:800;background:#eaf8ef;color:#087443}.gp-table tfoot .profit-inc{background:#d9f4e4;color:#05603a}.bottom-actions button{position:relative;z-index:5;pointer-events:auto;cursor:pointer}

/* V3.7 quotation export selector */
.quote-export-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.quote-export-actions select{height:40px;border:1px solid #cfc6f8;border-radius:10px;padding:0 34px 0 12px;background:#fff;color:#352b52;font-weight:700}

/* V3.8 - Reference quotation layout based on NHK sample */
#quoteDocumentPreview{background:#e9edf2;padding:20px;overflow:auto}
.ref-quote{box-sizing:border-box;width:794px;min-height:1123px;padding:42px 36px 34px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0002;font-family:Tahoma,"Noto Sans Thai",sans-serif;font-size:12px;color:#111;position:relative}
.ref-quote .doc-company{width:430px;height:112px;box-sizing:border-box;border:2px solid #111;padding:10px 14px;gap:13px;line-height:1.32;font-size:10px;font-weight:400}
.ref-quote .official-logo{width:60px;height:auto;max-height:82px;object-fit:contain;flex:none}
.ref-quote .official-company-text b{font-size:10px}.ref-quote-title{font-size:14px;font-weight:700;text-align:right;margin-top:6px;margin-right:2px;height:26px}
.ref-customer{position:relative;margin-top:0;padding-right:160px}.ref-field{display:grid;grid-template-columns:58px 1fr;align-items:end;min-height:26px}.ref-field b{font-size:12px}.ref-field span{border-bottom:1px solid #111;padding:0 3px 3px;min-height:18px}.ref-date-label{position:absolute;right:0;top:0;width:145px;display:grid;grid-template-columns:70px 1fr;align-items:end}.ref-date-label span{border-bottom:1px solid #111;text-align:center;padding-bottom:3px}.ref-items{margin-top:10px;border-collapse:collapse;table-layout:fixed;width:100%}.ref-items th,.ref-items td{border:1px solid #111;padding:4px 5px}.ref-items th{height:26px;background:#ddd;font-weight:700;text-align:center;vertical-align:middle}.ref-items .no{width:52px;text-align:center}.ref-items .item-desc{position:relative}.ref-items .price{width:82px;text-align:right}.ref-items .qty{width:88px;text-align:center}.ref-items .total{width:96px;text-align:right;background:#ffff91;font-weight:700}.ref-items .quote-item-row td{height:30px}.quote-product-photo{display:block;max-width:115px;max-height:145px;object-fit:contain;margin:30px auto 0}.ref-items .ref-body-row td{height:390px}.ref-items .doc-bodyspace{position:relative;height:390px;padding:0 6px!important}.ref-items .doc-detail{position:absolute;left:6px;top:155px;margin:0;line-height:1.65;font-weight:400}.ref-items .doc-note{position:absolute;left:6px;bottom:18px;margin:0;line-height:1.65;font-size:10px}.ref-bottom{display:grid;grid-template-columns:1fr 330px;gap:35px;margin-top:0}.ref-left-bottom{padding-top:44px}.ref-payline{display:grid;grid-template-columns:62px 1fr;align-items:end;width:280px;margin-bottom:25px}.ref-payline span{border-bottom:1px solid #111;padding:0 4px 3px}.ref-people{border-collapse:collapse;width:290px;font-size:11px}.ref-people td{padding:3px 2px}.ref-people td:first-child{width:88px}.ref-people td:last-child{border-bottom:1px solid #111}.ref-right-bottom{margin-top:0}.ref-quote .doc-sum{width:245px;margin-left:auto;border-collapse:collapse}.ref-quote .doc-sum td{padding:4px 6px}.ref-quote .doc-sum td:first-child{text-align:right;font-weight:700}.ref-quote .doc-sum td:last-child{width:92px;text-align:right;background:#ffff91;border:1px solid #111;font-weight:700}.ref-sign-title{text-align:center;font-size:10px;margin-top:8px}.ref-quote .doc-customer-sign{height:88px;background:#ffff91;border:1px solid #111;margin-top:4px;padding:0}
@media(max-width:850px){.ref-quote{transform-origin:top left}}

/* ===== V3.9 Bright Sales-Friendly Website UI ===== */
:root{--pink:#ff3f7f;--purple:#7c4dff;--blue:#2589ff;--cyan:#19b9d1;--green:#20b77a;--yellow:#ffca3a;--ink:#24304a;--soft:#f7f5ff}
body{background:linear-gradient(135deg,#fff8fb 0%,#f7f8ff 45%,#f2fbff 100%);color:var(--ink)}
aside{background:linear-gradient(180deg,#5c3df5 0%,#7c4dff 38%,#d83e8e 100%);box-shadow:8px 0 30px #6f4cf022}
.brand{padding:12px;border-radius:18px;background:#ffffff17;border:1px solid #ffffff25;margin-bottom:24px}
.brand small,.side-note{color:#f0eaff}.side-note span{color:#ffe7f3}
.nav{color:#f6efff;border:1px solid transparent;font-weight:600;transition:.18s ease}
.nav:hover{background:#ffffff1c;color:#fff;transform:translateX(3px);border-color:#ffffff24}
.nav.active{background:#fff;color:#6842e8;box-shadow:0 8px 22px #341d8b35;font-weight:800}
main{background:radial-gradient(circle at 90% 5%,#ffe4f0 0,transparent 18%),radial-gradient(circle at 75% 30%,#e5e2ff 0,transparent 22%)}
header{background:#ffffffcc;border:1px solid #fff;border-radius:20px;padding:16px 20px;box-shadow:0 8px 28px #6654a30d;backdrop-filter:blur(8px)}
h1{color:#33265e}.primary{background:linear-gradient(135deg,#ff3f7f,#7c4dff)!important;border:0!important;box-shadow:0 7px 18px #c43b9b33;font-weight:700}
button{border-color:#ded9f1;border-radius:12px;transition:.16s ease;background:#fff;color:#423a64}
button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #594b9d1c;border-color:#b9a9f6}
.kpis{gap:16px}.kpi,.card{border:1px solid #eee9ff;box-shadow:0 8px 26px #594b9d0d;border-radius:20px}
.kpi{position:relative;overflow:hidden;padding:20px}.kpi:before{content:"";position:absolute;left:0;top:0;width:6px;height:100%;background:linear-gradient(#ff4d8d,#7c4dff)}
.kpi:nth-child(2):before{background:linear-gradient(#28a5ff,#5f6cff)}.kpi:nth-child(3):before{background:linear-gradient(#20c997,#70d66b)}.kpi:nth-child(4):before{background:linear-gradient(#ffb020,#ff6b6b)}
.kpi strong{color:#44336f}.card{background:#ffffffed}.card h2{color:#43356d}
.card-head{padding-bottom:12px;border-bottom:1px solid #f0ecfa}
input,select,textarea{border:1.5px solid #ddd7f0;border-radius:12px;background:#fff;transition:.15s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:#8a6cff;box-shadow:0 0 0 4px #8a6cff17}
.drop{border-color:#b9a9f6;background:linear-gradient(135deg,#faf8ff,#f4fbff)}
.drop:hover{border-color:#7c4dff;background:#f8f5ff}
.steps span{background:#f0edf8;color:#8a80a5}.steps span.on{background:linear-gradient(135deg,#ffe4ef,#eae4ff);color:#7b3fe4;box-shadow:0 4px 12px #8a6cff18}.steps i{background:linear-gradient(90deg,#e5ddff,#ffdce9)}
.bd-chip{background:linear-gradient(135deg,#eee8ff,#ffe8f2);color:#6a3fd3;border:1px solid #dfd2ff}
.picker{background:linear-gradient(135deg,#faf8ff,#f6fbff);border-color:#e2daf8}.pick:hover{background:#f1ecff}
.photo-label{background:#ede8ff;color:#6443c5;font-weight:700}.status{font-weight:700;border:1px solid #ffe3a0}.status.draft{background:#eeeaff;color:#6a51c8;border-color:#ddd3ff}
.table-wrap{border-radius:14px;border:1px solid #eee9f8}th{background:linear-gradient(180deg,#f5f0ff,#eee9fb);color:#514276;border-bottom-color:#ddd5f1}tbody tr:hover td{background:#fbf9ff}
.bottom-actions{padding:14px;border-radius:18px;background:#ffffffd9;box-shadow:0 8px 24px #594b9d12;position:sticky;bottom:10px;z-index:10}
#toast{background:linear-gradient(135deg,#4932b8,#d63b89);box-shadow:0 8px 24px #432a8d35}
.excel-bar{background:linear-gradient(90deg,#e8f5ff,#f0eaff);border-color:#d9d0f4;color:#4b4270}.excel-sheet{border-color:#d9d0f4}.excel-sheet th{background:#e8e0ff;color:#403465;border-color:#cfc4ec}
.import-result{background:linear-gradient(135deg,#f7f3ff,#f0fbff);border-color:#ddd4f5}.diff-ok{background:#e9fbf3;color:#14714c}.diff-warn{background:#fff7df;color:#7a5800}
.gp-table th{background:linear-gradient(180deg,#eee8ff,#e6e0f8);color:#46386e}.gp-table .total-inc-vat{background:#fff4c7}.gp-table .profit-inc{background:#e3f8ec}.gp-table tfoot .gp-total-row td{background:#f1edff!important;border-top-color:#7c4dff!important}
.setting-card{border-color:#e7def9!important;background:linear-gradient(145deg,#fff,#fcf9ff)!important;box-shadow:0 8px 22px #6045a00d}.bank-admin{background:linear-gradient(135deg,#f7f3ff,#f3fbff)!important}
.field-dest,.flow-pill{border-radius:999px!important}.flow-guide{background:linear-gradient(135deg,#fff3f8,#f2efff,#effaff)!important;border-color:#eadcf7!important}
/* Keep quotation preview/document itself unchanged */
#quoteDocumentPreview,#quoteDocumentPreview *{ }

/* ===== V4.0 Quotation A4 • Cute Minimal ===== */
#quoteDocumentPreview{
  background:#f6f4f7;
  padding:24px;
  overflow:auto;
}
.ref-quote{
  box-sizing:border-box;
  width:210mm;
  min-height:297mm;
  padding:12mm 10mm 10mm;
  margin:0 auto;
  background:#fff;
  box-shadow:0 8px 28px rgba(72,55,90,.10);
  font-family:Tahoma,"Noto Sans Thai",sans-serif;
  font-size:11.5px;
  color:#35313a;
}
.ref-quote .doc-company{
  width:112mm;
  height:29mm;
  border:1.2px solid #bdb5c4;
  border-radius:8px;
  padding:8px 12px;
  background:#fffafd;
  gap:12px;
  color:#3e3942;
}
.ref-quote .official-logo{width:15mm;max-height:22mm}
.ref-quote-title{
  color:#6f6079;
  font-size:15px;
  letter-spacing:.2px;
}
.ref-field span,.ref-date-label span,.ref-people td:last-child,.ref-payline span{
  border-bottom-color:#c8c1cc;
}
.ref-items{margin-top:10px}
.ref-items th,.ref-items td{border-color:#c9c3ce}
.ref-items th{
  background:#eeeaf1 !important;
  color:#504756 !important;
  height:27px;
}
.ref-items .total{
  background:#fff4d9 !important;
  color:#5a4c32;
}
.ref-quote .doc-sum td:last-child{
  background:#fff4d9 !important;
  border-color:#c9c3ce;
}
.ref-quote .doc-sum .grand td:last-child,
.ref-quote .doc-sum tr:last-child td:last-child{
  background:#f8e8ed !important;
  color:#6d4551;
}
.ref-quote .doc-detail{
  background:#f8f5fa;
  border-left:3px solid #cdbed5;
  border-radius:7px;
  padding:8px 10px;
  max-width:94%;
}
.ref-quote .doc-note{
  color:#5f5863;
}
.ref-quote .doc-customer-sign{
  background:#fff8e7 !important;
  border-color:#c9c3ce;
  border-radius:6px;
}
.ref-sign-title{color:#5d5562}
.quote-product-photo{margin-top:24px}
@media print{
  body{background:#fff!important}
  #quoteDocumentPreview{padding:0!important;background:#fff!important}
  .ref-quote{width:210mm;min-height:297mm;box-shadow:none;margin:0}
}

/* ===== V4.0.2 Warm Minimal UI — no rainbow ===== */
:root{
 --warm-bg:#fbf7f2;--warm-card:#fffdf9;--warm-line:#eadfd5;
 --warm-ink:#4f443e;--warm-muted:#8a776c;--warm-accent:#c9795f;
 --warm-accent2:#e9b8a5;--warm-cream:#f7eadc;--warm-sage:#e8eee5;
}
body{background:var(--warm-bg)!important;color:var(--warm-ink)!important}
.sidebar{background:linear-gradient(180deg,#7a6257 0%,#9a7463 100%)!important}
.nav-item.active,.nav-item:hover{background:rgba(255,248,241,.18)!important;border-color:rgba(255,255,255,.18)!important}
button.primary,.btn.primary,#confirmPricing,#exportQuote{
 background:linear-gradient(135deg,#c9795f,#d99478)!important;border-color:#c9795f!important;color:#fff!important;
 box-shadow:0 5px 14px rgba(164,105,82,.18)!important
}
.card,.panel,.section-card{background:var(--warm-card)!important;border-color:var(--warm-line)!important}
input:focus,select:focus,textarea:focus{border-color:#d99478!important;box-shadow:0 0 0 3px rgba(217,148,120,.13)!important}
.gp-table thead th{background:#f3ebe5!important;color:#5b4c44!important}
.gp-table .suggested-price,.gp-table .total-inc-vat{background:#fff0cf!important}
.gp-table .actual-gp,.gp-table .profit-inc{background:#e9f1e7!important;color:#47634c!important}
.gp-table tfoot .gp-total-row td{background:#f4ebe5!important;border-top-color:#c9795f!important}
.gp-table tfoot .total-label{color:#8a5545!important}
.status,.badge{filter:saturate(.65)}
/* quotation: stay very close to the uploaded original; warm accents only */
#quoteDocumentPreview{background:#f3eee9!important}
.ref-quote{background:#fff!important;color:#2f2b29!important;box-shadow:0 8px 24px rgba(88,69,57,.10)!important}
.ref-quote .doc-company{background:#fff!important;border-color:#6f655f!important;border-radius:0!important}
.ref-quote-title{color:#3f3935!important}
.ref-items th{background:#efe9e4!important;color:#302b28!important}
.ref-items th,.ref-items td{border-color:#81766f!important}
.ref-items .total,.ref-quote .doc-sum td:last-child{background:#f7e8c8!important;color:#3d352f!important}
.ref-quote .doc-sum .grand td:last-child,.ref-quote .doc-sum tr:last-child td:last-child{background:#efd7c9!important;color:#4a3931!important}
.ref-quote .doc-detail{background:#fbf4ed!important;border-left:3px solid #d7aa91!important;border-radius:0!important}
.ref-quote .doc-customer-sign{background:#f8e8c9!important;border-color:#81766f!important;border-radius:0!important}
@media print{body{background:#fff!important}.sidebar,.topbar,.quote-actions{display:none!important}}

/* ===== V4.0.3 Sidebar — exact layout, soft yellow only ===== */
aside,
.sidebar{
  background:#F6E7A8 !important;
  color:#594B2F !important;
}
.brand{
  background:rgba(255,255,255,.28) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  border-radius:16px !important;
  padding:12px !important;
}
.brand b{
  color:#4E422B !important;
}
.brand small{
  color:#786A49 !important;
}
.nav{
  color:#5D5034 !important;
  font-weight:600 !important;
}
.nav:hover{
  background:rgba(255,255,255,.34) !important;
  color:#4A3E27 !important;
}
.nav.active{
  background:#FFFFFF !important;
  color:#5A4B2F !important;
  box-shadow:0 4px 12px rgba(112,91,42,.10) !important;
}
.side-note{
  border-top-color:rgba(104,86,45,.16) !important;
  color:#786A49 !important;
}
.side-note span{
  color:#8A7A55 !important;
}

/* ===== V4.0.4 Dashboard Soft Neutral — no green ===== */
#view-dashboard{
  --dash-ink:#51465c;
  --dash-muted:#8a7f8e;
  --dash-line:#eadfe6;
  --dash-cream:#fffaf3;
  --dash-lilac:#f4eff8;
  --dash-pink:#faeef1;
  --dash-peach:#f9eee7;
}
#view-dashboard .page-head,
#view-dashboard .card,
#view-dashboard .panel{
  background:#fffdfb !important;
  border-color:var(--dash-line) !important;
  box-shadow:0 7px 22px rgba(99,76,91,.06) !important;
}
#view-dashboard .kpi{
  background:#fff !important;
  border-color:#eee4ea !important;
}
#view-dashboard .kpi:nth-child(1){border-left-color:#d9b9d7 !important;background:#fffafd !important}
#view-dashboard .kpi:nth-child(2){border-left-color:#cfc4df !important;background:#fcfaff !important}
#view-dashboard .kpi:nth-child(3){border-left-color:#edc7cd !important;background:#fff9fa !important}
#view-dashboard .kpi:nth-child(4){border-left-color:#e9c6ad !important;background:#fffaf6 !important}
#view-dashboard .kpi::before{display:none!important}
#view-dashboard .kpi .n,#view-dashboard h1,#view-dashboard h2,#view-dashboard h3{color:var(--dash-ink)!important}
#view-dashboard .muted,#view-dashboard small{color:var(--dash-muted)!important}
#view-dashboard table thead th{
  background:#f4eff7 !important;
  color:#5c5064 !important;
  border-color:#e4d9e8 !important;
}
#view-dashboard table tbody tr{background:#fffdfb!important}
#view-dashboard table tbody tr:hover{background:#fff8f5!important}
#view-dashboard .status,
#view-dashboard .badge{
  background:#f8ecd2 !important;
  border-color:#ead7a9 !important;
  color:#745d32 !important;
}
#view-dashboard .btn,
#view-dashboard button{
  border-color:#e4d7e1;
}
#view-dashboard .btn.primary,
#view-dashboard button.primary,
#view-dashboard .page-head button{
  background:#d98f75 !important;
  border-color:#d98f75 !important;
  color:#fff !important;
  box-shadow:0 5px 12px rgba(173,112,89,.14)!important;
}
#view-dashboard input{
  background:#fff!important;
  border-color:#e5dce3!important;
}
#view-dashboard input:focus{
  border-color:#d9a58f!important;
  box-shadow:0 0 0 3px rgba(217,165,143,.12)!important;
}
/* hard override any old green dashboard accents */
#view-dashboard [style*="green"],
#view-dashboard [style*="#22c55e"],
#view-dashboard [style*="#10b981"]{color:#8a667a!important;border-color:#e2c7d4!important}

/* ===== V4.0.5 QUOTATION LOCK =====
   Quotation is isolated from website theme. Do not apply dashboard/sidebar colors here. */
#quoteDocumentPreview{background:#eeeeee!important}
#quoteDocumentPreview .ref-quote,
#quoteDocumentPreview .doc-sheet{
  background:#fff!important;color:#111!important;
  box-shadow:0 2px 10px rgba(0,0,0,.08)!important;
}
#quoteDocumentPreview .ref-items th,
#quoteDocumentPreview .doc-items th{background:#fff!important;color:#111!important}
#quoteDocumentPreview .ref-items .total,
#quoteDocumentPreview .doc-items .total,
#quoteDocumentPreview .doc-sum td:last-child{background:#fff6a8!important;color:#111!important}
#quoteDocumentPreview .doc-detail{background:#fff!important;border-left:0!important}
#quoteDocumentPreview .doc-company{background:#fff!important;border-color:#111!important}
#quoteDocumentPreview .doc-customer-sign{background:#fff6a8!important;border-color:#111!important}

/* ===== V4.0.7 Dashboard palette final override ===== */
#view-dashboard .kpis .kpi,
#view-dashboard .kpi{
  background:#FFFDF7!important;
  border:1px solid #EFE3C8!important;
  border-left:5px solid #E9CF87!important;
  box-shadow:0 6px 18px rgba(125,102,52,.06)!important;
}
#view-dashboard .kpis .kpi:nth-child(1){background:#FFF9E8!important;border-left-color:#E5C46D!important}
#view-dashboard .kpis .kpi:nth-child(2){background:#FFF7ED!important;border-left-color:#E8C9A9!important}
#view-dashboard .kpis .kpi:nth-child(3){background:#FFFBEF!important;border-left-color:#E3D19B!important}
#view-dashboard .kpis .kpi:nth-child(4){background:#FFF5EC!important;border-left-color:#E6B99D!important}
#view-dashboard .kpi .n{color:#5C4A2E!important}
#view-dashboard .kpi small,#view-dashboard .kpi .muted{color:#8B795C!important}
#view-dashboard table thead th{background:#F8F0DC!important;color:#5E513C!important;border-color:#E9DDBF!important}
#view-dashboard .status,#view-dashboard .badge{background:#FFF1C9!important;border-color:#E8D49A!important;color:#6F5A28!important}
#view-dashboard .page-head{background:#FFFDF8!important}
#view-dashboard .panel,#view-dashboard .card{border-color:#EEE1CA!important}
#view-dashboard .page-head button{background:#D99A76!important;border-color:#D99A76!important}

/* Toasts/alerts generated by the website must appear above content and away from Netlify badge. */
.toast,#toast,.toast-container,#toastContainer,[class*="toast"]{
  position:fixed!important;
  z-index:2147483000!important;
}
#toast,.toast{
  top:18px!important;
  right:22px!important;
  left:auto!important;
  bottom:auto!important;
  max-width:min(420px,calc(100vw - 44px))!important;
  box-shadow:0 10px 30px rgba(72,55,35,.18)!important;
}