*{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} .audit-timeline{border:1px solid #d7dee8;border-top:0;background:#fff;max-height:280px;overflow:auto;padding:4px 0} .audit-entry{display:flex;gap:12px;padding:9px 14px;border-bottom:1px solid #f0f2f6;font-size:13px} .audit-entry:last-child{border-bottom:0} .audit-entry .audit-dot{width:8px;height:8px;border-radius:50%;background:#8aa0c2;margin-top:5px;flex:none} .audit-entry .audit-body{flex:1} .audit-entry .audit-action{font-weight:700;color:#27364b} .audit-entry .audit-detail{color:#526173;margin-top:2px} .audit-entry .audit-meta{color:#94a3b8;font-size:11px;margin-top:3px} .audit-empty{padding:16px;text-align:center;color:#94a3b8;font-size:13px} /* ===== Order & Delivery Tracking (Phase 3) ===== */ .ot-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px} .ot-kpi{border:1px solid #e6eaf0;border-radius:12px;padding:12px;cursor:pointer;background:#fafbfc;transition:.15s} .ot-kpi:hover{border-color:#c7d2e0;background:#fff} .ot-kpi.active{border-color:#ed1c24;background:#fff5f5} .ot-kpi span{display:block;font-size:12px;color:#7a8798} .ot-kpi strong{display:block;font-size:22px;margin-top:4px} .ot-watchlist{display:flex;flex-direction:column;gap:8px} .ot-watch-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #eee;border-radius:10px;background:#fafbfc;font-size:13px} .ot-watch-row b{color:#27364b} .ot-watch-tag{font-size:11px;border-radius:20px;padding:3px 9px;font-weight:700} .ot-status{display:inline-block;border-radius:20px;padding:5px 10px;font-size:12px;font-weight:700;white-space:nowrap} .ot-status-รอออก-Order{background:#fff3cd;color:#7a5b00} .ot-status-ออก-Order-แล้ว{background:#dbeafe;color:#1e40af} .ot-status-รอจัดส่ง{background:#ede9fe;color:#5b21b6} .ot-status-อยู่ระหว่างจัดส่ง{background:#ffedd5;color:#9a3412} .ot-status-จัดส่งบางส่วน{background:#fef9c3;color:#854d0e} .ot-status-จัดส่งครบแล้ว{background:#dcfce7;color:#166534} .ot-status-ติดปัญหา{background:#fee2e2;color:#991b1b} .ot-status-ยกเลิก{background:#e5e7eb;color:#4b5563} .ot-drawer-bg{position:fixed;inset:0;background:#0f172acc;z-index:40} .ot-drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:#fff;z-index:41;box-shadow:-8px 0 30px #0002;overflow-y:auto} .ot-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 24px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:1} .ot-drawer-head h2{margin:0;font-size:19px} .ot-drawer-head p{margin:4px 0 0;color:#7a8798;font-size:13px} .ot-drawer-body{padding:20px 24px} .ot-drawer-body h3{margin:22px 0 10px} .ot-timeline{display:flex;flex-wrap:wrap;gap:0;align-items:center} .ot-tl-step{display:flex;flex-direction:column;align-items:center;font-size:11px;color:#94a3b8;min-width:92px;text-align:center} .ot-tl-dot{width:14px;height:14px;border-radius:50%;background:#e2e8f0;margin-bottom:6px;border:2px solid #fff;box-shadow:0 0 0 2px #e2e8f0} .ot-tl-step.done .ot-tl-dot{background:#22c55e;box-shadow:0 0 0 2px #22c55e} .ot-tl-step.done{color:#166534;font-weight:700} .ot-tl-line{flex:1;height:2px;background:#e2e8f0;min-width:20px;margin-top:-16px} .ot-tl-line.done{background:#22c55e} .ot-shipment-history{display:flex;flex-direction:column;gap:8px} .ot-shipment-row{border:1px solid #eee;border-radius:10px;padding:10px 12px;font-size:13px;background:#fafbfc} .ot-shipment-row b{color:#27364b} @media(max-width:900px){.ot-drawer{width:100%}} .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-ex-vat{font-weight:800;background:#e6f2ff}.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-ex-vat{background:#d8eaff;color:#1c4d7a}.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-ex-vat{background:#e0edff}.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 .total-ex-vat{background:#e6f0fb!important;color:#2c4a6e!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; } /* V4.0.22 workspace UI */ body{background:#f8f7fb;color:#302747}.app{grid-template-columns:254px minmax(0,1fr)}aside{background:#fff;border-right:1px solid #ede7f0;color:#302747;padding:24px 18px}.brand{padding:14px 10px;border-radius:16px;background:#fff5f7;margin-bottom:25px}.brand small{color:#786d86}.nav{color:#51465f;font-weight:600}.nav.active,.nav:hover{color:#be294f;background:#fceaf0}.master-bottom{margin-top:auto;border:1px solid #efd6e1;background:#fff7fa;color:#9b3a5a;text-align:left;width:100%}main{max-width:none;padding:28px 34px}header{padding:22px;background:#fff;border:1px solid #f0e8ee;border-radius:22px;box-shadow:0 8px 28px #47365708}h1,.card h2{color:#392e63}.primary{background:#d03560!important;border-color:#d03560!important}.kpi,.card{border-color:#eee5ef;border-radius:19px;box-shadow:0 8px 25px #4c3d670b}.kpi{border-top:4px solid #ec86b2}.kpi:nth-child(2){border-color:#b8d0fa}.kpi:nth-child(3){border-color:#a8e1d2}.kpi:nth-child(4){border-color:#f8d0af}.kpi strong{color:#41306b}.card{padding:22px}th{background:#f8f4fd;color:#554577}button{border-radius:11px;transition:background .15s,transform .15s}button:hover{transform:translateY(-1px)}input:focus,textarea:focus,select:focus{outline:2px solid #e8a8bf;outline-offset:1px}.gp-table .final-price-box{border:2px solid #ef83aa;background:#fff3f8}.gp-table .final-price-box input{font-weight:800;font-size:16px;color:#a82352}.estimate-result{margin-top:20px;padding:18px;background:#faf6fe;border-radius:14px}.estimate-badge{display:inline-block;background:#fff0c9;color:#755300;padding:6px 12px;border-radius:20px}.estimate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.estimate-grid span{background:#fff;padding:12px;border-radius:9px}.estimate-grid b{display:block;margin-top:6px}.terms-choices{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.terms-choices label{width:auto;padding:8px 12px;background:#f9f4fc;border-radius:9px}.terms-choices input,.delete-dialog input[type=checkbox],.approval-admin-row input[type=checkbox],.approval-admin-row input[type=radio]{width:auto}.approval-admin-row{display:grid;grid-template-columns:repeat(5,1fr) 85px 100px;gap:6px;margin:10px 0;align-items:center}.delete-dialog{border:0;border-radius:18px;padding:25px;max-width:450px;box-shadow:0 20px 70px #2a193d55}.delete-dialog::backdrop{background:#22192e99}.delete-dialog .actions{margin-top:20px;justify-content:flex-end}.danger{color:white;background:#c42838;border-color:#c42838}.danger:disabled{opacity:.4;cursor:not-allowed}.delete-dialog label{display:flex;align-items:center;gap:9px}.setting-row input[type=text]{min-width:200px}@media(max-width:900px){aside{display:flex;position:relative}nav{grid-template-columns:repeat(2,1fr)}.app{display:block}.brand{margin-bottom:12px}.master-bottom{margin-top:8px}.estimate-grid{grid-template-columns:repeat(2,1fr)}.approval-admin-row{grid-template-columns:1fr 1fr}} /* Keep the quotation's spreadsheet layout intact; widen only D and the unit-price column J through workbook metadata at export. */ /* V4.0.24 visible theme override. Keep quotation document styling isolated. */ body{background:#f8f6fb!important;color:#302747!important} aside{background:#fff!important;color:#302747!important;border-right:1px solid #eee4ee!important} aside .brand{background:#fff3f7!important;border:1px solid #f2dae5!important} aside .brand b{color:#492c4f!important} aside .brand small{color:#846d7a!important} aside .nav{color:#554860!important} aside .nav:hover,aside .nav.active{background:#fbe6ee!important;color:#b72856!important;box-shadow:none!important} aside .master-bottom{margin-top:auto!important;border:1px solid #f0cada!important;background:#fff7fa!important;color:#a8345a!important} main header{background:#fff!important;border:1px solid #f0e5ef!important;border-radius:20px!important;box-shadow:0 8px 26px #48355b0c!important} main header h1,#dashboard h2{color:#382968!important} #dashboard .kpi{background:#fff!important;border:1px solid #ece2f1!important;border-top:4px solid #e680bb!important;box-shadow:0 6px 23px #4e38740c!important} #dashboard .kpi:nth-child(2){border-top-color:#84aefa!important} #dashboard .kpi:nth-child(3){border-top-color:#6fcdb4!important} #dashboard .kpi:nth-child(4){border-top-color:#ffb075!important} #dashboard .kpi strong{color:#3e2d70!important} main .card{background:#fff!important;border-color:#eae2f0!important} main button.primary,#quickNew,#confirmPricing,#exportQuote{background:#cf3765!important;background-image:none!important;border-color:#cf3765!important;color:#fff!important;box-shadow:0 4px 13px #c62d5a24!important} main input:focus,main select:focus,main textarea:focus{border-color:#cf6791!important;box-shadow:0 0 0 3px #f4d8e5!important} #dashboard th{background:#f4edfc!important;color:#514278!important} .gp-table .final-price-box{border:2px solid #eb7da4!important;background:#fff1f6!important} .gp-table .final-price-box input{font-weight:800!important;font-size:16px!important;color:#a72355!important} /* The Excel/PDF quotation remains governed by the supplied template. */ /* V4.0.25 Dashboard reference and matching GP workspaces */ .app{grid-template-columns:300px minmax(0,1fr)!important} body{background:#f7f8fc!important;color:#202842!important;font-family:Tahoma,"Segoe UI",sans-serif!important} aside{padding:25px 23px!important;background:linear-gradient(90deg,#fff 75%,#f8f9fd 100%)!important;border-right:1px solid #edf0f6!important} aside .brand{background:transparent!important;border:0!important;padding:4px 4px 16px!important;gap:12px!important;margin-bottom:26px!important;align-items:flex-start!important} aside .official-sidebar-logo{width:54px!important;height:58px!important;flex:0 0 54px!important} aside .brand b{display:block;color:#141c37!important;font-size:18px!important;line-height:1.18} aside .brand small{font-size:11px!important;color:#68758e!important;line-height:1.35!important;max-width:155px} aside nav{gap:5px!important} aside .nav{display:flex!important;gap:17px!important;align-items:center!important;min-height:50px!important;padding:11px 14px!important;font-size:14px!important;color:#25304b!important;border-radius:13px!important} aside .nav svg{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} aside .nav.active,aside .nav:hover{color:#d72a48!important;background:linear-gradient(90deg,#fff0f3,#fbf1f5)!important;font-weight:700!important} aside .master-bottom{margin-top:8px!important;background:transparent!important;border:0!important;color:#25304b!important} main{max-width:none!important;padding:25px 28px!important} main header{height:136px!important;margin-bottom:22px!important;padding:26px 36px!important;position:relative!important;overflow:hidden!important;background:linear-gradient(100deg,#fff 48%,#fff5f7 72%,#fff 100%)!important;border:1px solid #f7f2f6!important;border-radius:22px!important;box-shadow:0 10px 28px #53627d0b!important} main header::before{content:"";position:absolute;right:14%;top:-48%;height:225px;width:390px;border-radius:50%;background:#ffedf1;transform:rotate(-21deg);opacity:.72} main header .header-copy{position:relative;z-index:2} main header h1{font-size:36px!important;color:#17213d!important;line-height:1.2!important} main header p{font-size:15px!important;color:#78849c!important;margin-top:7px!important} main header .banner-art{position:absolute;right:24%;bottom:-18px;width:155px;height:140px;opacity:.95} main header .banner-art svg{width:100%;height:100%} main header #quickNew{z-index:2;position:relative;border-radius:30px!important;padding:14px 24px!important;background:linear-gradient(140deg,#ff647d,#e83e65)!important;border:0!important;font-weight:700!important;white-space:nowrap!important;box-shadow:0 8px 20px #eb486444!important} main header #quickNew span{font-size:23px;font-weight:400;vertical-align:-2px;margin-right:8px} #dashboard .kpis{gap:18px!important;margin-bottom:20px!important} #dashboard .kpi{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;min-height:123px;padding:18px 19px!important;border-radius:18px!important;border:1px solid #f7dfe5!important;border-top:1px solid #f7dfe5!important;background:linear-gradient(120deg,#fff6f8,#fffafb)!important;box-shadow:0 8px 24px #4e608012!important} #dashboard .kpi::before{content:"";position:absolute;right:-14px;bottom:-63px;width:150px;height:110px;background:currentColor;border-radius:90% 30% 0 0;opacity:.08;transform:rotate(-25deg)} #dashboard .kpi .kpi-icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;flex:0 0 68px;background:#fbe2e9;color:#cf294c;font-size:28px;font-weight:700} #dashboard .kpi>div{position:relative;z-index:1} #dashboard .kpi span:not(.kpi-icon):not(.kpi-arrow){display:block;color:#2d3952!important;font-weight:700!important;font-size:14px!important} #dashboard .kpi strong{display:block;color:#b71838!important;font-size:37px!important;line-height:1.2!important;margin-top:7px!important} #dashboard .kpi .kpi-arrow{margin-left:auto;flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#ffffffa8;color:inherit;font-size:30px;line-height:1;z-index:1} #dashboard .kpi-draft{color:#226cda!important;background:linear-gradient(120deg,#f5faff,#f8fcff)!important;border-color:#d2e8ff!important;border-top-color:#d2e8ff!important} #dashboard .kpi-draft .kpi-icon{background:#dcebff;color:#1168df} #dashboard .kpi-draft strong{color:#0c60cf!important} #dashboard .kpi-wait{color:#08a282!important;background:linear-gradient(120deg,#f4fffc,#f8fffc)!important;border-color:#cff2e9!important;border-top-color:#cff2e9!important} #dashboard .kpi-wait .kpi-icon{background:#d5f7ea;color:#079b79} #dashboard .kpi-wait strong{color:#068566!important} #dashboard .kpi-ready{color:#e48909!important;background:linear-gradient(120deg,#fffaf3,#fffdf9)!important;border-color:#ffeed6!important;border-top-color:#ffeed6!important} #dashboard .kpi-ready .kpi-icon{background:#fff0d6;color:#e88309} #dashboard .kpi-ready strong{color:#bd5600!important} #dashboard>.card{border-radius:20px!important;padding:27px!important;min-height:335px!important;border:0!important;box-shadow:0 8px 26px #47577112!important} #dashboard .card-head{margin-bottom:24px!important} #dashboard .bd-heading{display:flex;align-items:center;gap:16px} #dashboard .bd-heading-icon{color:#166dee;font-size:32px} #dashboard .bd-heading h2{font-size:22px!important;color:#18223c!important} #dashboard .bd-heading p{font-size:14px!important;color:#7a8498!important} #dashboard .bd-controls{display:flex;gap:12px;align-items:center} #dashboard .bd-search,#dashboard .bd-range{display:flex;align-items:center;gap:8px;border:1px solid #dfe5ef;border-radius:14px;background:#fff;padding:0 14px;color:#495b77} #dashboard .bd-search{min-width:315px} #dashboard .bd-search span{font-size:25px;line-height:1} #dashboard .bd-range{min-width:146px} #dashboard .bd-search input,#dashboard .bd-range select{border:0!important;box-shadow:none!important;background:transparent!important;height:47px;margin:0;padding:7px 0;font-size:14px;color:#55627d} #dashboard table th{background:#f1f0fe!important;color:#384363!important;font-weight:700!important;border-bottom:0!important;padding:14px!important} #dashboard table th:first-child{border-radius:13px 0 0 13px}#dashboard table th:last-child{border-radius:0 13px 13px 0} #dashboard #bdRows:has(.dashboard-empty-icon) td{height:155px!important;text-align:center!important;vertical-align:middle!important;border:0!important;color:#1f2b47!important;font-size:15px!important} .dashboard-empty-icon{font-size:33px;color:#8b9db9;margin-bottom:8px}.dashboard-empty-icon~small{color:#8b9ab2;font-size:13px} #gpEstimator .gp-table,#pricing .gp-table{min-width:1390px} #gpEstimator .gp-guide,#pricing .gp-guide{margin-top:14px} #gpEstimator .estimate-toolbar{display:flex;gap:10px;align-items:end;margin:16px 0} #gpEstimator .estimate-toolbar label{flex:1;max-width:440px;color:#495870;font-size:13px;font-weight:700} #gpEstimator .estimate-toolbar input{display:block;margin-top:6px} #gpEstimator .estimate-badge{font-size:12px;white-space:nowrap} #gpEstimator .est-qty{min-width:65px;width:70px;padding:7px;text-align:right} #gpEstimator [data-est-remove]{font-size:18px;color:#ac2d52} #gpEstimator .final-price-box{border:2px solid #eb7da4!important;background:#fff1f6!important} #gpEstimator .final-price-box input{font-weight:800!important;color:#a72355!important;font-size:16px!important} @media(max-width:1150px){#dashboard .kpis{grid-template-columns:repeat(2,1fr)!important}#dashboard .card-head{align-items:flex-start;flex-direction:column}main header .banner-art{right:30%}} @media(max-width:700px){.app{display:block!important}aside{padding:12px!important}aside nav{grid-template-columns:repeat(2,1fr)}main{padding:16px!important}main header{height:116px!important;padding:18px!important}main header h1{font-size:26px!important}main header .banner-art{display:none}#dashboard .kpis{gap:10px!important}#dashboard .kpi{gap:7px;padding:12px!important;min-height:95px}#dashboard .kpi .kpi-icon{width:40px;height:40px;flex-basis:40px;font-size:20px}#dashboard .kpi .kpi-arrow{display:none}#dashboard .kpi strong{font-size:27px!important}#dashboard .bd-controls{width:100%;flex-wrap:wrap}#dashboard .bd-search{min-width:0;width:100%}#gpEstimator .estimate-toolbar{flex-wrap:wrap}} .kpi{cursor:pointer;user-select:none;transition:box-shadow .15s,transform .15s}.kpi:hover{transform:translateY(-2px)}.kpi:focus-visible{outline:2px solid #ed1c24;outline-offset:2px} #dashboard .kpi.kpi-active{box-shadow:0 0 0 2px #ed1c24 inset,0 6px 18px #ed1c2422!important} #dashboard .kpi.kpi-active strong{color:#ed1c24!important} .pick-price{display:block;color:#7a5b00;font-size:12px;margin-top:2px} /* ===== V4.28 QUOTATION EXACT-MATCH — pin to the real printed template's palette ===== The theme passes above kept softening this document's colors (beige/lilac tints, rounded corners). The actual company form is plain black-on-white with a light gray table header and a soft-yellow (#FFFF99) highlight, so this block pins every quotation-preview element back to that exact look, after every earlier rule. */ #quoteDocumentPreview .ref-quote, #quoteDocumentPreview .doc-sheet{color:#000!important} #quoteDocumentPreview .ref-quote-title, #quoteDocumentPreview .ref-sign-title, #quoteDocumentPreview .ref-field b, #quoteDocumentPreview .ref-field span, #quoteDocumentPreview .ref-date-label span, #quoteDocumentPreview .ref-people td, #quoteDocumentPreview .ref-payline span, #quoteDocumentPreview .doc-dots, #quoteDocumentPreview .doc-cust-grid, #quoteDocumentPreview .doc-detail, #quoteDocumentPreview .doc-note, #quoteDocumentPreview .official-company-text{color:#000!important} #quoteDocumentPreview .doc-company{border-radius:0!important;border:2px solid #000!important;background:#fff!important} #quoteDocumentPreview .ref-items th, #quoteDocumentPreview .doc-items th{background:#d9d9d9!important;color:#000!important;border:1px solid #000!important} #quoteDocumentPreview .ref-items td, #quoteDocumentPreview .doc-items td{border:1px solid #000!important} #quoteDocumentPreview .ref-items .total, #quoteDocumentPreview .doc-items .total, #quoteDocumentPreview .doc-sum td:last-child{background:#ffff99!important;color:#000!important;border:1px solid #000!important} #quoteDocumentPreview .doc-sum td:first-child{color:#000!important} #quoteDocumentPreview .doc-customer-sign{background:#ffff99!important;border:1px solid #000!important;border-radius:0!important} #quoteDocumentPreview .ref-field span, #quoteDocumentPreview .ref-date-label span, #quoteDocumentPreview .ref-payline span, #quoteDocumentPreview .ref-people td:last-child{border-bottom:1px solid #000!important} #quoteDocumentPreview .ref-items .doc-detail{top:212px!important} /* ===== V4.28 DASHBOARD — MODERN PASTEL TECHNOLOGY / GLASSMORPHISM ===== Scope: ONLY the #dashboard view (hero banner + 4 KPI cards), plus the shared
, and only while #dashboard is the active view. Every other page (newbd / master / pricing / quotation / history / settings / gpEstimator) keeps its own header/card look, completely untouched by this block. Nothing app.js reads is removed or renamed: .kpi, data-filter, role, tabindex, aria-pressed, #kAll/#kDraft/#kWait/#kReady, #bdRows, #searchBD, #dashboardDateFilter, data-edit/data-delete all still exist exactly as before — this is visuals only. Earlier theme passes above left #dashboard .kpi with 6+ layered !important rules, so cards are reset with `all:revert` first and rebuilt from a clean slate here to guarantee the new look actually renders. */ #dashboard,#dashboard .dash-hero,#dashboard .dash-hero *,#dashboard .kpis .kpi,#dashboard .kpis .kpi *{ font-family:"LINE Seed Sans TH","Noto Sans Thai","Segoe UI",Tahoma,sans-serif!important; } /* the old shared header (plain title bar + shopping-bag artwork) is replaced below by the new hero — hide it only while Dashboard is active */ main:has(#dashboard.active)>header{display:none!important} #dashboard{ --dp-pink:#ff5c85;--dp-pink2:#ff90ab;--dp-blue:#4f8bff;--dp-blue2:#7fb4ff; --dp-purple:#9b6bff;--dp-purple2:#c3a4ff;--dp-mint:#1fc9a3;--dp-mint2:#7de9cf; --dp-orange:#ff9f43;--dp-orange2:#ffc687;--dp-ink:#1e2247;--dp-sub:#7b84a8; } /* ---------- hero banner ---------- */ #dashboard .dash-hero{ all:revert!important;position:relative!important;overflow:hidden!important; display:flex!important;align-items:center!important;gap:22px!important; box-sizing:border-box!important;margin:0 0 20px!important;padding:30px 34px!important; min-height:150px!important;border-radius:28px!important;border:1px solid #fff!important; background: radial-gradient(120% 160% at 8% 12%,#ffe1ee 0%,rgba(255,225,238,0) 55%), radial-gradient(90% 140% at 92% 15%,#dcebff 0%,rgba(220,235,255,0) 55%), radial-gradient(100% 150% at 60% 100%,#e7e0ff 0%,rgba(231,224,255,0) 60%), linear-gradient(120deg,#fbfcff 0%,#f7f8ff 55%,#fef7fb 100%)!important; box-shadow:0 18px 46px -18px #6a5cff33,0 2px 10px #ff5c8514,inset 0 1px 0 #fff!important; } #dashboard .dash-hero-blob{all:revert!important;position:absolute!important;border-radius:50%!important;filter:blur(22px)!important;opacity:.55!important;pointer-events:none!important;display:block!important} #dashboard .dash-hero-blob-1{width:190px!important;height:190px!important;left:-60px!important;top:-70px!important;background:radial-gradient(circle,var(--dp-pink2),transparent 70%)!important} #dashboard .dash-hero-blob-2{width:170px!important;height:170px!important;right:120px!important;top:-60px!important;background:radial-gradient(circle,var(--dp-blue2),transparent 70%)!important} #dashboard .dash-hero-blob-3{width:150px!important;height:150px!important;right:-40px!important;bottom:-70px!important;background:radial-gradient(circle,var(--dp-purple2),transparent 70%)!important} #dashboard .dash-hero-art{all:revert!important;position:absolute!important;display:block!important;right:26px!important;top:14px!important;width:190px!important;height:130px!important;opacity:.9!important;pointer-events:none!important} #dashboard .dash-hero-copy{all:revert!important;position:relative!important;z-index:2!important;display:block!important;flex:1!important;min-width:0!important} #dashboard .dash-hero-title{all:revert!important;display:block!important;margin:0!important;font-size:40px!important;font-weight:800!important;line-height:1.15!important;color:var(--dp-ink)!important;letter-spacing:.2px!important} #dashboard .dash-hero-title span{display:inline-block!important;background:linear-gradient(100deg,var(--dp-pink),var(--dp-purple) 60%,var(--dp-blue))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important} #dashboard .dash-hero-sub{all:revert!important;display:block!important;margin:4px 0 14px!important;font-size:15px!important;font-weight:500!important;color:var(--dp-sub)!important} #dashboard .dash-hero-tag{all:revert!important;display:inline-flex!important;align-items:center!important;gap:8px!important;background:#ffffffbf!important;backdrop-filter:blur(6px)!important;border:1px solid #fff!important;color:#4a5578!important;font-size:13px!important;font-weight:600!important;padding:9px 16px!important;border-radius:30px!important;box-shadow:0 6px 16px #6a5cff14!important} #dashboard .dash-hero-tag svg{width:16px!important;height:16px!important;flex:none!important;color:#8b6bff!important} #dashboard .dash-hero-cta{ all:revert!important;position:relative!important;z-index:2!important;flex:none!important; display:inline-flex!important;align-items:center!important;gap:10px!important; border:0!important;cursor:pointer!important;padding:16px 26px!important;border-radius:34px!important; font-size:15px!important;font-weight:700!important;color:#fff!important; font-family:"LINE Seed Sans TH","Noto Sans Thai","Segoe UI",Tahoma,sans-serif!important; background:linear-gradient(135deg,#ff6f91,#ff4d7d 55%,#ff3fa0)!important; box-shadow:0 14px 26px -8px #ff3f8a66,0 2px 8px #ff3f8a33!important; transition:transform .15s,box-shadow .15s!important;white-space:nowrap!important; } #dashboard .dash-hero-cta:hover{transform:translateY(-2px)!important;box-shadow:0 18px 30px -8px #ff3f8a77,0 2px 8px #ff3f8a3d!important} #dashboard .dash-hero-cta:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important} #dashboard .dash-hero-cta-plus{font-size:19px!important;font-weight:400!important;line-height:1!important} #dashboard .dash-hero-cta-arrow{opacity:.85!important} /* ---------- KPI cards: clean-slate reset, then rebuild ---------- */ #dashboard .kpi, #dashboard .kpi .kpi-icon, #dashboard .kpi .kpi-body, #dashboard .kpi .kpi-label, #dashboard .kpi .kpi-sub, #dashboard .kpi .kpi-count, #dashboard .kpi .kpi-count strong, #dashboard .kpi .kpi-unit, #dashboard .kpi .kpi-arrow, #dashboard .kpi .kpi-wave{all:revert!important} #dashboard .kpi::before{content:none!important;display:none!important} #dashboard .kpis{all:revert!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:18px!important;margin:0 0 22px!important} #dashboard .kpi{ position:relative!important;overflow:hidden!important;box-sizing:border-box!important; display:flex!important;align-items:flex-start!important;gap:16px!important; padding:22px 20px!important;min-height:150px!important;border-radius:26px!important; border:1px solid #fff!important;cursor:pointer!important;user-select:none!important; transition:transform .15s ease,box-shadow .15s ease!important; } #dashboard .kpi:hover{transform:translateY(-3px)!important} #dashboard .kpi:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important;box-shadow:0 0 0 4px #8b6bff55!important} #dashboard .kpi-all{background:linear-gradient(150deg,#fff 0%,#fff0f4 46%,#ffe3ec 100%)!important;box-shadow:0 16px 32px -16px #ff5c8555,0 2px 8px #ff5c8522!important} #dashboard .kpi-draft{background:linear-gradient(150deg,#fff 0%,#eef4ff 46%,#e0ebff 100%)!important;box-shadow:0 16px 32px -16px #4f8bff55,0 2px 8px #4f8bff22!important} #dashboard .kpi-wait{background:linear-gradient(150deg,#fff 0%,#e9fbf6 46%,#d7f6ec 100%)!important;box-shadow:0 16px 32px -16px #1fc9a355,0 2px 8px #1fc9a322!important} #dashboard .kpi-ready{background:linear-gradient(150deg,#fff 0%,#fff5e9 46%,#ffe9cd 100%)!important;box-shadow:0 16px 32px -16px #ff9f4355,0 2px 8px #ff9f4322!important} #dashboard .kpi .kpi-wave{ display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:56px!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C70 22 150 92 230 56C290 30 340 66 400 42L400 100L0 100Z' fill='white' fill-opacity='0.55'/%3E%3C/svg%3E")!important; background-size:100% 100%!important;background-repeat:no-repeat!important;pointer-events:none!important; } #dashboard .kpi .kpi-icon{position:relative!important;z-index:2!important;flex:none!important;display:grid!important;place-items:center!important;width:52px!important;height:52px!important;border-radius:16px!important;color:#fff!important;box-shadow:0 8px 16px -6px #0003!important} #dashboard .kpi .kpi-icon svg{width:26px!important;height:26px!important;display:block!important} #dashboard .kpi-all .kpi-icon{background:linear-gradient(135deg,var(--dp-pink),var(--dp-pink2))!important} #dashboard .kpi-draft .kpi-icon{background:linear-gradient(135deg,var(--dp-blue),var(--dp-blue2))!important} #dashboard .kpi-wait .kpi-icon{background:linear-gradient(135deg,var(--dp-mint),var(--dp-mint2))!important} #dashboard .kpi-ready .kpi-icon{background:linear-gradient(135deg,var(--dp-orange),var(--dp-orange2))!important} #dashboard .kpi .kpi-body{position:relative!important;z-index:2!important;display:flex!important;flex-direction:column!important;min-width:0!important;flex:1!important} #dashboard .kpi .kpi-label{display:block!important;font-size:15px!important;font-weight:700!important;color:var(--dp-ink)!important;line-height:1.3!important} #dashboard .kpi .kpi-sub{display:block!important;font-size:12px!important;font-weight:500!important;color:var(--dp-sub)!important;margin-top:2px!important} #dashboard .kpi .kpi-count{display:flex!important;align-items:baseline!important;gap:6px!important;margin-top:12px!important} #dashboard .kpi .kpi-count strong{display:inline!important;font-size:32px!important;font-weight:800!important;line-height:1!important;color:var(--dp-ink)!important} #dashboard .kpi-all .kpi-count strong{color:var(--dp-pink)!important} #dashboard .kpi-draft .kpi-count strong{color:var(--dp-blue)!important} #dashboard .kpi-wait .kpi-count strong{color:#0ea988!important} #dashboard .kpi-ready .kpi-count strong{color:#e08420!important} #dashboard .kpi .kpi-unit{display:inline!important;font-size:12px!important;font-weight:600!important;color:var(--dp-sub)!important} #dashboard .kpi .kpi-arrow{position:relative!important;z-index:2!important;flex:none!important;margin-left:auto!important;display:grid!important;place-items:center!important;width:30px!important;height:30px!important;border-radius:50%!important;background:#ffffffb3!important;color:var(--dp-ink)!important;font-size:18px!important;font-style:normal!important;box-shadow:0 3px 8px #0001!important} #dashboard .kpi-all.kpi-active{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dp-pink),0 18px 34px -14px #ff5c8570!important;transform:translateY(-3px)!important} #dashboard .kpi-draft.kpi-active{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dp-blue),0 18px 34px -14px #4f8bff70!important;transform:translateY(-3px)!important} #dashboard .kpi-wait.kpi-active{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dp-mint),0 18px 34px -14px #1fc9a370!important;transform:translateY(-3px)!important} #dashboard .kpi-ready.kpi-active{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dp-orange),0 18px 34px -14px #ff9f4370!important;transform:translateY(-3px)!important} /* ---------- BD list card below: light touch only, so it doesn't clash ---------- */ #dashboard .card{border-radius:26px!important;border:1px solid #eef0fa!important;box-shadow:0 14px 34px -22px #4b3f8f3d!important} #dashboard .card-head input,#dashboard .card-head select{border-radius:12px!important} #dashboard table button{border-radius:10px!important} @media(max-width:1150px){ #dashboard .kpis{grid-template-columns:repeat(2,1fr)!important} } @media(max-width:900px){ #dashboard .dash-hero{padding:24px!important;min-height:0!important} #dashboard .dash-hero-art{display:none!important} #dashboard .dash-hero-title{font-size:32px!important} } @media(max-width:700px){ #dashboard .dash-hero{flex-direction:column!important;align-items:flex-start!important} #dashboard .dash-hero-cta{width:100%!important;justify-content:center!important} #dashboard .kpis{grid-template-columns:1fr!important;gap:12px!important} #dashboard .kpi{min-height:0!important} } /* ===== V4.30 SIDEBAR BRAND HEADER — Modern / Minimal / Premium ===== Scope: ONLY the .brand block at the top of