/* พลังแดด โซล่าร์ CRM — ระบบดีไซน์กลาง โทเคนสีอยู่บนสุด แก้ที่เดียวเปลี่ยนทั้งระบบ ชื่อคลาสเดิมทั้งหมดยังใช้ได้ (.shell .rail .nav .topbar .workspace .panel .metrics .pipeline .steps .badge .chip .record .totals ...) และเพิ่มคลาสใหม่สำหรับหน้าตาชุดนี้ */ :root{ /* แถบเมนูซ้าย */ --nav-a:#16324F; --nav-b:#12293F; --nav-c:#0D1F30; --nav-dim:#9FB2C6; --nav-text:#C3D1E0; --nav-line:rgba(255,255,255,.09); /* พื้นหลัง / พื้นผิว */ --bg:#F4F7FA; --surface:#fff; --surface-2:#F8FAFC; --line:#E4E9F0; --line-soft:#EDF1F6; --ink:#17232F; --ink-2:#3D4A59; --ink-3:#6B7A8C; --ink-4:#93A1B0; /* สีสถานะ */ --go:#15803D; --go-500:#16A34A; --go-soft:#ECFDF3; --go-100:#D1FADF; --go-line:#A6F4C5; --sky:#1D4ED8; --sky-500:#2563EB; --sky-soft:#EFF6FF; --sky-100:#DBEAFE; --sky-line:#BFDBFE; --amber:#B45309; --amber-500:#F59E0B; --amber-soft:#FFFBEB; --amber-100:#FEF3C7; --amber-line:#FDE68A; --red:#DC2626; --red-500:#EF4444; --red-soft:#FEF2F2; --red-100:#FEE2E2; --red-line:#FECACA; --violet:#6D28D9; --violet-500:#7C3AED; --violet-soft:#F5F3FF; --violet-100:#EDE9FE; --violet-line:#DDD6FE; --teal:#0F766E; --teal-500:#0D9488; --teal-soft:#F0FDFA; --teal-100:#CCFBF1; --shadow-xs:0 1px 2px rgba(16,33,50,.05); --shadow:0 1px 3px rgba(16,33,50,.07), 0 1px 2px rgba(16,33,50,.04); --shadow-md:0 4px 14px rgba(16,33,50,.08); --r-sm:6px; --r:10px; --r-lg:14px; --pill:999px; --rail-w:196px; --topbar-h:66px; } *{box-sizing:border-box} html,body{height:100%} body{margin:0; background:var(--bg); color:var(--ink); font-family:"Sarabun","Noto Sans Thai","Leelawadee UI",Tahoma,Arial,sans-serif; font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased} h1,h2,h3{margin:0; text-wrap:balance; font-weight:700; line-height:1.3} h1{font-size:25px; letter-spacing:-.2px} h2{font-size:14.5px} h3{font-size:13.5px} p{margin:0} a{color:var(--go); text-decoration:none} a:hover{text-decoration:none; color:var(--go-500)} img{max-width:100%; display:block} button,input,select,textarea{font:inherit} /* ซ่อนด้วย element.hidden ต้องชนะกฎ display ของคลาส (เช่น .actions ที่เป็น flex) ไม่งั้นปุ่มที่สั่งซ่อนจาก JS จะยังโผล่อยู่โดยไม่มีอะไรฟ้อง */ [hidden]{display:none!important} :focus-visible{outline:2px solid var(--go-500); outline-offset:2px; border-radius:6px} table{border-collapse:collapse; width:100%} ul{margin:0; padding:0} .num,td.amount,.amount{font-variant-numeric:tabular-nums} .muted{color:var(--ink-3)} .small{font-size:12.5px} .tiny{font-size:11.5px} small{font-size:12.5px} .eyebrow{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0} .t-go{color:var(--go)} .t-red{color:var(--red)} .t-sky{color:var(--sky)} .t-amber{color:var(--amber)} .right{text-align:right} .hidden{display:none!important} .spacer{flex:1 1 auto} .row{display:flex; align-items:center; gap:8px} .row-wrap{flex-wrap:wrap} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mb-8{margin-bottom:8px} .mb-12{margin-bottom:12px} .mb-16{margin-bottom:16px} /* ================= โครงหน้า ================= */ .shell{display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh} /* ----- แถบเมนูซ้าย ----- */ .rail{position:sticky; top:0; align-self:start; height:100vh; overflow:hidden; display:flex; flex-direction:column; color:var(--nav-text); background:linear-gradient(180deg,var(--nav-a) 0%,var(--nav-b) 55%,var(--nav-c) 100%)} .rail .brand{display:flex; align-items:center; gap:9px; height:var(--topbar-h); padding:0 14px; flex:0 0 auto; color:#fff; text-decoration:none} .rail .brand img{width:32px; height:32px; flex:none; object-fit:contain; border-radius:9px; background:rgba(255,255,255,.12); padding:3px} .rail .brand b{display:block; font-size:14px; font-weight:700; letter-spacing:.1px} .rail .brand span>span{display:block; font-size:10.5px; color:#8FA3B8; line-height:1.3} .nav{padding:6px 10px; display:flex; flex-direction:column; gap:2px; overflow-y:auto} .nav a{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r); color:var(--nav-text); text-decoration:none; font-size:13.5px; transition:background .14s ease,color .14s ease} .nav a:hover{background:rgba(255,255,255,.07); color:#fff} .nav a[aria-current="page"]{background:var(--go-500); color:#fff; font-weight:600; box-shadow:0 2px 8px rgba(22,163,74,.35)} .nav svg{width:17px; height:17px; flex:none; opacity:.92} .nav a[aria-current="page"] svg{opacity:1} .nav .soon{opacity:.55; cursor:default} .nav .soon:hover{background:transparent; color:var(--nav-text)} .nav .tag{margin-left:auto; font-size:10px; background:rgba(255,255,255,.12); padding:1px 6px; border-radius:var(--pill); color:#B8C8D8} .nav .count{margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:var(--pill); background:var(--red-500); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center} .railfoot{margin-top:auto} .railfoot .photo{height:112px; position:relative; background:linear-gradient(200deg,#1E4C7A,#0E6B4F 60%,#14304C) center/cover} .railfoot .photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,31,48,0),rgba(13,31,48,.9))} .railfoot .tagline{padding:10px 14px 4px; font-size:11.5px; line-height:1.45; color:var(--nav-dim)} .railfoot .ver{padding:0 14px 14px; font-size:11.5px; color:#7E92A8} .railfoot .ver b{display:block; color:#D5E1EE; font-weight:600} /* ----- แถบบน ----- */ .main{min-width:0; display:flex; flex-direction:column} .topbar{position:sticky; top:0; z-index:20; height:var(--topbar-h); flex:0 0 var(--topbar-h); display:flex; align-items:center; gap:16px; padding:0 22px; background:var(--surface); border-bottom:1px solid var(--line)} .topsearch{flex:1 1 auto; max-width:560px; position:relative; display:block; margin:0} .topsearch svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-4); pointer-events:none} .topsearch input{width:100%; height:40px; margin:0; padding:0 16px 0 40px; border:1px solid var(--line); border-radius:var(--pill); background:var(--surface-2); font-size:13.5px; color:var(--ink); outline:none; transition:border-color .15s,box-shadow .15s,background .15s} .topsearch input::placeholder{color:var(--ink-4)} .topsearch input:focus{background:#fff; border-color:var(--go-500); box-shadow:0 0 0 3px rgba(22,163,74,.12)} .topbar .who{margin-left:auto; display:flex; align-items:center; gap:6px} .iconbtn{position:relative; width:38px; height:38px; display:grid; place-items:center; border:0; background:transparent; border-radius:var(--r); color:var(--ink-3); padding:0; cursor:pointer; transition:background .14s,color .14s} .iconbtn:hover{background:var(--surface-2); color:var(--ink-2); filter:none} .iconbtn svg{width:19px; height:19px} .iconbtn .dot{position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--pill); background:var(--red-500); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; border:2px solid #fff} .topbar .av{width:34px; height:34px; flex:none; border-radius:50%; background:linear-gradient(140deg,#64748B,#475569); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px} .topbar .who b{display:block; font-size:13px; font-weight:600; line-height:1.2} .topbar .who small{display:block; color:var(--ink-3); font-size:11px; line-height:1.2} .workspace{padding:20px 22px 44px; display:flex; flex-direction:column; gap:16px; max-width:1560px; width:100%} /* ================= ปุ่ม ================= */ button,.button-link{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 15px; border-radius:var(--r); border:1px solid var(--go-500); background:var(--go-500); color:#fff; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:0 2px 8px rgba(22,163,74,.26); transition:background .14s,border-color .14s,color .14s,box-shadow .14s} button:hover,.button-link:hover{background:var(--go); border-color:var(--go); color:#fff} button:disabled{opacity:.5; cursor:not-allowed; box-shadow:none} button svg,.button-link svg{width:16px; height:16px; flex:none} .secondary{background:var(--surface); color:var(--ink-2); border-color:var(--line); font-weight:600; box-shadow:none} .secondary:hover{background:var(--surface-2); border-color:#D5DDE7; color:var(--ink-2)} .danger{background:#fff; color:var(--red); border-color:var(--red-line); box-shadow:none} .danger:hover{background:var(--red-soft); color:var(--red); border-color:var(--red-line)} .btn-sm{height:32px; padding:0 11px; font-size:12.5px} .actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center} /* ================= การ์ด ================= */ .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-xs)} .panel>p.muted{font-size:12.5px} .section-title{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px} .section-title h2{margin:0} .card-grid{display:grid; gap:14px; align-items:start} .g-2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} .g-main{grid-template-columns:minmax(0,1fr) 320px} .chip{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none} .chip svg{width:16px; height:16px} .c-sky{background:var(--sky-soft); color:var(--sky)} .c-go{background:var(--go-soft); color:var(--go)} .c-amber{background:var(--amber-soft); color:var(--amber)} .c-violet{background:var(--violet-soft); color:var(--violet)} .c-red{background:var(--red-soft); color:var(--red)} .c-teal{background:var(--teal-soft); color:var(--teal)} .c-grey{background:#F1F4F8; color:#64748B} .head-row{display:flex; align-items:center; gap:9px; margin-bottom:13px} .head-row h2{margin:0} .head-row .more{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--go); display:inline-flex; align-items:center; gap:3px} .head-row .more svg{width:13px; height:13px} /* สีจุดตามขั้นตอนโครงการ (ใช้แทน inline style — CSP ห้าม style="") */ .d-inquiry{background:#94A3B8} .d-survey{background:#7C3AED} .d-design{background:#8B5CF6} .d-boq{background:#0EA5E9} .d-quotation{background:#2563EB} .d-contract{background:#16A34A} .d-installation{background:#F59E0B} .d-qc{background:#EAB308} .d-handover{background:#10B981} .d-closed{background:#64748B} .d-cancelled{background:#EF4444} /* หัวการ์ดที่อยู่ในแถบหัวข้อ ไม่ต้องมีระยะห่างล่าง */ .section-title .head-row{margin-bottom:0} /* ================= ป้ายสถานะ ================= */ .badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--pill); font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap} .badge svg{width:13px; height:13px} .badge-lg{padding:5px 13px; font-size:13px} .b-go{background:var(--go-100); color:var(--go); border-color:transparent} .b-sky{background:var(--sky-100); color:var(--sky)} .b-amber{background:var(--amber-100); color:var(--amber)} .b-violet{background:var(--violet-100); color:var(--violet)} .b-red{background:var(--red-100); color:var(--red)} .b-teal{background:var(--teal-100); color:var(--teal)} .b-grey{background:#EEF2F7; color:#56657A} .dot{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block} .d-go{background:var(--go-500)} .d-sky{background:var(--sky-500)} .d-amber{background:var(--amber-500)} .d-red{background:var(--red-500)} .d-violet{background:var(--violet-500)} .d-grey{background:#98A6B8} /* ================= การ์ดตัวเลข ================= */ .metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px} .metrics article{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow-xs); display:flex; gap:11px; align-items:center} .metrics .chip{width:40px; height:40px; border-radius:10px} .metrics .chip svg{width:20px; height:20px} .metrics article>div{display:flex; flex-direction:column; min-width:0} /* ต้องเจาะจง article>div> เท่านั้น — ถ้าเขียน .metrics span จะไปทับ .chip (ซึ่งเป็น span) ทำให้ไอคอนหลุดกรอบและกล่องสีลอยไปอยู่ข้างๆ */ .metrics article>div>strong{display:block; font-size:22px; line-height:1.15; letter-spacing:-.3px; font-variant-numeric:tabular-nums; font-weight:700} .metrics article>div>span{display:block; color:var(--ink-3); font-size:12px; order:2; margin-top:1px} .metrics article>div>em{display:block; order:3; font-style:normal; font-size:11.5px; color:var(--ink-4); margin-top:3px} .metrics article>div>em.up{color:var(--go)} .metrics article>div>em.down{color:var(--red)} /* ================= ขั้นตอนโครงการ (pipeline) ================= */ .pipeline{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:9px} .pipeline>div{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r); padding:11px 13px; transition:border-color .14s,transform .14s} .pipeline>div:hover{border-color:#D5DDE7; transform:translateY(-1px)} .pipeline span{display:block; font-size:12px; color:var(--ink-3)} .pipeline strong{display:block; margin-top:4px; font-size:21px; font-weight:700; font-variant-numeric:tabular-nums} /* โดนัทสรุปสถานะ */ .donut-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap} .donut{position:relative; width:168px; height:168px; flex:none} .donut svg{width:100%; height:100%; transform:rotate(-90deg)} .donut .mid{position:absolute; inset:0; display:grid; place-content:center; text-align:center} .donut .mid b{display:block; font-size:25px; font-weight:700; line-height:1} .donut .mid span{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px} .legend{display:grid; gap:8px; flex:1 1 200px; min-width:0} .legend>div{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2)} .legend strong{margin-left:auto; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums} /* ================= แถบขั้นตอน 1-9 ================= */ .steps{display:flex; gap:6px; padding:12px; overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); scrollbar-width:thin} .steps>a,.steps>span{flex:1 1 0; min-width:120px; display:flex; align-items:center; gap:9px; padding:9px 10px; border:1px solid transparent; border-radius:var(--r); color:var(--ink-2); text-decoration:none; transition:background .14s,border-color .14s} .steps>a:hover{background:var(--surface-2)} .steps i{width:26px; height:26px; flex:none; border-radius:50%; background:#E7ECF3; color:#7B8A9C; display:grid; place-items:center; font-size:12.5px; font-weight:700; font-style:normal; font-variant-numeric:tabular-nums} .steps b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap} .steps small{display:block; font-size:11px; color:var(--ink-4); white-space:nowrap} .steps .done i{background:var(--go-500); color:#fff} .steps .done small{color:var(--go)} .steps .now{background:var(--go-soft); border-color:var(--go-line)} .steps .now i{background:var(--go-500); color:#fff; box-shadow:0 0 0 3px rgba(22,163,74,.18)} .steps .now b,.steps .now small{color:var(--go)} /* แถบแท็บลิงก์ในหน้าโครงการ */ .ptabs{display:flex; gap:2px; overflow-x:auto; padding:0 6px; background:var(--surface); border:1px solid var(--line); border-bottom-color:var(--line); border-radius:var(--r-lg) var(--r-lg) 0 0; scrollbar-width:thin} .ptabs a{display:inline-flex; align-items:center; gap:7px; padding:12px 13px; font-size:13px; font-weight:500; color:var(--ink-3); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; transition:color .14s,border-color .14s} .ptabs a svg{width:16px; height:16px} .ptabs a:hover{color:var(--ink-2)} .ptabs a.on{color:var(--go); font-weight:700; border-bottom-color:var(--go-500)} /* ================= หัวหน้าโครงการ ================= */ .crumb{font-size:12.5px; color:var(--ink-3); display:flex; gap:7px; align-items:center; flex-wrap:wrap} .crumb a{color:var(--ink-3)} .crumb a:hover{color:var(--go)} .crumb span{color:var(--ink-2); font-weight:500} .phead{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap} .phead h1{display:flex; align-items:center; gap:11px; flex-wrap:wrap; overflow-wrap:anywhere} .phead .ico{width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:linear-gradient(140deg,#FDB022,#F79009); color:#fff} .phead .ico svg{width:19px; height:19px} .phead .actions{margin-left:auto} .phead>div{min-width:0} .pmeta{display:flex; gap:6px 20px; flex-wrap:wrap; color:var(--ink-2); font-size:13px; align-items:center} .pmeta>span{display:flex; align-items:center; gap:6px} .pmeta svg{width:15px; height:15px; color:var(--go); flex:none} .pcode{margin-left:auto; text-align:right; font-size:11.5px; color:var(--ink-3); line-height:1.4} .pcode b{display:block; color:var(--ink-2); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums} /* ================= ความคืบหน้า ================= */ .bar{display:block; height:7px; border-radius:var(--pill); background:#E9EEF4; overflow:hidden; min-width:74px} .bar i{display:block; height:100%; border-radius:var(--pill); background:linear-gradient(90deg,var(--go-500),#22C55E)} .bar-lg{height:12px} .prog-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px} .prog-head b{font-size:15px; color:var(--go)} .milestones{display:flex; margin-top:16px} .milestones>div{flex:1 1 0; text-align:center; position:relative; min-width:0} .milestones>div::before{content:""; position:absolute; top:10px; left:-50%; width:100%; height:2px; background:#DFE6EE; z-index:0} .milestones>div:first-child::before{display:none} .milestones .done::before{background:var(--go-500)} .milestones em{position:relative; z-index:1; width:21px; height:21px; margin:0 auto 7px; border-radius:50%; background:#fff; border:2px solid #DFE6EE; display:grid; place-items:center; color:#fff; font-style:normal} .milestones em svg{width:12px; height:12px} .milestones .done em{background:var(--go-500); border-color:var(--go-500)} .milestones .now em{border-color:var(--go-500); box-shadow:0 0 0 4px rgba(22,163,74,.15)} .milestones .now em::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--go-500)} .milestones b{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2)} .milestones small{display:block; font-size:11px; color:var(--ink-4); margin-top:1px} .milestones .now b,.milestones .now small{color:var(--go)} /* ================= ตาราง ================= */ .table-wrap{overflow-x:auto} table{text-align:left; font-size:13px} th{font-size:12px; color:var(--ink-3); font-weight:600; padding:10px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap} td{padding:11px 12px; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:middle; line-height:1.55} tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:#FAFCFE} td small{display:block; color:var(--ink-3); overflow-wrap:anywhere} th.right,td.right,.amount{text-align:right} .panel>.table-wrap{margin:0 -16px -16px; border-top:1px solid var(--line-soft)} .panel>.table-wrap th:first-child,.panel>.table-wrap td:first-child{padding-left:16px} .panel>.table-wrap th:last-child,.panel>.table-wrap td:last-child{padding-right:16px} /* ================= ฟอร์ม ================= */ label{display:block; margin:12px 0; font-size:12.5px; font-weight:600; color:var(--ink-2)} input,select,textarea{width:100%; min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r); margin-top:5px; background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:400; outline:none; transition:border-color .15s,box-shadow .15s} input:focus,select:focus,textarea:focus{border-color:var(--go-500); box-shadow:0 0 0 3px rgba(22,163,74,.12)} textarea{resize:vertical; line-height:1.55} select{appearance:none; padding-right:32px; background-repeat:no-repeat; background-position:right 12px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A8C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")} fieldset{border:0; padding:0; margin:0; min-width:0} fieldset[disabled] input,fieldset[disabled] select,fieldset[disabled] textarea{ background:var(--surface-2); color:var(--ink-3)} label.inline{display:flex; align-items:center; gap:8px} label.inline input{width:auto; min-height:0; margin:0; accent-color:var(--go-500)} input[type=file]{padding:8px; background:var(--surface)} .search{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0} .search input{margin:0; flex:1; min-width:190px} .status-control{display:flex; gap:8px; align-items:center} .status-control select{min-width:140px; margin:0} .tabs{display:flex; gap:5px; flex-wrap:wrap; margin:12px 0} .tabs button{height:34px; padding:0 14px; border-radius:var(--pill); box-shadow:none} .tabs button[aria-pressed=false]{background:var(--surface); color:var(--ink-3); border-color:var(--line); font-weight:600} .tabs button[aria-pressed=false]:hover{background:var(--surface-2); color:var(--ink-2)} .tabs button[aria-pressed=true]{background:var(--go-soft); color:var(--go); border-color:var(--go-line)} .pagination{display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:16px} /* ================= รายการย่อย ================= */ .record{border-top:1px solid var(--line-soft); padding:13px 0} .record:first-child{border-top:0} .record strong{display:block; font-size:13.5px; color:var(--ink); font-weight:600} .record p{margin:5px 0 0; font-size:13px; color:var(--ink-2)} .record .status-control{margin-top:10px} .record.voided strong,.record.voided p{text-decoration:line-through; color:var(--ink-4)} .record .void-note{text-decoration:none; color:var(--red); font-size:12px} /* รายการเอกสาร / คน / เช็กลิสต์ (ใช้ในหน้าที่ทำใหม่) */ .listy>div{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft)} .listy>div:last-child{border-bottom:0} .listy .fileicon{width:26px; height:26px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center; font-size:10px; font-weight:700} .listy .f-pdf{background:var(--red-soft); color:var(--red)} .listy .f-xls{background:var(--go-soft); color:var(--go)} .listy .f-doc{background:var(--sky-soft); color:var(--sky)} .listy .when{margin-left:auto; font-size:11.5px; color:var(--ink-4); white-space:nowrap} .listy .avatar{width:34px; height:34px; flex:none; border-radius:50%; color:#fff; background:linear-gradient(140deg,#93C5FD,#3B82F6); display:grid; place-items:center; font-size:12.5px; font-weight:700} /* ================= กล่องตัวเลขย่อย ================= */ .figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px} .figures>div{padding:12px; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--surface-2)} .figures small{display:block; font-size:11.5px; color:var(--ink-3)} .figures b{display:block; font-size:17px; font-weight:700; margin-top:2px; letter-spacing:-.2px} /* แดชบอร์ด: โดนัท | มูลค่างาน | ทางลัด */ .g-2-1-1{grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1fr)} .big-chip{width:46px; height:46px; border-radius:12px} .big-chip svg{width:23px; height:23px} .big-money{font-size:24px; font-weight:700; letter-spacing:-.5px; line-height:1.2; font-variant-numeric:tabular-nums} /* ================= ปุ่มลัด ================= */ .quicks{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px} .quicks a{display:flex; align-items:center; gap:11px; padding:13px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); font-size:13px; font-weight:600; color:var(--ink-2); text-decoration:none; transition:border-color .14s,box-shadow .14s,transform .14s} .quicks a:hover{border-color:#CFDAE6; box-shadow:var(--shadow); transform:translateY(-1px); color:var(--ink-2)} .quicks .chip{width:38px; height:38px; border-radius:10px} .quicks .chip svg{width:19px; height:19px} /* ================= กล่องเตือน ================= */ .note-box{display:flex; gap:10px; padding:12px 14px; border-radius:var(--r); font-size:12.5px; line-height:1.55} .note-box svg{width:17px; height:17px; flex:none; margin-top:2px} .n-info{background:var(--sky-soft); color:#1E40AF} .n-warn{background:var(--amber-soft); color:var(--amber)} .n-err{background:var(--red-soft); color:var(--red)} .n-ok{background:var(--go-soft); color:var(--go)} /* ================= ยอดรวมท้ายเอกสาร ================= */ .totals{margin-top:18px; max-width:420px; margin-left:auto; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden} .totals div{display:flex; justify-content:space-between; gap:16px; padding:9px 12px; border-bottom:1px solid var(--line-soft); font-size:13px} .totals div:last-child{border-bottom:0} .totals .grand{background:var(--go-soft); color:var(--go); font-weight:700; font-size:14.5px; border-top:0; padding-top:11px; padding-bottom:11px} .totals .profit strong{color:var(--go)} .totals .loss strong{color:var(--red)} /* ================= ข้อความสถานะ ================= */ #appStatus,#loginStatus,#surveyStatus,#photoStatus,#customerStatus,#noteStatus,#productStatus, #quoteStatus,#quoteListStatus,#boqStatus,#boqListStatus,#pushStatus,#contractStatus, #paymentStatus,#contractListStatus{color:var(--red); padding:6px 0; font-size:13px} .success,#appStatus.success,#surveyStatus.success,#photoStatus.success,#customerStatus.success, #noteStatus.success,#productStatus.success,#quoteStatus.success,#boqStatus.success, #pushStatus.success,#contractStatus.success,#paymentStatus.success{color:var(--go)} .ok-note{color:var(--go); font-size:13px} .warn-note{color:var(--red); font-size:13px; font-weight:700} /* ================= เข้าสู่ระบบ ================= */ .login-body{min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(150deg,var(--nav-a),var(--nav-b) 45%,#0E6B4F)} .login-card{width:min(100%,440px); padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.28)} .login-card .brand{display:flex; align-items:center; gap:12px; font-weight:700; color:var(--ink); text-decoration:none} .login-card .brand img{width:44px; height:44px; object-fit:contain} .login-card button{width:100%; margin-top:16px; height:44px} .login-card h1{font-size:22px; margin:18px 0 6px} /* ================= จอเล็ก ================= */ @media (max-width:1400px){.g-2-1-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @media (max-width:1180px){.g-2,.g-3,.g-4,.g-main,.g-2-1-1{grid-template-columns:minmax(0,1fr)}} @media (max-width:900px){ :root{--rail-w:0px} .shell{grid-template-columns:1fr} .rail{position:static; height:auto; overflow:visible} .rail .brand{height:auto; padding:14px} .nav{flex-direction:row; flex-wrap:wrap} .nav a{font-size:12.5px; padding:7px 10px} .railfoot{display:none} .topbar{padding:0 14px; gap:10px} .topsearch{max-width:none} .topbar .who b,.topbar .who small{display:none} .workspace{padding:14px} h1{font-size:21px} .phead .actions{margin-left:0; width:100%} .pcode{margin-left:0; text-align:left} } @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}} /* ================= พิมพ์ ================= */ @media print{ .rail,.topbar,.ptabs,.steps,.actions,button,.button-link{display:none!important} .shell{grid-template-columns:1fr} .workspace{padding:0} .panel{border:0; box-shadow:none} body{background:#fff} } /* ===== ปฏิทินงาน ===== ห้ามใช้ selector แบบ ".calcell span" — ในช่องมี .ev ที่เป็น /