/* §ctSkin · ดีไซน์ ต้นทุน & จุดคุ้มทุน · scoped ใต้ #view-costing เท่านั้น ไม่กระทบหน้าจออื่น */ #view-costing{ --b50:#fff5f0; --b100:#ffe8dc; --b200:#ffd0b8; --b300:#ffab88; --b500:#ff4c00; --b600:#e63b00; --cr50:#faf8f5; --cr200:#eae0d2; --sd50:#fdfbf7; --sd100:#f7f2ea; --sd200:#ebe3d5; --sd300:#ded2bf; --sd400:#cebc9f; --es700:#4a3e36; --es800:#382d26; --es900:#2b221d; --es950:#1d1612; --mt50:#e6f7f0; --mt100:#ccefe1; --mt500:#10b981; --mt700:#0d7a5f; font-family:'IBM Plex Sans Thai',system-ui,sans-serif; color:var(--es900); } #view-costing *{box-sizing:border-box} #view-costing input,#view-costing select,#view-costing button{font-family:inherit} /* หัวหน้า + แท็บ */ #view-costing .ct-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} #view-costing .ct-brand{display:flex;align-items:center;gap:12px} #view-costing .ct-logo{width:40px;height:40px;border-radius:14px;background:var(--b500);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(255,76,0,.22);flex:none} #view-costing .ct-h1{display:flex;align-items:center;gap:9px} #view-costing .ct-h1 h1{font-size:20px;font-weight:700;margin:0;letter-spacing:-.02em;color:var(--es900)} #view-costing .ct-pill{font-size:10px;padding:2px 9px;border-radius:999px;background:var(--b100);color:#be2b00;font-weight:600;letter-spacing:.04em} #view-costing .ct-h2{font-size:12px;color:rgba(74,62,54,.72);margin:2px 0 0} #view-costing #ct-tabs{display:inline-flex;gap:2px;background:var(--sd100);padding:4px;border-radius:16px;border:1px solid var(--sd200)} #view-costing .ct-tab{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;color:rgba(74,62,54,.8); border-radius:12px;padding:8px 15px;font-size:12px;font-weight:500;cursor:pointer;transition:.15s;white-space:nowrap} #view-costing .ct-tab:hover{color:var(--es900)} #view-costing .ct-tab.on{background:#fff;color:var(--es900);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.07)} #view-costing .ct-tab.on svg{color:var(--b500)} /* โครงหน้า */ #view-costing .ct-wrap{display:flex;gap:22px;align-items:flex-start} #view-costing .ct-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px} #view-costing .ct-card{background:#fff;border:1px solid rgba(235,227,213,.9);border-radius:22px;box-shadow:0 1px 2px rgba(43,34,29,.04)} #view-costing .ct-card-h{display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid var(--sd100);color:var(--b500)} #view-costing .ct-card-h.split{justify-content:space-between;background:rgba(253,251,247,.6)} #view-costing .ct-card-h b{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--es900)} #view-costing .ct-card-h .ct-sub{display:block;font-size:11.5px;font-weight:400;color:rgba(74,62,54,.6);margin-top:2px;letter-spacing:0} #view-costing .ct-hint{font-size:11px;color:rgba(74,62,54,.5);margin-left:auto;font-weight:400} /* แถบซ้าย · รายการแผน */ #view-costing .ct-side{width:252px;flex:none;display:flex;flex-direction:column;gap:10px} #view-costing .ct-side-h{font-size:11.5px;color:rgba(74,62,54,.7);font-weight:500;padding:0 4px} #view-costing .ct-rt{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;cursor:pointer; padding:13px 14px;border-radius:18px;border:1px solid var(--sd200);background:rgba(255,255,255,.7);color:var(--es900);transition:.15s} #view-costing .ct-rt:hover{background:#fff;border-color:var(--sd300)} #view-costing .ct-rt.on{background:var(--b500);border-color:var(--b500);color:#fff;box-shadow:0 8px 20px rgba(255,76,0,.22)} #view-costing .ct-rt-ic{margin-top:1px;color:var(--sd400)} #view-costing .ct-rt.on .ct-rt-ic{color:#fff} #view-costing .ct-rt-body{flex:1;min-width:0;display:block} #view-costing .ct-rt-nm{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-costing .ct-dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none} #view-costing .ct-rt-sub{display:block;font-size:11px;margin-top:3px;color:rgba(74,62,54,.6)} #view-costing .ct-rt.on .ct-rt-sub{color:rgba(255,255,255,.9)} #view-costing .ct-rt-badge{display:inline-block;margin-top:8px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:7px;background:var(--mt50);color:var(--mt700);border:1px solid var(--mt100)} #view-costing .ct-rt-badge.warn{background:#fffbeb;color:#a16207;border-color:#fde68a} #view-costing .ct-rt.on .ct-rt-badge,#view-costing .ct-rt.on .ct-rt-badge.warn{background:rgba(255,255,255,.22);color:#fff;border-color:transparent} #view-costing .ct-addrt{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;cursor:pointer; padding:11px;border-radius:16px;border:1px dashed var(--sd300);background:rgba(255,255,255,.4); color:rgba(74,62,54,.7);font-size:11.5px;font-weight:600;transition:.15s} #view-costing .ct-addrt:hover{border-color:var(--b500);color:var(--b500);background:rgba(255,245,240,.5)} /* แถบชื่อแผน */ #view-costing .ct-namebar{display:flex;align-items:center;gap:10px;padding:12px 14px;flex-wrap:wrap} #view-costing .ct-title{flex:1;min-width:180px;max-width:340px;font-size:17px;font-weight:700;color:var(--es900); background:transparent;border:1px solid transparent;border-radius:12px;padding:5px 10px;transition:.15s} #view-costing .ct-title:hover{background:var(--sd50)} #view-costing .ct-title:focus{background:#fff;border-color:var(--b500);outline:none;box-shadow:0 0 0 3px rgba(255,76,0,.12)} #view-costing .ct-linkbox{display:flex;align-items:center;gap:7px;background:var(--sd50);border:1px solid var(--sd200); border-radius:12px;padding:7px 11px;font-size:11.5px;color:rgba(74,62,54,.7)} #view-costing .ct-linkbox svg{color:var(--sd400)} #view-costing .ct-linkbox select{background:transparent;border:none;font-size:11.5px;font-weight:500;color:var(--es900);outline:none;max-width:200px} #view-costing .ct-ib{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px; border:1px solid var(--sd200);background:#fff;color:var(--es700);cursor:pointer;transition:.15s;flex:none} #view-costing .ct-ib:hover{color:var(--b500);border-color:var(--b300)} #view-costing .ct-ib.danger{border-color:#fecdd3;background:rgba(255,241,242,.5);color:#e11d48} #view-costing .ct-ib.danger:hover{background:#ffe4e6} /* พารามิเตอร์ */ #view-costing .ct-grid8{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:11px;padding:16px 20px} #view-costing .ct-f{display:block} #view-costing .ct-f>span{display:block;font-size:11px;font-weight:500;color:rgba(74,62,54,.7);margin-bottom:5px} #view-costing .ct-f.hot>span{color:var(--b600);font-weight:700} #view-costing .ct-in{background:#fff;border:1px solid var(--cr200);border-radius:10px;padding:7px 9px;font-size:12px; color:var(--es900);text-align:right;font-variant-numeric:tabular-nums;transition:.15s} #view-costing .ct-in:focus{border-color:var(--b500);box-shadow:0 0 0 3px rgba(255,76,0,.12);outline:none} #view-costing .ct-in.wide{width:100%;font-weight:500} #view-costing .ct-in.hot{color:var(--b600);font-weight:700;background:rgba(255,245,240,.6);border-color:var(--b300)} #view-costing select.ct-in.wide{text-align:left} /* §boatRent · การ์ดเรือ & ค่าเช่า · อยู่ระหว่างพารามิเตอร์กับการ์ดตัวเลข เพราะมันเปลี่ยนทั้งความจุและต้นทุนคงที่ ต้องเห็นก่อนจะไปอ่านจุดคุ้มทุน */ #view-costing .ct-rent{margin:14px 0} #view-costing .ct-rent.on{border-color:#f4d7b0} #view-costing .ct-rentbody{display:flex;flex-direction:column;gap:12px;padding:14px 18px} #view-costing .ct-rrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px} /* §boatRent · ช่องในแถวต้องไม่ถูกบีบ · ปล่อยให้หดเมื่อไหร่ ป้ายกับช่องกรอกจะทับกันทันที (เจอตอนถ่ายหน้าจอรอบแรก: "ค่าเช่า/งวด" ทับ "วันในงวด") */ #view-costing .ct-rrow>.ct-f{flex:0 0 auto;display:block} #view-costing .ct-rrow>.ct-f>span{white-space:nowrap} #view-costing .ct-rrow>.ct-f.grow{flex:1 1 220px;min-width:190px;max-width:340px} #view-costing .ct-rsec{display:flex;flex-direction:column;gap:9px;padding:11px 13px; background:rgba(247,242,234,.55);border:1px solid var(--sd200);border-radius:14px} #view-costing .ct-rsech{font-size:10px;font-weight:700;letter-spacing:.04em;color:rgba(74,62,54,.5)} #view-costing .ct-rchk{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--es700);cursor:pointer;white-space:nowrap} #view-costing .ct-rchk.big{font-size:12.5px} #view-costing .ct-rchk input{accent-color:var(--b500);cursor:pointer;margin:0} #view-costing .ct-rcalc{font-size:11.5px;color:var(--es700);background:#fff;border:1px dashed var(--sd400); border-radius:10px;padding:7px 11px;font-variant-numeric:tabular-nums} #view-costing .ct-rcalc.warn{color:#8a5b00;background:#fef6e7;border-color:#f0d5a0} #view-costing .ct-rbe{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px;font-size:12px; border-radius:14px;padding:10px 13px;border:1px solid} #view-costing .ct-rbe.ok{background:rgba(230,247,240,.75);border-color:var(--mt100);color:var(--es900)} #view-costing .ct-rbe.bad{background:#fff1f2;border-color:#fecdd3;color:#9f1239} #view-costing .ct-rbe-lb{font-size:10px;font-weight:700;letter-spacing:.04em;color:rgba(74,62,54,.55); text-transform:uppercase} /* §rentPlan · ตารางวางแผนรายเดือน · แถวที่ทำไม่ได้จริงต้องซีดทันที ไม่งั้นคนอ่านจะไปหยุดที่ "ต้องวิ่ง 42 วัน" โดยไม่ทันเห็นว่างวดมีแค่ 28 วัน */ #view-costing .ct-rscroll{overflow-x:auto;border-radius:10px;border:1px solid var(--sd200);background:#fff} #view-costing .ct-rtbl{width:100%;border-collapse:collapse;font-size:11.5px;min-width:480px; font-variant-numeric:tabular-nums} #view-costing .ct-rtbl th{padding:6px 10px;text-align:left;font-size:10px;font-weight:700; color:rgba(74,62,54,.5);background:rgba(247,242,234,.7);border-bottom:1px solid var(--sd200);line-height:1.35} #view-costing .ct-rtbl td{padding:6px 10px;border-bottom:1px solid rgba(247,242,234,.9);color:var(--es900)} #view-costing .ct-rtbl .ct-r{text-align:right} #view-costing .ct-rtbl tr:last-child td{border-bottom:none} #view-costing .ct-rtbl tr.ct-rbad td{color:rgba(74,62,54,.38)} #view-costing .ct-rtbl tr.ct-rnow td{background:var(--b50);font-weight:600} /* การ์ดตัวเลข */ #view-costing .ct-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} #view-costing .ct-k{border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:12px} #view-costing .ct-k.mint{background:rgba(230,247,240,.9);border:1px solid var(--mt100)} #view-costing .ct-k.brand{background:rgba(255,245,240,.85);border:1px solid var(--b100)} #view-costing .ct-k.plain{background:#fff;border:1px solid var(--sd200)} #view-costing .ct-k-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} #view-costing .ct-k-lb{font-size:10.5px;font-weight:700;letter-spacing:.05em} #view-costing .ct-k.mint .ct-k-lb{color:var(--mt700)} #view-costing .ct-k.brand .ct-k-lb{color:var(--b600)} #view-costing .ct-k.plain .ct-k-lb{color:var(--es700)} #view-costing .ct-k-v{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums} #view-costing .ct-k-v em{font-size:17px;font-weight:700;font-style:normal;margin-left:5px} #view-costing .ct-k.mint .ct-k-v{color:var(--mt700)} #view-costing .ct-k.brand .ct-k-v{color:var(--b500)} #view-costing .ct-k.brand .ct-k-v.neg{color:#e11d48} #view-costing .ct-k.plain .ct-k-v{color:var(--es900)} #view-costing .ct-k-ic{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none} #view-costing .ct-k.mint .ct-k-ic{background:var(--mt100);color:var(--mt700)} #view-costing .ct-k.brand .ct-k-ic{background:var(--b100);color:var(--b500)} #view-costing .ct-k.plain .ct-k-ic{background:var(--sd100);color:var(--es800)} #view-costing .ct-k-row{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:600;color:var(--mt700);margin-bottom:6px} #view-costing .ct-bar{height:8px;border-radius:999px;background:var(--mt100);overflow:hidden} #view-costing .ct-bar i{display:block;height:100%;border-radius:999px;background:var(--mt500);transition:width .25s} #view-costing .ct-k-note{font-size:11px;color:rgba(74,62,54,.8);font-weight:500;display:flex;align-items:center;gap:7px} #view-costing .ct-k-note i{width:7px;height:7px;border-radius:50%;background:var(--b500);flex:none} #view-costing .ct-k-note b{color:var(--es900);font-weight:700} #view-costing .ct-k-split{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:rgba(74,62,54,.7); padding-top:9px;border-top:1px solid var(--sd100)} /* ตาราง */ #view-costing .ct-tblcard{overflow:hidden} #view-costing .ct-scroll{overflow-x:auto} #view-costing .ct-legend{display:flex;gap:13px;font-size:11px;color:rgba(74,62,54,.7)} #view-costing .ct-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px} #view-costing .ct-legend i.s{background:var(--sd300)} #view-costing .ct-legend i.b{background:var(--b500)} #view-costing .ct-tbl{width:100%;border-collapse:collapse;font-size:12px} #view-costing .ct-tbl th{background:rgba(247,242,234,.75);color:var(--es800);font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.05em;padding:12px 16px;text-align:left;border-bottom:1px solid var(--sd200)} #view-costing .ct-tbl th.ct-r{text-align:right} #view-costing .ct-tbl th.vat{color:var(--b600);font-weight:700} #view-costing .ct-tbl td{padding:9px 16px;border-bottom:1px solid rgba(247,242,234,.8)} #view-costing .ct-r{text-align:right;font-variant-numeric:tabular-nums} #view-costing .ct-tbl td.dim{color:var(--sd300)} #view-costing .ct-tbl td.b{font-weight:700;color:var(--es900)} #view-costing .ct-tbl td.vat{color:var(--b600);font-weight:600} #view-costing .ct-gr td{background:rgba(235,227,213,.6);font-weight:700;color:var(--es900)} #view-costing .ct-lr:hover td{background:rgba(253,251,247,.85)} #view-costing .ct-share{font-size:10px;font-weight:400;color:rgba(74,62,54,.5);margin-left:8px} #view-costing .ct-pct{background:#fef3c7;color:#92400e;border-radius:6px;padding:1px 7px;font-size:9.5px;font-weight:700;margin-left:7px} #view-costing .ct-bullet{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--sd400);margin-right:9px;vertical-align:2px} #view-costing .ct-tbl tfoot td{background:var(--es950);color:var(--cr200);font-weight:600;padding:14px 16px;border:none;border-top:2px solid var(--b500)} #view-costing .ct-tbl tfoot td.w{color:#fff;font-weight:700} #view-costing .ct-tbl tfoot td.o{color:var(--b300);font-weight:700} #view-costing .ct-tbl tfoot td.big{color:#ff7b52;font-weight:700;font-size:13.5px} /* สรุปกำไร */ #view-costing .ct-pnl{padding:16px 20px} #view-costing .ct-sr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;font-size:12.5px;color:var(--es800)} #view-costing .ct-sr span:last-child{font-variant-numeric:tabular-nums;font-weight:600;color:var(--es900)} #view-costing .ct-sr.tot{border-top:1px solid var(--sd200);margin-top:7px;padding-top:11px;font-size:15px;font-weight:700} #view-costing .ct-sr.tot span:last-child{color:var(--mt700);font-weight:700} #view-costing .ct-sr.tot.neg span:last-child{color:#e11d48} /* กราฟ */ #view-costing .ct-chart{padding-bottom:14px} #view-costing .ct-plot{position:relative;display:flex;align-items:stretch;gap:1px;margin:14px 20px 0; border-left:1px solid var(--sd200);border-bottom:1px solid var(--sd200)} #view-costing .ct-zero{position:absolute;left:0;right:0;border-top:1px dashed var(--sd300)} #view-costing .ct-cb{flex:1;position:relative;min-width:0} #view-costing .ct-cb i{position:absolute;left:0;right:0;border-radius:2px;display:block} #view-costing .ct-cb i.neg{background:#fda4a4} #view-costing .ct-cb i.pos{background:#7adbb5} #view-costing .ct-cb i.be{background:var(--mt700)} #view-costing .ct-cb i.st{background:#f59e0b} #view-costing .ct-xax{display:flex;justify-content:space-between;font-size:10px;color:rgba(74,62,54,.5);margin:5px 20px 0} #view-costing .ct-lg{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:rgba(74,62,54,.7);margin:9px 20px 0} #view-costing .ct-lg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px} #view-costing .ct-lg i.neg{background:#fda4a4} #view-costing .ct-lg i.pos{background:#7adbb5} #view-costing .ct-lg i.be{background:var(--mt700)} #view-costing .ct-lg i.st{background:#f59e0b} /* §ctFx · สูตรใต้ชื่อรายการ */ #view-costing .ct-fx{display:block;font-size:9px;color:rgba(74,62,54,.42);font-weight:400;margin-top:1px; font-variant-numeric:tabular-nums;line-height:1.35} /* §ctPnl3 · บีบบรรทัดการ์ดสรุปรายได้ */ #view-costing .ct-trio .ct-pnl{padding:12px 14px} #view-costing .ct-trio .ct-pnl .ct-sr{padding:3px 0;font-size:11.5px} #view-costing .ct-trio .ct-pnl .ct-sr small{font-size:9px;margin-top:0} #view-costing .ct-trio .ct-pnl .ct-sr.sm{padding:1.5px 0;font-size:10px} #view-costing .ct-trio .ct-pnl .ct-pblk{margin-top:7px;padding-top:6px} #view-costing .ct-trio .ct-pnl .ct-pblkh{font-size:8.5px;margin-bottom:2px} #view-costing .ct-trio .ct-pnl .ct-phl{padding:5px 9px;margin-top:6px} #view-costing .ct-trio .ct-pnl .ct-sr.tot{padding:9px 11px;font-size:13.5px;margin-top:7px} /* §ctPnl2 · รายละเอียดเพิ่มในการ์ดสรุปรายได้ */ #view-costing .ct-sr.sm{font-size:10.5px;padding:3px 0;color:rgba(74,62,54,.75)} #view-costing .ct-sr.sm span:last-child{font-weight:600} #view-costing .ct-sr.sm em{font-style:normal;display:inline-flex;align-items:center;justify-content:center; width:12px;height:12px;border-radius:50%;background:var(--sd100);color:rgba(74,62,54,.45); font-size:8px;font-weight:700;margin-left:5px;cursor:help;vertical-align:1px} #view-costing .ct-pblk{border-top:1px dashed var(--sd200);margin-top:9px;padding-top:8px} #view-costing .ct-pblkh{font-size:9px;font-weight:700;color:rgba(74,62,54,.45);letter-spacing:.06em; text-transform:uppercase;margin-bottom:3px} #view-costing .ct-pn{color:var(--mt700);font-weight:700} #view-costing .ct-pn.neg{color:#d63b3b} #view-costing .ct-phl{background:var(--mt50);border:1px solid var(--mt100);border-radius:10px;padding:7px 10px;margin-top:8px} #view-costing .ct-phl .ct-sr.sm{color:var(--mt700);padding:2px 0} #view-costing .ct-phl .ct-sr.sm span:last-child{color:var(--mt700);font-weight:700} #view-costing .ct-phl .ct-sr.sm em{background:rgba(255,255,255,.75);color:var(--mt700)} #view-costing .ct-phl.warn{background:#fff7ed;border-color:#fed7aa} #view-costing .ct-phl.warn .ct-sr.sm,#view-costing .ct-phl.warn .ct-sr.sm span:last-child{color:#c2410c} #view-costing .ct-phl.bad{background:#fdf0ee;border-color:#f6cfc7} #view-costing .ct-phl.bad .ct-sr.sm,#view-costing .ct-phl.bad .ct-sr.sm span:last-child{color:#d63b3b} #view-costing .ct-phl.ok{background:var(--mt50);border-color:var(--mt100)} /* §ctItin · เส้นทาง | กราฟ | สรุปรายได้ · สูงเท่ากันทั้งสามใบ */ #view-costing .ct-trio{display:grid;grid-template-columns:328px 1fr 274px;gap:18px;align-items:stretch} #view-costing .ct-trio > .ct-card{display:flex;flex-direction:column;min-height:0;max-height:560px;overflow:hidden} #view-costing .ct-trio .ct-card-h{flex:none;padding:12px 15px} #view-costing .ct-chartbody{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:12px} #view-costing .ct-plot{flex:1;min-height:90px;margin:14px 20px 0} #view-costing .ct-xax,#view-costing .ct-lg{flex:none} #view-costing .ct-itbody{display:flex;flex-direction:column;flex:1;min-height:0} #view-costing .ct-ihead{display:grid;grid-template-columns:58px 1fr 40px 14px;gap:5px;padding:5px 13px;flex:none; background:rgba(253,251,247,.8);border-bottom:1px solid var(--sd100);font-size:8.5px;font-weight:600; color:rgba(74,62,54,.5);letter-spacing:.04em;text-transform:uppercase} #view-costing .ct-ihead .r{text-align:right} #view-costing .ct-itscroll{flex:1;min-height:0;overflow-y:auto;padding:4px 13px} #view-costing .ct-itscroll::-webkit-scrollbar{width:5px} #view-costing .ct-itscroll::-webkit-scrollbar-thumb{background:var(--sd300);border-radius:3px} #view-costing .ct-ir{display:grid;grid-template-columns:58px 1fr 40px 14px;gap:5px;align-items:center} #view-costing .ct-iin{border:1px solid transparent;background:transparent;border-radius:5px;padding:1px 4px;height:20px; font-family:inherit;font-size:10.5px;font-weight:500;color:var(--es900);outline:none;width:100%;min-width:0} #view-costing .ct-iin.t{font-variant-numeric:tabular-nums;font-weight:600;color:var(--b600);text-align:right;font-size:10px} #view-costing .ct-iin.km{font-variant-numeric:tabular-nums;text-align:right;color:rgba(74,62,54,.7);font-size:10px} #view-costing .ct-iin:hover{border-color:var(--sd200);background:#fff} #view-costing .ct-iin:focus{border-color:var(--b500);background:#fff;box-shadow:0 0 0 2px var(--b50)} #view-costing .ct-iin::placeholder{color:var(--sd400);font-weight:400} #view-costing .ct-ir.hi .ct-iin{font-weight:700} #view-costing .ct-ix{border:none;background:transparent;color:var(--sd400);cursor:pointer;font-size:12px;padding:0;opacity:0;line-height:1} #view-costing .ct-ir:hover .ct-ix{opacity:1} #view-costing .ct-ix:hover{color:#d63b3b} #view-costing .ct-iempty{padding:16px 6px;text-align:center;color:rgba(74,62,54,.4);font-size:10.5px} #view-costing .ct-iadd{width:100%;border:none;border-top:1px dashed var(--sd200);background:transparent;flex:none; color:rgba(74,62,54,.55);padding:7px;font-family:inherit;font-size:9.5px;font-weight:600;cursor:pointer} #view-costing .ct-iadd:hover{color:var(--b500);background:rgba(253,251,247,.8)} #view-costing .ct-ifoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 13px;flex:none; background:var(--b50);border-top:1px solid var(--b100);font-size:10px;color:var(--b600);font-weight:600} #view-costing .ct-ifoot b{font-variant-numeric:tabular-nums;font-size:11.5px} #view-costing .ct-trio .ct-pnl{display:flex;flex-direction:column;flex:1;min-height:0;padding:14px 16px} #view-costing .ct-trio .ct-sr.tot{margin-top:auto} /* §ctPair · กราฟ + สรุปรายได้ อยู่คู่กัน */ #view-costing .ct-pair{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start} #view-costing .ct-pair .ct-chart{padding-bottom:6px} #view-costing .ct-sr small{display:block;font-size:10px;color:rgba(74,62,54,.45);font-weight:400;margin-top:1px} #view-costing .ct-sr.tot{border-top:none;margin-top:9px;padding:10px 12px;background:var(--b50);border:1px solid var(--b100);border-radius:12px} #view-costing .ct-sr.tot span:last-child{color:var(--b500)} #view-costing .ct-sr.tot.neg span:last-child{color:#d63b3b} /* §ctTier + §ctCompact · สองตารางเรียงคู่ */ #view-costing .ct-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} #view-costing .ct-duo .ct-card-h{padding:12px 15px} #view-costing .ct-duo .ct-card-h .ct-sub{display:none} #view-costing .ct-duo table{table-layout:fixed;font-size:11px} #view-costing .ct-duo .ct-tbl th{padding:8px 10px;font-size:9px} #view-costing .ct-duo .ct-tbl td{padding:5px 10px} #view-costing .ct-fv{display:flex;gap:8px;align-items:center;font-size:10.5px;color:rgba(74,62,54,.6);white-space:nowrap} #view-costing .ct-fv b{color:var(--es900);font-variant-numeric:tabular-nums} #view-costing .ct-foot2{padding:8px 15px;background:rgba(253,251,247,.7);border-top:1px solid var(--sd100); font-size:10px;color:rgba(74,62,54,.5);border-radius:0 0 22px 22px;line-height:1.6} /* ตารางกระชับ */ #view-costing .ct-tbl2 th.ct-kd{width:13%} #view-costing .ct-tbl2 th:nth-child(1){width:44%} #view-costing .ct-tbl2 th:nth-child(3),#view-costing .ct-tbl2 th:nth-child(4),#view-costing .ct-tbl2 th:nth-child(5){width:14.3%} #view-costing .ct-gr td{cursor:pointer} #view-costing .ct-gr:hover td{background:var(--b50)} #view-costing .ct-gr.op td{background:var(--b50)} #view-costing .ct-gnm{display:inline-flex;align-items:center;gap:6px} #view-costing .ct-chev{font-style:normal;font-size:6.5px;color:rgba(74,62,54,.35);display:inline-block;width:8px;transition:transform .15s;flex:0 0 8px} #view-costing .ct-gr.op .ct-chev{transform:rotate(90deg);color:var(--b500)} #view-costing .ct-pbar{display:inline-block;width:30px;height:4px;border-radius:2px;background:var(--sd200);overflow:hidden;vertical-align:middle;margin:0 5px 0 7px} #view-costing .ct-pbar i{display:block;height:100%;background:var(--b300)} #view-costing .ct-lr{display:none} #view-costing .ct-lr.on{display:table-row} #view-costing .ct-lr td{color:rgba(74,62,54,.75);font-weight:400} #view-costing .ct-lr td:first-child{padding-left:32px} #view-costing .ct-tag{display:inline-block;font-size:8.5px;font-weight:700;padding:0 6px;border-radius:5px;line-height:16px;white-space:nowrap} #view-costing .ct-tag.f{background:var(--sd100);color:#7a6c5f;border:1px solid var(--sd200)} #view-costing .ct-tag.v{background:var(--b50);color:var(--b600);border:1px solid var(--b100)} #view-costing .ct-tag.m{background:var(--mt50);color:var(--mt700);border:1px solid var(--mt100)} #view-costing .ct-u.ch{color:#7C3AED;font-weight:600} #view-costing .ct-dm{color:var(--sd400)} /* §ctMatch · จับคู่กลุ่มเส้นทางกับแผนต้นทุน */ #view-costing .ct-warn{display:flex;gap:13px;align-items:flex-start;background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:13px 15px;margin-bottom:14px} #view-costing .ct-warn .wi{width:26px;height:26px;border-radius:9px;background:#FEF3C7;color:#B45309;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none} #view-costing .ct-warn b{color:#92400E;font-size:11.5px} #view-costing .ct-warn p{margin:4px 0 0;font-size:10.5px;color:#A16207;line-height:1.75} #view-costing .ct-mrow td{vertical-align:middle} #view-costing .ct-fam{display:flex;align-items:center;gap:8px} #view-costing .ct-fam b{font-size:11.5px} #view-costing .ct-sug{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:5px;font-size:9.5px;color:var(--b600);line-height:1.6} #view-costing .ct-sug b{white-space:nowrap} #view-costing .ct-sug .ct-mini{white-space:nowrap} #view-costing .ct-ok{color:#047857;font-weight:700} #view-costing .ct-nolink{color:#B45309;font-weight:700} #view-costing .ct-tbl tfoot td{background:var(--b50);color:var(--es900);border-top:1.5px solid var(--b300);padding:10px 14px} #view-costing .ct-tbl tfoot td.w{color:var(--es900)} #view-costing .ct-tbl tfoot td.o{color:var(--b600)} #view-costing .ct-tbl tfoot td.big{color:var(--b500);font-size:13.5px} /* ตาราง Tier */ #view-costing .ct-ttbl th:nth-child(1){width:21%} #view-costing .ct-ttbl th:nth-child(2){width:13%} #view-costing .ct-ttbl th:nth-child(3){width:12%} #view-costing .ct-ttbl th:nth-child(4){width:16%} #view-costing .ct-ttbl th:nth-child(5){width:16%} #view-costing .ct-ttbl th:nth-child(6){width:12%} #view-costing .ct-ttbl th:nth-child(7){width:10%} #view-costing .ct-pf.full{color:var(--mt700)} #view-costing .ct-pf.full.neg{color:#d63b3b} #view-costing .ct-duo .ct-in.tp{width:56px} #view-costing .ct-duo .ct-use{padding:2px 4px;font-size:8px} #view-costing .ct-duo .ct-ttbl td{padding:5px 7px} #view-costing .ct-duo .ct-mgb{display:none} #view-costing .ct-duo .ct-mg{gap:0} #view-costing .ct-duo .ct-mgb{width:26px;flex:0 0 26px} #view-costing .ct-duo .ct-cap2{width:36px} #view-costing .ct-duo .ct-tbl td{overflow:hidden} #view-costing .ct-duo .ct-pbar{display:none} #view-costing .ct-bev.bad{white-space:nowrap} #view-costing .ct-ttbl tr.on td{background:var(--b50)} #view-costing .ct-c{text-align:center} #view-costing .ct-tnm{display:inline-flex;align-items:center;gap:6px;width:100%} #view-costing .ct-nowdot{width:6px;height:6px;border-radius:50%;background:var(--b500);flex:0 0 6px} #view-costing .ct-nowtx{font-size:8.5px;font-weight:700;color:var(--b600)} #view-costing .ct-in.tn{width:100%;min-width:0;border-color:transparent;background:transparent;font-weight:600;text-align:left;padding:2px 6px} #view-costing .ct-in.tn:hover{border-color:var(--sd200);background:#fff} #view-costing .ct-in.tp{width:64px;height:25px;font-weight:700;text-align:right;font-size:11px;padding:0 7px} #view-costing .ct-bev{font-weight:700;font-variant-numeric:tabular-nums} #view-costing .ct-bev.bad{color:#d63b3b;font-size:10px} #view-costing .ct-bev em{font-style:normal;font-size:8.5px;color:rgba(74,62,54,.45);font-weight:500} #view-costing .ct-cap2{display:block;width:42px;height:4px;border-radius:2px;background:var(--sd200);overflow:hidden;margin:3px 0 0 auto} #view-costing .ct-cap2 i{display:block;height:100%;background:var(--mt500)} #view-costing .ct-cap2.bad i{background:#e88a8a} #view-costing .ct-pf{color:var(--mt700);font-weight:700;font-variant-numeric:tabular-nums} #view-costing .ct-pf.neg{color:#d63b3b} #view-costing .ct-mg{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end} #view-costing .ct-mgb{width:34px;height:5px;border-radius:3px;background:var(--sd200);overflow:hidden;flex:0 0 34px} #view-costing .ct-mgb i{display:block;height:100%;background:var(--mt500)} #view-costing .ct-mgb.neg i{background:#d63b3b} #view-costing .ct-mgv{color:var(--mt700);font-weight:700} #view-costing .ct-mgv.neg{color:#d63b3b} #view-costing .ct-use{border:1px solid var(--sd200);background:#fff;color:rgba(74,62,54,.6);border-radius:7px; padding:2px 6px;font-family:inherit;font-size:8.5px;font-weight:700;cursor:pointer;white-space:nowrap} #view-costing .ct-use:hover{border-color:var(--b500);color:var(--b500);background:var(--b50)} @media (max-width:1180px){ #view-costing .ct-duo{grid-template-columns:1fr} #view-costing .ct-pair{grid-template-columns:1fr} #view-costing .ct-trio{grid-template-columns:1fr} #view-costing .ct-trio > .ct-card{max-height:none} #view-costing .ct-plot{min-height:130px} } /* แถบหัวของแท็บ 2 / 3 */ #view-costing .ct-bar2{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px;margin-bottom:16px} #view-costing .ct-bar2 b{font-size:14.5px;font-weight:700;color:var(--es900)} #view-costing .ct-bar2 .ct-sub{display:block;font-size:11.5px;color:rgba(74,62,54,.7);margin-top:3px;line-height:1.6} #view-costing .ct-bar2 em{font-style:normal;font-weight:700} #view-costing .ct-bar2 em.fix{color:#7c3aed} #view-costing .ct-bar2 em.var{color:#1d4ed8} #view-costing .ct-bar2 em.step{color:#a16207} #view-costing .ct-bar2r{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #view-costing .ct-vatset{font-size:11.5px;color:rgba(74,62,54,.7)} #view-costing .ct-btn{display:inline-flex;align-items:center;gap:7px;border:none;background:var(--b500);color:#fff; border-radius:14px;padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 14px rgba(255,76,0,.2);transition:.15s} #view-costing .ct-btn:hover{background:var(--b600)} #view-costing .ct-btn.ghost{background:#fff;color:rgba(74,62,54,.75);border:1px solid var(--sd200);box-shadow:none;font-weight:500} #view-costing .ct-btn.ghost:hover{background:var(--sd50);color:var(--es900)} /* แท็บ 2 · การ์ดหมวด */ #view-costing .ct-catcard{overflow:hidden;margin-bottom:14px} #view-costing .ct-cath{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px; background:rgba(247,242,234,.75);border-bottom:1px solid var(--sd200);font-size:12px} #view-costing .ct-cath>span:first-child{display:flex;align-items:center;gap:8px;color:var(--b500)} #view-costing .ct-cath b{color:var(--es900);font-weight:700;font-size:12.5px} #view-costing .ct-ren{border:none;background:transparent;color:rgba(74,62,54,.45);cursor:pointer;font-size:12px;padding:0 3px} #view-costing .ct-ren:hover{color:var(--b500)} #view-costing .ct-cnt{font-size:11px;color:rgba(74,62,54,.6)} #view-costing .ct-mtbl{width:100%;border-collapse:collapse;table-layout:fixed;min-width:860px} #view-costing .ct-mtbl td{padding:9px 14px;border-bottom:1px solid rgba(247,242,234,.9);vertical-align:top} #view-costing .ct-mtbl tr:last-child td{border-bottom:none} #view-costing .ct-mtbl tr:hover td{background:rgba(253,251,247,.7)} #view-costing .ct-lname{width:100%;border:1px solid transparent;border-radius:9px;padding:4px 7px;font-size:12.5px;font-weight:600;background:transparent;color:var(--es900)} #view-costing .ct-lname:hover{background:var(--sd50)} #view-costing .ct-lname:focus{background:#fff;border-color:var(--b500);outline:none} #view-costing .ct-nmsub{display:flex;align-items:center;gap:9px;margin:5px 0 0 7px;flex-wrap:wrap} #view-costing .ct-pierh td{background:#F6F1E7;font-size:9.5px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:#8A6A3A;padding:6px 12px} #view-costing .ct-vgh td{background:#FBF8F2} #view-costing .ct-vgb > td{padding:0 0 10px 0;background:#FDFCF9} #view-costing .ct-catsel{font-size:10px;color:rgba(74,62,54,.7);border:1px solid var(--sd200);border-radius:999px; padding:2px 7px;background:var(--sd50);max-width:120px} #view-costing .ct-vat{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--sd400);font-weight:500;cursor:pointer;white-space:nowrap} #view-costing .ct-vat.on{color:var(--mt700);font-weight:700} #view-costing .ct-vat input{width:13px;height:13px;accent-color:var(--mt500);cursor:pointer} #view-costing .ct-part{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0} #view-costing .ct-sel{font-size:10.5px;border:1px solid var(--cr200);border-radius:8px;padding:3px 5px;background:#fff;color:var(--es900)} #view-costing .ct-tag{border-radius:6px;padding:1px 7px;font-size:9px;font-weight:700;white-space:nowrap} #view-costing .ct-tag.fix{background:#ede9fe;color:#6d28d9} #view-costing .ct-tag.var{background:#dbeafe;color:#1d4ed8} #view-costing .ct-tag.step{background:#fef3c7;color:#92400e} #view-costing .ct-u{font-size:10.5px;color:rgba(74,62,54,.6);white-space:nowrap} #view-costing .ct-u.en4{color:#6d28d9;font-weight:700} #view-costing .ct-u.th{color:#1d4ed8;font-weight:600} #view-costing .ct-mini{border:1px dashed var(--mt100);background:rgba(230,247,240,.5);color:var(--mt700);border-radius:8px; padding:2px 8px;font-size:9.5px;font-weight:600;cursor:pointer;white-space:nowrap} #view-costing .ct-mini:hover{border-color:var(--mt500)} #view-costing .ct-mini.dash{margin-top:4px;border-color:var(--sd300);background:transparent;color:rgba(74,62,54,.7)} #view-costing .ct-mini.dash:hover{border-color:var(--b500);color:var(--b500)} #view-costing .ct-x{border:none;background:transparent;color:#e11d48;cursor:pointer;font-size:14px;padding:0 3px;opacity:.5;display:inline-flex;align-items:center} #view-costing .ct-x:hover{opacity:1} #view-costing .ct-del{text-align:center;padding-top:12px!important} /* แท็บ 3 · เมทริกซ์ */ /* ══ §ctCellNav · เดินตารางด้วยลูกศร · กากบาทบอกว่ากำลังอยู่ช่องไหน ══════════ สีที่ใช้คือส้มแบรนด์ชุดเดิมของหน้านี้ (--b*) ไม่ได้เพิ่มสีใหม่เข้าระบบ ความเข้มไล่ลงมาสามชั้น: ช่องที่โฟกัส > แถว/คอลัมน์เดียวกัน > ที่เหลือ */ #view-costing .ct-navbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:0 0 8px;padding:7px 13px;border:1px solid var(--sd200);border-radius:10px; background:var(--sd50);font-size:12px;color:var(--es700);min-height:38px} #view-costing .ct-navref{font-weight:700;color:var(--es900)} #view-costing .ct-navval{font-family:'DM Mono',ui-monospace,monospace;font-size:12.5px; font-weight:500;color:var(--b600);background:var(--b50);border-radius:6px;padding:2px 9px} #view-costing .ct-navsp{flex:1} #view-costing .ct-navkeys{display:flex;align-items:center;gap:5px;font-size:11px;color:#8a7a6d} #view-costing .ct-navkeys kbd{font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px; border:1px solid var(--sd300);border-bottom-width:2px;border-radius:5px;padding:0 5px; background:#fff;color:var(--es700)} /* เห็นชัดเป็นอันดับแรกคือ "แถบส้มด้านซ้ายของเซลล์" · เซลล์ตอนกางสูงได้ถึง 476px กรอบรอบเซลล์ทั้งใบจึงอยู่นอกสายตา แต่แถบซ้ายวิ่งยาวตลอดความสูง มองเห็นแน่นอน ของเดิม .ct-in:focus เป็นเงาส้มจาง 12% ซึ่งจมหายไปกลางช่องกรอกหลายสิบช่อง */ #view-costing .ct-otbl td.ct-cellon{box-shadow:inset 4px 0 0 var(--b500), inset 0 0 0 1px var(--b300); background:var(--b50) !important;position:relative;z-index:1} #view-costing .ct-sheet .ct-otbl td.ct-cellon input.ct-in:focus{border-color:var(--b500); box-shadow:0 0 0 3px rgba(255,76,0,.35);background:#fff} #view-costing .ct-otbl td.ct-colon, #view-costing .ct-otbl td.ct-rowon{background:#fff6f1 !important} #view-costing .ct-otbl th.ct-colon{background:var(--b50) !important} #view-costing .ct-otbl td.ct-rowon{color:var(--b600);font-weight:700} /* คอลัมน์แรกที่ตรึงไว้ต้องทึบเสมอ ไม่งั้นไฮไลต์ทำให้เนื้อหาข้างหลังทะลุ */ #view-costing .ct-sheet .ct-otbl td.ct-stick.ct-rowon{background:#fff5ef !important} /* ══ §ctSheet · ตารางเทียบต้นทุนหลายทริป · ใช้งานแบบชีต ═══════════════════════ ปัญหาเดิม: ตารางสูง 2,524px บนจอ 900px (เลื่อนเกือบ 3 จอ) และกว้างเกินจอด้วย แต่ไม่มี position:sticky สักบรรทัดในหน้านี้ — คลาสชื่อ .ct-stick มีแต่ชื่อ ตั้งแค่ความกว้าง พอเลื่อนลง หัวคอลัมน์ (ชื่อทริป) หายไปทันที เหลือแต่ตัวเลขที่ไม่รู้ว่าของทริปไหน เลื่อนข้างก็เสียคอลัมน์ชื่อรายการต้นทุนไปอีก แก้: ให้กล่องตารางเป็นตัวเลื่อนเอง (สูงเท่าที่เหลือบนจอ) แล้วตรึงหัวกับคอลัมน์แรก เหมือน freeze panes ในสเปรดชีต ⚠ เฉพาะจอกว้าง · บนมือถือคอลัมน์แรกกว้าง 250px จะกินเกือบทั้งจอ และหัวสูง ~230px จะบังข้อมูลจนไม่เหลืออะไรให้อ่าน (บทเรียนเดียวกับ §mobUnstick) จอแคบจึงเลื่อนปกติ ⚠ ช่องที่ตรึงต้องมีพื้นทึบ ไม่งั้นเนื้อหาที่เลื่อนอยู่ข้างหลังทะลุขึ้นมา ค่าที่ใช้คือสีเดิมผสมกับพื้นขาวแล้ว (rgba(247,242,234,.85) -> #F8F4ED และ rgba(235,227,213,.6) -> #F3EEE6) หน้าตาจึงเหมือนเดิมทุกประการ */ @media (min-width:821px){ #view-costing .ct-sheet{max-height:calc(100dvh - 200px);overflow:auto} #view-costing .ct-sheet .ct-otbl thead th{position:sticky;top:0;z-index:3;background:#F8F4ED} #view-costing .ct-sheet .ct-otbl th.ct-stick{left:0;z-index:5} #view-costing .ct-sheet .ct-otbl td.ct-stick{position:sticky;left:0;z-index:2;background:#fff} #view-costing .ct-sheet .ct-otbl .ct-grow td.ct-stick{background:#F3EEE6} /* เส้นแบ่งของคอลัมน์ที่ตรึง · ใช้เงาแทน border เพราะ border ของ cell ที่ sticky จะเลื่อนหลุดไปกับตาราง ไม่ติดอยู่กับที่ */ #view-costing .ct-sheet .ct-otbl th.ct-stick, #view-costing .ct-sheet .ct-otbl td.ct-stick{box-shadow:1px 0 0 var(--sd200)} /* หัวคอลัมน์เตี้ยลงหน่อย · ของเดิม 233px จาก 700px = กินจอไปเกือบหนึ่งในสาม พอตรึงไว้ ความสูงของหัวคือพื้นที่ที่หายไปตลอดเวลา ไม่ใช่แค่ตอนเปิดหน้า ที่บีบได้โดยไม่เสียข้อมูล: ช่องคนทั้งหมด/คนไทย เดิมตกบรรทัดเป็นสองแถว (69px) บังคับให้อยู่แถวเดียว + ลดระยะห่างบรรทัดของบรรทัดรอง */ #view-costing .ct-sheet .ct-otbl th{padding:9px 12px} #view-costing .ct-sheet .ct-paxbar{flex-wrap:nowrap;gap:4px;margin-top:6px} #view-costing .ct-sheet .ct-paxf{padding:2px 3px 2px 6px;gap:3px} #view-costing .ct-sheet .ct-paxf span{font-size:9px} #view-costing .ct-sheet .ct-in.px{width:38px;height:20px} #view-costing .ct-sheet .ct-psub{line-height:1.25;margin-top:1px} #view-costing .ct-sheet .ct-pbe{margin-top:2px} } /* แถบสีประจำคอลัมน์ · ไล่สายตาจากหัวลงมาได้ว่ากำลังอ่านทริปไหน ใช้ inset shadow ไม่ใช่ border-top เพราะ border-collapse ทำให้เส้นบนหาย */ /* §ctTripBg · หัวคอลัมน์มีพื้นสีของตัวเอง · แยกทริปได้ตั้งแต่ชายตามอง ไม่ลงสีไปถึงตัวตาราง เพราะกากบาทบอกตำแหน่ง (§ctCellNav) ต้องเด่นกว่าเสมอ */ #view-costing .ct-pcol{box-shadow:inset 0 3px 0 var(--pc,transparent); background:var(--pcbg,rgba(247,242,234,.85)) !important} #view-costing .ct-sheet .ct-otbl thead th.ct-pcol{background:var(--pcbg,#F8F4ED) !important} #view-costing .ct-sheet .ct-otbl thead th.ct-pcol.ct-colon{background:var(--b50) !important} #view-costing .ct-pdot{display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--pc,#999);margin-right:6px;vertical-align:middle;flex:none} /* §ctHdAlign · หัวคอลัมน์จัดชิดล่าง · ทุกคอลัมน์บรรทัดตรงกันหมดไม่ว่าชื่อยาวแค่ไหน ชื่อกินพื้นที่ที่เหลือด้านบน · สเปค/คุ้มทุน/ช่องกรอกคน เกาะพื้นล่างเสมอ */ #view-costing .ct-otbl thead th.ct-pcol{vertical-align:bottom} #view-costing .ct-phd{display:flex;flex-direction:column;height:100%;min-height:74px} #view-costing .ct-pnm{display:flex;align-items:flex-end;justify-content:center;gap:0; flex:1 1 auto;text-align:center} #view-costing .ct-pfoot{flex:none} #view-costing .ct-otbl{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;min-width:640px} #view-costing .ct-otbl th{background:rgba(247,242,234,.85);padding:13px 14px;text-align:left;border-bottom:1px solid var(--sd200);vertical-align:top} #view-costing .ct-otbl th.ct-stick{width:250px;font-size:10.5px;font-weight:600;color:var(--es800);text-transform:uppercase;letter-spacing:.04em} #view-costing .ct-pcol{border-left:1px solid var(--sd200);text-align:center} #view-costing .ct-pcol.on{background:rgba(255,245,240,.55)} #view-costing .ct-pnm{font-size:13px;font-weight:700;color:var(--es900)} #view-costing .ct-pcol.on .ct-pnm{color:var(--b600)} #view-costing .ct-psub{font-size:10.5px;color:rgba(74,62,54,.6);font-weight:400;margin-top:2px} #view-costing .ct-pbe{font-size:10.5px;font-weight:700;color:var(--mt700);margin-top:3px} #view-costing .ct-pbe.warn{color:#b45309} #view-costing .ct-otbl td{padding:7px 14px;border-bottom:1px solid rgba(247,242,234,.9);border-left:1px solid var(--sd200)} #view-costing .ct-otbl td.ct-stick{border-left:none;font-weight:500} #view-costing .ct-grow td{background:rgba(235,227,213,.6)} #view-costing .ct-gtd{font-weight:700;color:var(--es900)} /* §ctGrpFold · ชื่อหมวดกดได้ · ลูกศรหมุนบอกสถานะ */ #view-costing td.ct-gtd.ct-stick{cursor:pointer;user-select:none} #view-costing .ct-gnm2{display:flex;align-items:center;gap:7px} #view-costing td.ct-gtd .ct-chev{font-size:9px;color:rgba(74,62,54,.45);transition:transform .15s ease;display:inline-block;flex:none} #view-costing td.ct-gtd.open .ct-chev{transform:rotate(90deg);color:var(--b500)} #view-costing td.ct-gtd.ct-stick:hover{color:var(--b600)} #view-costing .ct-ltd.dis{opacity:.35} #view-costing .ct-otbl tbody tr:not(.ct-grow):hover td{background:rgba(253,251,247,.8)} #view-costing .ct-cell{display:grid;grid-template-columns:22px 92px 1fr;align-items:center;gap:8px;max-width:272px;margin:0 auto} #view-costing .ct-cell .c1{display:flex;justify-content:center} #view-costing .ct-cell .c2{display:flex;align-items:center;justify-content:flex-end;gap:3px} #view-costing .ct-cell .c3{display:flex;align-items:center;gap:5px;font-size:10.5px;color:rgba(74,62,54,.55)} #view-costing .ct-ck input{width:15px;height:15px;accent-color:var(--b500);cursor:pointer} #view-costing .ct-off{background:#ffe4e6;color:#be123c;border-radius:6px;padding:1px 8px;font-size:9.5px;font-weight:700;white-space:nowrap} #view-costing .ct-pctwrap{display:inline-flex;align-items:center;gap:2px} #view-costing .ct-in.pct{width:54px;font-weight:700} #view-costing .ct-pctwrap.on .ct-in.pct{border-color:#f59e0b;background:#fffbeb;color:#92400e} #view-costing .ct-pctwrap i{font-style:normal;font-size:10px;font-weight:700;color:rgba(74,62,54,.4)} #view-costing .ct-pctwrap.on i{color:#92400e} #view-costing .ct-in.ovr{width:68px} #view-costing .ct-in.ovr.on{border-color:var(--mt500);background:var(--mt50);font-weight:700;color:var(--mt700)} #view-costing .ct-gsum{font-family:inherit;font-size:11px;font-weight:700;color:var(--es800);font-variant-numeric:tabular-nums} #view-costing .ct-cell .c3 s{color:var(--sd400);font-variant-numeric:tabular-nums} #view-costing .ct-undo{border:none;background:transparent;color:var(--mt700);cursor:pointer;padding:0;display:inline-flex} #view-costing .ct-unit{color:rgba(74,62,54,.45)} /* §ctAllKeys · แถวรายการแบบกดกางทั้งแถว · ทุกค่าทับได้ */ #view-costing .ct-lname{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;margin:-7px -14px;padding:9px 14px;border-radius:9px} #view-costing .ct-lname:hover{background:var(--b50)} #view-costing .ct-chev{font-style:normal;font-size:8px;color:rgba(74,62,54,.32);transition:transform .15s;display:inline-block;flex:0 0 9px} #view-costing .ct-lname.open .ct-chev{transform:rotate(90deg);color:var(--b500)} #view-costing .ct-lname.open span{color:var(--b600);font-weight:600} #view-costing .ct-lcell{display:flex;align-items:flex-start;gap:9px;max-width:330px;margin:0 auto} #view-costing .ct-lbody{flex:1;min-width:0} #view-costing .ct-peek{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:rgba(74,62,54,.5);cursor:pointer;min-height:22px;font-variant-numeric:tabular-nums} /* §ctDim · ค่าที่ยังไม่ได้แก้ = มาจากสูตรกลาง ไม่ต้องดึงสายตา ทำให้ซีด ค่าที่ตั้งเองแล้ว = ของที่คนตัดสินใจใส่ไว้ ต้องเด่น เพราะเป็นสิ่งที่ต้องตรวจก่อนปิดยอด ของเดิมกลับกัน: ค่าสูตรกลางเป็นสีเข้มสุด ค่าที่ตั้งเองเป็นเขียวธรรมดา */ #view-costing .ct-peek b{font-size:12.5px;font-weight:500;color:rgba(74,62,54,.42)} #view-costing .ct-peek b.ov{color:var(--mt700);font-weight:700;background:var(--mt50); border-radius:6px;padding:1px 7px;font-size:13px} #view-costing .ct-peek b.mut{color:var(--sd400);font-weight:400} #view-costing .ct-peek .n{font-size:9.5px;color:var(--mt700);font-weight:700} #view-costing .ct-dot{width:5px;height:5px;border-radius:50%;background:var(--mt500);display:inline-block;flex:0 0 5px} /* §ctFldGrid · ช่องกรอกตอนกาง · เป็นตาราง ไม่ใช่รายการเรียงลงมา 4 ค่าของแต่ละส่วนคือ ผู้ใหญ่/เด็ก คูณ ต่างชาติ/ไทย อยู่แล้ว ชื่อชนิดอยู่ที่หัวแถว/หัวคอลัมน์ครั้งเดียว ไม่ต้องเขียนซ้ำทุกช่อง */ #view-costing .ct-flds{display:flex;flex-direction:column;gap:7px;padding:1px 0 3px} #view-costing .ct-lunit{font-size:10px;color:rgba(74,62,54,.5);margin-top:1px;padding-left:17px;line-height:1.3} #view-costing .ct-fpart{display:flex;flex-direction:column;gap:3px} #view-costing .ct-pttl{font-size:9.5px;font-weight:700;letter-spacing:.05em; color:rgba(74,62,54,.45);text-transform:uppercase} /* §ctEvenCell · ล็อกความสูงแถวในกริดให้เท่ากันทุกเซลล์ ไม่ให้ยืดตามเนื้อหา */ #view-costing .ct-fg{display:grid;grid-template-columns:auto 1fr 1fr;gap:3px 6px; align-items:center;grid-auto-rows:26px} #view-costing .ct-fg .ct-fgh{align-self:end} #view-costing .ct-fg:has(.ct-fgr:only-of-type){grid-template-columns:auto 1fr 1fr} #view-costing .ct-fgh{font-size:9.5px;font-weight:600;color:rgba(74,62,54,.5);text-align:center} #view-costing .ct-fgr{font-size:10px;color:rgba(74,62,54,.6);white-space:nowrap;text-align:right} #view-costing .ct-fw{position:relative;display:flex;align-items:center} /* §ctColMin · กันชั้นที่สอง · ช่องกรอกห้ามยุบจนเหลือแต่ไอคอน ไม่ว่าคอลัมน์จะแคบแค่ไหน min-width:0 เดิมแปลว่า "ยอมให้หดเท่าไหร่ก็ได้" ซึ่งกริดก็หดให้จริง ๆ จนเหลือ 29px */ #view-costing .ct-fw .ct-in.fin{width:100%;min-width:54px;text-align:right;padding-right:20px} #view-costing .ct-fw .ct-undo{position:absolute;right:4px;opacity:.55} #view-costing .ct-fw .ct-undo:hover{opacity:1} #view-costing .ct-fnone{font-size:11px;color:rgba(74,62,54,.25);text-align:center} #view-costing .ct-fline{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center} #view-costing .ct-fi{display:flex;align-items:center;gap:4px} #view-costing .ct-fi .ct-fgr{text-align:left} #view-costing .ct-fi .ct-fw{width:64px} #view-costing .ct-pwarn{font-size:9px;color:#b45309;background:#fef6e7;border-radius:5px;padding:1px 6px} #view-costing .ct-pnew{font-size:9px;color:rgba(74,62,54,.5);background:var(--sd100); border:1px dashed var(--sd400);border-radius:5px;padding:1px 6px} #view-costing .ct-f{display:grid;grid-template-columns:1fr 76px;align-items:center;gap:9px} #view-costing .ct-flb{font-size:10.5px;color:rgba(74,62,54,.6);line-height:1.3} #view-costing .ct-in.fin{width:76px;font-size:11.5px;padding:2px 7px;text-align:right; color:rgba(74,62,54,.42);border-color:var(--cr200)} /* §ctDim · ยังไม่แก้ = ซีด */ #view-costing .ct-in.fin::placeholder{color:rgba(74,62,54,.32)} #view-costing .ct-in.fin.on{border-color:var(--mt500);background:var(--mt50);font-weight:700; color:var(--mt700);opacity:1} /* ตั้งเองแล้ว = เด่น */ #view-costing .ct-in.fin.unset{border-style:dashed;border-color:var(--sd300)} #view-costing .ct-fhint{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:9.5px;color:rgba(74,62,54,.4);margin-top:-3px} #view-costing .ct-fhint s{color:var(--sd400);font-variant-numeric:tabular-nums} #view-costing .ct-warn{background:#fff7ed;border:1px solid #fed7aa;color:#c2410c;font-size:9px;font-weight:700;padding:1px 6px;border-radius:5px;white-space:nowrap} #view-costing .ct-newk{background:var(--sd100);border:1px dashed var(--sd400);color:rgba(74,62,54,.5);font-size:9px;padding:1px 6px;border-radius:5px;white-space:nowrap} #view-costing .ct-paxbar{display:flex;gap:6px;justify-content:center;margin-top:8px;flex-wrap:wrap} #view-costing .ct-paxf{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--sd300);border-radius:8px;padding:2px 4px 2px 8px} #view-costing .ct-paxf span{font-size:9.5px;color:rgba(74,62,54,.55);font-weight:500} #view-costing .ct-in.px{width:42px;height:22px;font-size:11px;font-weight:600;text-align:center;padding:0 4px} @media (max-width:900px){ #view-costing .ct-wrap{flex-direction:column} #view-costing .ct-side{width:100%} } :root{ /* ══ §ciColour · สีประจำแบรนด์ ═══════════════════════════════════════════ วัดคอนทราสต์จริงก่อนใช้ · สองสีนี้บทบาทคนละขั้วกัน --ci-navy #000F4C บนขาว 17.9:1 · เป็นได้ทั้งพื้นและตัวหนังสือ --ci-cyan #00BCDF บนขาว 2.27:1 — ต่ำกว่าเกณฑ์อ่านออก (4.5) เกือบครึ่ง ห้ามเป็นตัวหนังสือเล็กบนขาวเด็ดขาด แต่เป็น "พื้น" ได้ · ตัวหนังสือบนมันต้องเป็น ci-navy (7.9:1) --ci-cyan-ink #00708A ci-cyan ที่หรี่จนอ่านออกบนขาว (5.7:1) ใช้เฉพาะตอนอยากได้ฮิวเดียวกันแต่ต้องเป็นตัวหนังสือ ตอนนี้ใช้จริงที่หน้า Action Board หน้าเดียว · หน้าอื่นยังไม่แตะ */ --ci-navy:#000F4C; --ci-cyan:#00BCDF; --ci-cyan-ink:#00708A; --ci-cyan-soft:#E4F7FC; --ci-navy-soft:#E8EBF4; --ocean:#1a6a8a;--ocean-mid:#2196be;--ocean-light:#c8eaf5;--ocean-50:#edf7fc; --coral:#e05a38;--coral-light:#fbe8e3; --sand:#f5f2ed;--sand-dark:#e8e4dc;--sand-mid:#ede9e3; --ink:#1a2332;--ink-mid:#435870;--ink-soft:#7a8fa3; --white:#ffffff; --navy:#0f1f2e; --green:#2d9a6a;--green-light:#d8f4e8;--green-dark:#1a6040; --amber:#d48a14;--amber-light:#fef6df; --red:#c43a2e;--red-light:#fdecea; --purple:#6c5ce7;--purple-light:#ede9ff; --border:rgba(26,35,50,0.09); --r:10px;--r-sm:6px;--r-lg:14px; --sidebar:220px;--topbar:52px; --shadow:0 1px 3px rgba(26,35,50,.07),0 4px 12px rgba(26,35,50,.04); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'DM Sans',sans-serif;background:var(--sand);color:var(--ink);font-size:13px;line-height:1.5;min-height:100vh} /* ── TOPBAR ── */ .topbar{height:var(--topbar);background:#0f1f2e;display:flex;align-items:center;padding:0 18px;gap:12px;position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.07)} .topbar-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:15px} .brand-icon{width:30px;height:30px;background:rgba(255,255,255,.1);border-radius:7px;display:flex;align-items:center;justify-content:center} .brand-icon svg{width:16px;height:16px} .topbar-sep{width:1px;height:18px;background:rgba(255,255,255,.12);margin:0 4px} .topbar-sub{font-size:11px;font-weight:400;color:rgba(255,255,255,.4);letter-spacing:.04em;text-transform:uppercase} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px} .topbar-date{font-size:12px;color:rgba(255,255,255,.45);font-family:'DM Mono',monospace} .topbar-btn{padding:4px 11px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);font-size:11px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s} .topbar-btn:hover{background:rgba(255,255,255,.12)} /* ── LAYOUT ── */ .app{display:flex;margin-top:var(--topbar);min-height:calc(100vh - var(--topbar))} /* ── SIDEBAR ── */ .sidebar{width:var(--sidebar);background:#0f1f2e;position:fixed;top:var(--topbar);left:0;bottom:0;display:flex;flex-direction:column;padding:10px 8px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.05)} .nav-section{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:12px 10px 4px} .nav-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);color:rgba(255,255,255,.45);font-size:12px;cursor:pointer;transition:all .15s;border:1px solid transparent;user-select:none;margin-bottom:1px} .nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)} .nav-item.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.1);color:#fff;font-weight:500} .nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:.6} .nav-item.active svg{opacity:1} /* §pierSub · กลุ่มท่าเรือพับได้ + เมนูย่อยใต้กลุ่ม */ .nav-item.po-grp{font-weight:600} .nav-item.po-grp .po-gch{margin-left:auto;font-size:11px;opacity:.55;transition:transform .2s} .nav-item.po-grp.po-collapsed .po-gch{transform:rotate(-90deg)} .nav-item.po-sub{padding-left:32px;font-size:11.5px;margin-bottom:0} .nav-item.po-sub .po-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex:none;display:inline-block} .nav-item.po-sub.po-hide{display:none !important} .sidebar-footer{margin-top:auto;padding:10px 10px;font-size:10px;color:rgba(255,255,255,.2);border-top:1px solid rgba(255,255,255,.06)} /* ── MAIN ── */ .main{margin-left:var(--sidebar);flex:1;padding:22px;min-width:0} .view{display:none}.view.active{display:block} /* §laBadgeGap (2026-08-03) · #la-userbadge / #la-viewonly / #la-refresh เป็น position:fixed ที่ก้นจอ · พอเลื่อนลงสุดหน้ามันทับบรรทัดล่างสุดของตารางพอดี (เห็นชัดที่ Travel Summary ที่แถวสุดท้ายโดนป้าย "Admin · แก้ล่าสุด" บัง) → เว้นที่ให้ทุกหน้า และซ่อนตอนพิมพ์ */ .view{padding-bottom:64px} body.ts-printing .view{padding-bottom:0} /* §dashFit (2026-09-11) · "เอาให้เต็มหน้าจอ ไม่ต้อง scroll" วัดที่ 1920x1080: dash-wrap สูง 1036 = 1080-44 พอดีเป๊ะ แต่หน้ายังเลื่อนได้ 20px ที่มา = .view padding-bottom 64 ข้างบนนี้ (− margin -22 ของ wrap − padding 22 ของ main = +20) หน้า dashboard ไม่ต้องเว้นที่ให้ป้ายก้นจอ เพราะป้าย la-refresh ย้ายขึ้นบนแล้ว (ป้าย la-viewonly ยังอยู่ก้นขวา แต่หน้านี้ไม่มีแถวล่างสุดให้บัง) */ #view-dashboard,#view-actionboard{padding-bottom:0} /* §abBoard ใช้กติกาเดียวกัน */ /* §laRefresh (2026-09-11) · ป้าย "มีข้อมูลใหม่" ของเดิมลอยกลางก้นจอ ทับบรรทัดล่างสุดของทุกหน้า จนต้องเว้น 64px ให้ทั้งแอป (§laBadgeGap ข้างบน) ย้ายมามุมขวาบนใต้ topbar · เป็นที่ของ "ข่าวจากระบบ" อยู่แล้ว และไม่ทับเนื้อหา */ /* §laRfLeft (2026-09-14) · "เฉพาะอันนี้ ย้ายไปอยู่มุมซ้ายล่างได้ไหม" มุมขวาบนใต้ topbar เป็นที่ที่ปุ่มของหน้าไปกองอยู่พอดี (ค้นหา · + New booking · ⋯) ป้ายนี้เด้งมาทับตอนคนกำลังจะกด · ย้ายมาซ้ายล่าง ซ้อนอยู่บนคอลัมน์ sidebar ซึ่งเป็นเลนของ "เรื่องของระบบ" อยู่แล้ว (ป้ายผู้ใช้อยู่ก้นคอลัมน์นี้) กว้างเท่าคอลัมน์ sidebar พอดี · ไม่ล้ำเข้าไปในเนื้อหาสักพิกเซล bottom 84 = ป้ายผู้ใช้สูง 65 + ระยะก้นจอ 10 + ช่องไฟ 9 · วัดที่ 1440x900 และ 1920x1080 max-width ไม่ใช้ width ตายตัว · จอเล็ก (≤820px) มีกติกาของตัวเองที่ทับค่าพวกนี้อยู่แล้ว */ #la-refresh{position:fixed;bottom:84px;left:14px;right:auto;top:auto;z-index:99999; display:flex;align-items:center;gap:10px;max-width:250px; background:#fff;color:#22262e;border:1px solid rgba(0,0,0,.10);border-radius:12px; padding:10px 11px 10px 12px;font:12.5px/1.35 'DM Sans',sans-serif; box-shadow:0 12px 32px rgba(2,10,30,.20);animation:laRfIn .22s ease-out} #la-refresh .la-rf-dot{width:8px;height:8px;border-radius:50%;background:#1D9E75;flex:none; animation:laRfPulse 1.9s ease-out infinite} #la-refresh .la-rf-tx{min-width:0;flex:1} #la-refresh .la-rf-tx b{display:block;font-size:12.5px;font-weight:800;color:#12518F;line-height:1.25} #la-refresh .la-rf-tx i{display:block;font-style:normal;font-size:10.5px;font-weight:600; color:#8a857d;margin-top:1px;line-height:1.3} #la-refresh button{background:#185FA5;color:#fff;border:none;border-radius:9px;padding:7px 11px; font:700 11.5px/1 'DM Sans',sans-serif;cursor:pointer;flex:none;white-space:nowrap} #la-refresh button:hover{background:#12518F} /* §laRfLeft · เด้งขึ้นจากก้นจอ · ของเดิมไหลลงมาจากข้างบนตอนยังอยู่มุมขวาบน */ @keyframes laRfIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} @keyframes laRfPulse{0%{box-shadow:0 0 0 0 rgba(29,158,117,.55)} 70%{box-shadow:0 0 0 7px rgba(29,158,117,0)}100%{box-shadow:0 0 0 0 rgba(29,158,117,0)}} /* §opsLoading (2026-10-13) · laOps.loadingHtml() · spinner while a view waits on operation-backend */ .la-ops-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; padding:56px 24px;min-height:180px;color:#7a766e;font:500 13px/1.4 'DM Sans',sans-serif;text-align:center; animation:laOpsLoadIn .25s ease-out both} .la-ops-loading-ring{width:30px;height:30px;border-radius:50%;border:3px solid rgba(22,131,199,.16); border-top-color:#1683C7;animation:laOpsSpin .8s linear infinite} @keyframes laOpsSpin{to{transform:rotate(360deg)}} @keyframes laOpsLoadIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.la-ops-loading-ring{animation-duration:2.4s}.la-ops-loading{animation:none}} /* §skel (2026-10-15) · grey shimmer placeholders shaped like the screen that is loading (laOps.skeletonHtml for Accounting, the booking calendar's first month load) */ .la-skel{display:block;position:relative;overflow:hidden;background:#E6EAF0;border-radius:6px;flex:none} .la-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:laSkelShine 1.4s ease-in-out infinite} @keyframes laSkelShine{to{transform:translateX(100%)}} .la-skel-wrap{animation:laOpsLoadIn .25s ease-out both} .la-skel-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px} .la-skel-card{flex:1;min-width:150px;background:#fff;border:0.5px solid var(--fd-line-soft,#E5E7EB);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:9px} .la-skel-table{background:#fff;border:0.5px solid var(--fd-line-soft,#E5E7EB);border-radius:12px;overflow:hidden} .la-skel-tr{display:flex;align-items:center;gap:18px;padding:11px 15px;border-top:0.5px solid var(--fd-line-soft,#EEF0F3)} .la-skel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (prefers-reduced-motion:reduce){.la-skel::after{animation:none}.la-skel-wrap{animation:none}} body.ts-printing #la-userbadge,body.ts-printing #la-viewonly,body.ts-printing #la-refresh{display:none!important} @media print{#la-userbadge,#la-viewonly,#la-refresh,#la-b2c-issues{display:none!important}} /* §b2cCheck (2026-10-03) · ใบ B2C ที่ต้องเช็ค · อยู่เลนเดียวกับ #la-refresh (คอลัมน์ sidebar ก้นซ้าย = "เรื่องของระบบ") ปิดอยู่กว้างเท่า sidebar ไม่ล้ำเนื้อหา · กดดูแล้วถึงจะขยายออก (คนกดเองแล้ว ทับเนื้อหาได้) ถ้า la-refresh ขึ้นพร้อมกัน ดัน la-refresh ขึ้นไปเหนือป้ายนี้ · ไม่งั้นซ้อนกันที่ 84px พอดี */ #la-b2c-issues{position:fixed;left:14px;bottom:84px;z-index:99990;width:250px;box-sizing:border-box; background:#FFF8EC;color:#7A4A00;border:1px solid #EAD9B0;border-radius:12px; font:12.5px/1.45 'DM Sans',sans-serif;box-shadow:0 12px 32px rgba(2,10,30,.16)} #la-b2c-issues.open{width:min(560px,calc(100vw - 28px))} body:has(#la-b2c-issues) #la-refresh{bottom:132px} /* §noticeMini (2026-10-13) · owner (ภาพป้ายสองอันทับตาราง) "ปรับอันนี้หน่อย เวลาเรายุบหน้าจอ" ยุบ sidebar แล้วเลนซ้ายแคบเหลือ 84px (เท่าป้ายผู้ใช้ตอนยุบ · 02-skins §sb-collapsed) แต่ป้ายสองอันยังกว้าง 250px เลยล้ำเข้าไปทับคอลัมน์แรกของตาราง · ตอนยุบให้แคบเท่าเลน: · มีข้อมูลใหม่ = ชื่อสั้นสองบรรทัด + ปุ่มโหลดเต็มความกว้าง · จุดเขียวไปอยู่มุม · ใบ B2C ที่ต้องเช็ค = ⚠ จำนวน + "B2C เช็ค" · กดแล้วรายการกางออกกว้างเหมือนเดิม (คนกดเองแล้ว ทับได้) */ .la-b2ci-sh{display:none} body.sb-collapsed #la-refresh{width:84px;max-width:84px;box-sizing:border-box;flex-direction:column;align-items:stretch; gap:6px;padding:9px 7px 7px;text-align:center} body.sb-collapsed #la-refresh .la-rf-dot{position:absolute;top:6px;right:6px} body.sb-collapsed #la-refresh .la-rf-tx b{font-size:10.5px;line-height:1.25} body.sb-collapsed #la-refresh .la-rf-tx i{display:none} body.sb-collapsed #la-refresh button{padding:6px 4px;font-size:11px} body.sb-collapsed #la-b2c-issues:not(.open){width:84px} body.sb-collapsed #la-b2c-issues:not(.open) .la-b2ci-full{display:none!important} body.sb-collapsed #la-b2c-issues:not(.open) .la-b2ci-sh{display:flex;flex-direction:column;align-items:center;padding:7px 4px;cursor:pointer} body.sb-collapsed #la-b2c-issues .la-b2ci-sh b{font-size:13px;line-height:1.2} body.sb-collapsed #la-b2c-issues .la-b2ci-sh i{font-style:normal;font-size:10px;font-weight:700;opacity:.8} body.sb-collapsed:has(#la-b2c-issues) #la-refresh{bottom:136px} .page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:12px} .page-hd h1{font-size:20px;font-weight:600;color:var(--ink)} .page-hd p{font-size:12px;color:var(--ink-soft);margin-top:2px} .page-actions{display:flex;gap:7px;flex-shrink:0} /* ── CARDS ── */ .card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)} .card-title{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px} .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--r-sm);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid} .btn svg{width:13px;height:13px} .btn-primary{background:var(--ocean);border-color:var(--ocean);color:#fff} .btn-primary:hover{background:var(--ocean-mid)} .btn-ghost{background:transparent;border-color:var(--border);color:var(--ink-mid)} .btn-ghost:hover{background:var(--sand)} .btn-sm{padding:5px 10px;font-size:11px} .btn-danger{background:transparent;border-color:var(--red-light);color:var(--red)} .btn-danger:hover{background:var(--red-light)} /* ── PILLS / BADGES ── */ .pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500} .pill::before{content:'';width:4px;height:4px;border-radius:50%} .pill-green{background:var(--green-light);color:var(--green-dark)}.pill-green::before{background:var(--green)} .pill-amber{background:var(--amber-light);color:#7a4a00}.pill-amber::before{background:var(--amber)} .pill-red{background:var(--red-light);color:var(--red)}.pill-red::before{background:var(--red)} .pill-blue{background:var(--ocean-50);color:var(--ocean)}.pill-blue::before{background:var(--ocean-mid)} .pill-purple{background:var(--purple-light);color:var(--purple)}.pill-purple::before{background:var(--purple)} .pill-gray{background:var(--sand-dark);color:var(--ink-soft)}.pill-gray::before{background:var(--ink-soft)} /* ── KPI CARDS ── */ .kpi{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow)} .kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:3px} .kpi.k-blue::after{background:var(--ocean-mid)} .kpi.k-coral::after{background:var(--coral)} .kpi.k-green::after{background:var(--green)} .kpi.k-amber::after{background:var(--amber)} .kpi-lbl{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:3px} .kpi-val{font-size:26px;font-weight:600;color:var(--ink);line-height:1} .kpi-sub{font-size:11px;color:var(--ink-soft);margin-top:3px} /* ── FILL BAR ── */ .fbar{height:5px;background:var(--sand-dark);border-radius:3px;overflow:hidden} .fbar-inner{height:100%;border-radius:3px;transition:width .3s} .fb-green{background:var(--green)}.fb-amber{background:var(--amber)}.fb-red{background:var(--red)} /* ── TABLE ── */ table{width:100%;border-collapse:collapse;font-size:12px} th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:7px 10px;border-bottom:1px solid var(--border)} td{padding:9px 10px;border-bottom:1px solid rgba(26,35,50,.05);vertical-align:middle} tr:last-child td{border-bottom:none} tr:hover td{background:rgba(26,35,50,.015)} .td-mono{font-family:'DM Mono',monospace;font-size:11px} .td-bold{font-weight:500} /* ── INPUTS ── */ select,input[type=date],input[type=text],input[type=number],input[type=time]{font-family:'DM Sans',sans-serif;font-size:12px;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--white);color:var(--ink);outline:none;transition:border-color .15s} select:focus,input:focus{border-color:var(--ocean-mid);box-shadow:0 0 0 3px rgba(26,127,160,.1)} .form-label{font-size:10px;font-weight:500;color:var(--ink-soft);margin-bottom:3px;display:block} .form-row{margin-bottom:10px} .form-2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .form-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} /* ── MODAL ── */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;align-items:center;justify-content:center} .modal-overlay.open{display:flex} .modal{background:var(--white);border-radius:var(--r-lg);max-width:420px;width:94%;box-shadow:0 20px 60px rgba(0,0,0,.2);position:relative;max-height:88vh;display:flex;flex-direction:column;overflow:hidden} .modal-hd{padding:14px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0} .modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1} .modal-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:7px;justify-content:flex-end;background:var(--sand);flex-shrink:0} .modal-title{font-size:14px;font-weight:600;color:var(--ink)} .modal-sub{font-size:11px;color:var(--ink-soft);margin-top:1px} .modal-close{margin-left:auto;width:28px;height:28px;border-radius:6px;border:none;background:var(--sand);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink-soft);flex-shrink:0} .modal-close:hover{background:var(--sand-dark)} /* ══════════════════════════════ DASHBOARD ══════════════════════════════ */ .dash-routes{display:flex;flex-direction:column;gap:8px} .dash-route-row{display:flex;align-items:center;gap:10px} .drt-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0} .drt-name{flex:1;font-size:12px} .drt-bar{flex:2} .drt-val{font-size:11px;font-family:'DM Mono',monospace;min-width:30px;text-align:right;color:var(--ink-soft)} /* ══════════════════════════════ CALENDAR ══════════════════════════════ */ .cal-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap} .cal-nav{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)} .cal-nav:hover{background:var(--ocean-light)} .cal-month{font-size:15px;font-weight:600;min-width:140px} .cal-grid-wd{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px} .cal-wd{text-align:center;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:5px 0} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .cal-day{min-height:100px;padding:5px 4px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--border);cursor:pointer;transition:all .15s;position:relative} .cal-day:hover{border-color:var(--ocean-mid);box-shadow:0 2px 8px rgba(10,79,110,.1)} .cal-day.empty{background:transparent;border-color:transparent;cursor:default} .cal-day.today{border-color:var(--ocean-mid);background:#f0f8ff} .cal-day-num{font-size:11px;font-weight:500;color:var(--ink-soft);line-height:1;margin-bottom:3px} .cal-day.today .cal-day-num{color:var(--ocean)} .cal-chip{display:flex;align-items:center;justify-content:space-between;border-radius:4px;padding:2px 4px;margin-bottom:2px;border-left:2px solid transparent;font-size:9px} .cal-chip-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:85px} .cal-chip-free{font-weight:600;font-size:11px;flex-shrink:0} .pier-sep{height:1px;background:var(--border);margin:3px 0} .pier-tiny{font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px} /* day detail */ .cal-detail{background:var(--white);border:1px solid var(--border);border-radius:var(--r);margin-top:12px;box-shadow:var(--shadow)} .cal-detail-hd{padding:12px 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .cal-detail-title{font-size:13px;font-weight:600} .cal-detail-body{padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px} .pier-section-title{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:6px} .detail-route-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(26,35,50,.05)} .detail-route-row:last-child{border-bottom:none} .drr-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0} .drr-info{flex:1;min-width:0} .drr-name{font-size:12px;font-weight:500} .drr-sub{font-size:10px;color:var(--ink-soft);margin-top:1px} .drr-free{font-size:20px;font-weight:600;text-align:right;flex-shrink:0;padding-left:8px} .drr-of{font-size:9px;color:var(--ink-soft);text-align:right} /* ══════════════════════════════ BOAT STATUS ══════════════════════════════ */ .boats-layout{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start} .boat-list-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .boat-list-hd{padding:10px 12px;border-bottom:1px solid var(--border)} .boat-list-scroll{max-height:520px;overflow-y:auto} .boat-item{padding:9px 12px;border-bottom:1px solid rgba(26,35,50,.05);cursor:pointer;border-left:3px solid transparent;transition:all .12s} .boat-item:last-child{border-bottom:none} .boat-item:hover{background:var(--sand)} .boat-item.sel{background:var(--ocean-50);border-left-color:var(--ocean-mid)} .boat-item.st-available{border-left-color:var(--green)} .boat-item.st-fixing{border-left-color:var(--amber)} .boat-item.st-unavailable{border-left-color:var(--red)} .bi-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px} .bi-name{font-size:12px;font-weight:500;color:var(--ink)} .bi-meta{font-size:10px;color:var(--ink-soft)} .bi-loc{font-size:10px;color:var(--ink-soft);margin-top:2px;display:flex;align-items:center;gap:3px} /* right detail */ .boat-detail-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:0;align-self:start} .bdp-empty{padding:60px 24px;text-align:center;color:var(--ink-soft)} .bdp-hd{padding:14px 16px 0;border-bottom:1px solid var(--border)} .bdp-name-row{display:flex;align-items:center;gap:8px;margin-bottom:10px} .bdp-name{font-size:15px;font-weight:600;color:var(--ink)} .name-input{font-size:15px;font-weight:600;border:none;border-bottom:2px solid var(--ocean-mid);outline:none;background:transparent;color:var(--ink);padding:1px 2px;width:180px;font-family:'DM Sans',sans-serif} .icon-btn{width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)} .icon-btn:hover{background:var(--sand)} .icon-btn.confirm{border-color:var(--green);background:var(--green-light)} .bdp-sub{font-size:11px;color:var(--ink-soft);margin-bottom:12px} .detail-tabs{display:flex;gap:0} .detail-tab{padding:7px 14px;font-size:11px;font-weight:500;cursor:pointer;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s} .detail-tab.on{color:var(--ocean);border-bottom-color:var(--ocean)} .detail-tab:hover{color:var(--ink)} .detail-body{padding:14px 16px} /* timeline */ .tl-entry{display:grid;grid-template-columns:12px 1fr;gap:0 10px;margin-bottom:0} .tl-dot-col{display:flex;flex-direction:column;align-items:center;padding-top:2px} .tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .tl-dot.g{background:var(--green);box-shadow:0 0 0 2px var(--green-light)} .tl-dot.a{background:var(--amber);box-shadow:0 0 0 2px var(--amber-light)} .tl-dot.r{background:var(--red);box-shadow:0 0 0 2px var(--red-light)} .tl-line{width:1.5px;background:var(--border);flex:1;margin-top:4px} .tl-body{padding-bottom:14px} .tl-entry:last-child .tl-line{display:none} .tl-entry:last-child .tl-body{padding-bottom:0} .tl-hd{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap} .cur-tag{font-size:9px;font-weight:600;background:var(--ocean);color:#fff;padding:1px 5px;border-radius:3px} .tl-dates{font-size:10px;font-family:'DM Mono',monospace;color:var(--ink-soft);margin-bottom:2px} .tl-loc{font-size:11px;color:var(--ink-mid);display:flex;align-items:center;gap:3px;margin-bottom:2px} .tl-note{font-size:10px;color:var(--ink-soft);font-style:italic;margin-bottom:3px} .tl-acts{display:flex;gap:5px;margin-top:4px} .btn-xs{font-size:10px;padding:2px 8px;border-radius:5px;border:1px solid var(--border);background:var(--white);color:var(--ink-soft);cursor:pointer} .btn-xs:hover{background:var(--sand)} .btn-xs.del{color:var(--red);border-color:rgba(185,52,40,.2)} .btn-xs.del:hover{background:var(--red-light)} /* gantt */ .gantt-controls{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap} .gantt-lbl{font-size:11px;color:var(--ink-mid);min-width:120px} .gantt-legend{display:flex;gap:10px;margin-left:auto} .gantt-lg-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--ink-soft)} .gantt-lg-dot{width:8px;height:8px;border-radius:2px} .gantt-wrap{overflow-x:auto} .gantt-tbl{border-collapse:collapse;width:100%;min-width:400px} .gantt-th{font-size:9px;color:var(--ink-soft);text-align:center;padding-bottom:4px;width:22px;min-width:22px;vertical-align:bottom} .gantt-th.today-col{background:rgba(26,127,160,.06)} .gantt-boat-cell{font-size:11px;padding:2px 8px 2px 0;white-space:nowrap;min-width:80px;vertical-align:middle} .gantt-day-cell{padding:1px;vertical-align:middle;width:22px;min-width:22px;position:relative} .gantt-day-cell.today-col{background:rgba(26,127,160,.06)} .gantt-bar{height:16px;border-radius:2px} .gantt-bar.g{background:var(--green)}.gantt-bar.a{background:var(--amber)}.gantt-bar.r{background:var(--red)}.gantt-bar.e{background:var(--sand-dark);opacity:.5} .gantt-today-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ocean-mid);opacity:.5;transform:translateX(-50%)} .sel-hl td{background:rgba(26,127,160,.04)!important} /* status type picker */ .st-picker{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-bottom:10px} .st-opt{border-radius:var(--r-sm);padding:9px 6px;text-align:center;cursor:pointer;border:1px solid var(--border);transition:all .12s} .st-opt:hover{border-color:var(--ocean-light)} .st-opt.sel-available{background:var(--green-light);border-color:var(--green)} .st-opt.sel-fixing{background:var(--amber-light);border-color:var(--amber)} .st-opt.sel-unavailable{background:var(--red-light);border-color:var(--red)} .st-opt-dot{width:7px;height:7px;border-radius:50%;margin:0 auto 4px} .st-opt-name{font-size:11px;font-weight:500} /* ══════════════════════════════ BOAT OPERATION (inline cell) ══════════════════════════════ */ .op-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow)} .op-sep{width:1px;height:18px;background:var(--border);margin:0 2px} .matrix-wrap{overflow-x:auto;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);max-height:calc(100vh - 220px)} .matrix-tbl{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed} .th-date{width:68px;min-width:68px;padding:6px 7px;background:var(--sand);border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);position:sticky;left:0;top:0;z-index:4} .th-boat{padding:5px 8px;background:var(--sand);border-right:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;min-width:230px;width:230px;position:sticky;top:0;z-index:3} .th-boat-name{font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .th-boat-cap{font-size:9px;color:var(--ink-soft);margin-top:1px} .td-date{padding:5px 8px;background:var(--sand);border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;left:0;z-index:1;vertical-align:middle;width:68px;min-width:68px} .td-date.today-row{background:var(--ocean-50)} .td-date-day{font-size:11px;font-weight:600;color:var(--ink);line-height:1} .td-date.today-row .td-date-day{color:var(--ocean)} .td-date-wd{font-size:9px;color:var(--ink-soft);margin-top:1px} .td-cell{padding:3px 6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);vertical-align:middle;width:230px;min-width:230px} .td-cell.unavail{background:repeating-linear-gradient(45deg,var(--sand),var(--sand) 4px,var(--sand-dark) 4px,var(--sand-dark) 8px)} .unavail-cell-inner{display:flex;align-items:center;justify-content:center;height:28px;gap:3px} .unavail-label{font-size:9px;color:var(--ink-soft)} .cell-line{display:flex;align-items:center;gap:4px;height:28px} .sel-route{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;border:1px solid var(--border);cursor:pointer;font-size:10px;font-weight:500;width:96px;min-width:96px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:border-color .1s;color:var(--ink-mid);background:var(--white)} .sel-route:hover{border-color:var(--ocean-mid)} .sel-route.empty{color:var(--ink-soft);font-style:italic;font-size:9px} .sel-route-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0} .sel-type-btn{padding:2px 7px;border-radius:20px;font-size:9px;font-weight:500;cursor:pointer;border:1px solid var(--border);color:var(--ink-soft);flex-shrink:0;background:var(--white);white-space:nowrap} .sel-type-btn:hover{background:var(--sand)} .sel-type-btn.early{background:#fff7d6;border-color:#d4a800;color:#7a5500} .sel-type-btn.normal{background:var(--white);border-color:var(--border);color:var(--ink-soft)} .sel-type-btn.charter{background:var(--purple-light);border-color:var(--purple);color:var(--purple)} .op-inp{width:34px;font-size:12px;font-weight:600;padding:2px 3px;border:1.5px solid var(--ocean-light);border-radius:4px;background:var(--ocean-50);color:var(--ink);text-align:center;font-family:'DM Mono',monospace;flex-shrink:0;-moz-appearance:textfield} .op-inp::-webkit-outer-spin-button,.op-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .op-inp:focus{border-color:var(--ocean-mid);outline:none;box-shadow:0 0 0 2px rgba(26,127,160,.15);background:var(--white)} .stepper{display:inline-flex;align-items:center;gap:2px;flex-shrink:0} .step-btn{width:16px;height:20px;border-radius:3px;border:1px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:11px;line-height:1;flex-shrink:0;user-select:none} .step-btn:hover{background:var(--sand);color:var(--ink)} .op-cap{font-size:9px;color:var(--ink-soft);flex-shrink:0} .op-free{font-size:10px;font-weight:600;flex-shrink:0;margin-left:auto;font-family:'DM Mono',monospace;white-space:nowrap} .op-free.ok{color:var(--green-dark)}.op-free.warn{color:#7a4a00}.op-free.full{color:var(--red)} /* portal dropdown — fixed position, appended to body */ #dd-portal{position:fixed;background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px;z-index:99999;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:none} #dd-portal.open{display:block} .dd-item{padding:5px 10px;border-radius:4px;font-size:11px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;gap:7px;white-space:nowrap} .dd-item:hover{background:var(--sand);color:var(--ink)} .dd-item.on{background:var(--ocean-50);color:var(--ocean);font-weight:500} .dd-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .dd-divider{height:1px;background:var(--border);margin:3px 0} /* ══════════════════════════════ SETTINGS / ROUTES ══════════════════════════════ */ .settings-layout{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:start} .settings-nav{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .settings-nav-title{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:10px 14px 6px} .settings-nav-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;cursor:pointer;color:var(--ink-soft);transition:all .12s} .settings-nav-item:hover{background:var(--sand);color:var(--ink)} .settings-nav-item.on{background:var(--ocean-50);color:var(--ocean);font-weight:500} .settings-nav-item svg{width:13px;height:13px;flex-shrink:0} .settings-content{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .settings-hd{padding:14px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .settings-title{font-size:14px;font-weight:600} .settings-sub{font-size:11px;color:var(--ink-soft);margin-top:1px} .pier-group-hd{padding:5px 18px 4px;background:var(--sand);border-bottom:1px solid var(--border);border-top:1px solid var(--border);display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:1} .pier-group-hd:first-child{border-top:none} .pgd{width:7px;height:7px;border-radius:50%} .pgd-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)} .pgd-count{font-size:9px;color:var(--ink-soft)} .route-row-item{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid rgba(26,35,50,.05);transition:background .1s} .route-row-item:last-child{border-bottom:none} .route-row-item:hover{background:var(--sand)} .rri-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0} .rri-name{font-size:12px;font-weight:500} .rri-sub{font-size:10px;color:var(--ink-soft);margin-top:1px} .rri-times{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px} .time-badge{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--sand);color:var(--ink-soft);border:1px solid var(--border)} .row-acts{display:flex;gap:4px;opacity:0;transition:opacity .15s} .route-row-item:hover .row-acts{opacity:1} .act-btn{width:24px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft)} .act-btn:hover{background:var(--sand)} .act-btn.del:hover{background:var(--red-light);border-color:var(--red-light);color:var(--red)} /* location picker */ .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px} .loc-opt{border-radius:var(--r-sm);padding:9px 10px;cursor:pointer;border:1px solid var(--border);transition:all .12s;display:flex;align-items:center;gap:8px} .loc-opt:hover{background:var(--sand)} .loc-opt.sel-tl{background:var(--ocean-50);border-color:var(--ocean-mid)} .loc-opt.sel-pn{background:var(--green-light);border-color:var(--green)} .loc-opt.sel-rn{background:var(--amber-light);border-color:var(--amber)} .loc-opt.sel-ot{background:#F3EAFB;border-color:#5B289A} /* §otherPier */ .loc-opt.sel-pn{background:var(--green-light);border-color:var(--green)} .loc-dot-big{width:9px;height:9px;border-radius:50%;flex-shrink:0} .loc-opt-name{font-size:11px;font-weight:500;color:var(--ink)} .loc-opt-sub{font-size:9px;color:var(--ink-soft)} /* times builder */ .time-row-inp{display:flex;align-items:center;gap:6px;margin-bottom:5px} .time-row-inp input{flex:1} .rm-time{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);flex-shrink:0} .rm-time:hover{background:var(--red-light);border-color:var(--red-light);color:var(--red)} .add-time-lnk{font-size:10px;color:var(--ocean);cursor:pointer;background:none;border:none;font-family:'DM Sans',sans-serif;padding:0} .add-time-lnk:hover{text-decoration:underline} /* ══════════════════════════════ DAILY AVAILABILITY ══════════════════════════════ */ .da-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:400px} .da-left{display:flex;flex-direction:column;gap:14px} .da-date-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)} .da-date-lbl{font-size:13px;font-weight:500;flex:1;text-align:center} .da-body{padding:10px 14px;overflow-y:auto;flex:1} .da-pier-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:10px 0 5px;display:flex;align-items:center;gap:5px} .da-pier-lbl:first-child{margin-top:0} .da-route-row{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid rgba(26,35,50,.05)} .da-route-row:last-child{border-bottom:none} .da-rr-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0} .da-rr-name{font-size:12px;font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .da-rr-free{font-size:17px;font-weight:600;flex-shrink:0;text-align:right} .da-rr-free.ok{color:var(--green-dark)} .da-rr-free.warn{color:#7a4a00} .da-rr-full{font-size:11px;font-weight:600;color:var(--red);flex-shrink:0} .da-rr-of{font-size:9px;color:var(--ink-soft);flex-shrink:0} .da-right{background:var(--white);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)} .da-preview-hd{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .da-preview-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)} .da-preview-hint{font-size:10px;color:var(--ink-soft)} .da-preview-text{display:inline-block;max-width:100%;box-sizing:border-box;padding:11px 14px;font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.75;color:#1a1a1a;white-space:pre-wrap;word-break:break-word;background:#fff;border-radius:4px 16px 16px 16px;cursor:text;user-select:all;box-shadow:0 1px 1px rgba(0,0,0,.08)} .da-copy-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-top:1px solid var(--border);cursor:pointer;font-size:12px;font-weight:500;color:var(--ocean);background:var(--white);border:none;width:100%;border-radius:0 0 var(--r) var(--r);border-top:1px solid var(--border);transition:background .12s} .da-copy-btn:hover{background:var(--ocean-50)} .da-copy-btn.done{color:var(--green);background:var(--green-light)} /* ── FILTER PILLS ── */ .filter-pills{display:flex;gap:5px;flex-wrap:wrap} .fp{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);color:var(--ink-soft);background:var(--white);transition:all .12s} .fp:hover{background:var(--sand)} .fp.on{background:var(--ocean-50);color:var(--ocean);border-color:var(--ocean-light)} /* scrollbar */ /* Fleet tabs */ .fl-tab-btn{padding:8px 14px;border-radius:0;font-size:12px;font-weight:500;cursor:pointer;color:var(--ink-soft);border:none;border-bottom:2px solid transparent;background:transparent;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:color .12s,border-color .12s} .fl-tab-btn.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600;background:rgba(10,79,110,.05)} .fl-tab-btn:hover:not(.active){color:var(--ink);background:var(--sand-dark)} .fl-tab-panel{display:none;flex-direction:column;gap:10px} .fl-tab-panel.active{display:flex} .fl-split{display:grid;grid-template-columns:220px 1fr;gap:10px;align-items:start} .fl-list-col{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:calc(100vh - 180px)} .fl-list-hd{padding:8px 12px;border-bottom:1px solid var(--border);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .fl-list-body-scroll{overflow-y:auto;flex:1} .fl-list-item{padding:9px 12px;border-bottom:1px solid rgba(26,35,50,.05);cursor:pointer;display:flex;align-items:flex-start;gap:8px} .fl-list-item:last-child{border-bottom:none} .fl-list-item:hover{background:var(--sand);color:var(--ink)} .fl-list-item.sel{background:var(--ocean-50);color:var(--ink)} .loc-pill{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);color:var(--ink-soft);background:var(--white);user-select:none} .loc-pill.on{background:var(--ocean-50);color:var(--navy);border-color:var(--ocean-light)} .fl-list-item.sel{background:var(--ocean-50)} .fl-detail-col{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .fl-empty-detail{display:flex;align-items:center;justify-content:center;height:160px;color:var(--ink-soft);font-size:12px} .fl-boat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.07);margin-bottom:8px} .fl-boat-card:last-child{margin-bottom:0} .fl-bc-hd{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--white);cursor:pointer;border-bottom:1px solid var(--border)} .fl-bc-body{padding:10px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:8px;background:var(--white)} .fl-eng-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:4px} .fl-ec-row{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-soft)} .fl-ec-val{color:var(--ink);font-weight:500;font-family:'DM Mono',monospace} .fl-ec-child{margin-top:4px;padding-top:4px;border-top:1px solid rgba(26,35,50,.08)} .fl-mj{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:12px;border-left:3px solid;box-shadow:var(--shadow)} .fl-mc-flow{display:flex;align-items:center;gap:3px;margin-top:4px;flex-wrap:wrap} .fl-mc-step{font-size:9px;padding:2px 6px;border-radius:20px;border:1px solid var(--border);color:var(--ink-soft)} .fl-mc-step.done{background:var(--green-light);border-color:var(--green);color:var(--green-dark)} .fl-mc-step.cur{background:var(--navy);border-color:var(--navy);color:#fff} .fl-mx-th-dt{width:64px;min-width:64px;padding:6px 7px;background:var(--sand);border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);position:sticky;left:0;z-index:2} .fl-mx-th-b{padding:5px 7px;background:var(--sand);border-right:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;min-width:185px;width:185px} .fl-mx-td-dt{padding:5px 7px;background:var(--sand);border-right:1px solid var(--border);border-bottom:1px solid var(--border);position:sticky;left:0;z-index:1;vertical-align:middle;width:64px;min-width:64px} .fl-mx-td-dt.today{background:var(--ocean-50)} .fl-mx-td-cell{padding:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);vertical-align:top;min-width:185px;width:185px;background:var(--white)} .fl-mx-td-cell.na{background:repeating-linear-gradient(45deg,var(--sand),var(--sand) 4px,var(--sand-dark) 4px,var(--sand-dark) 8px)} .fl-fuel-row{display:flex;align-items:center;gap:4px;padding:3px 6px;background:#fef3d8;border-bottom:1px solid rgba(196,122,16,.12)} .fl-fuel-inp{width:46px;font-size:10px;font-weight:600;font-family:'DM Mono',monospace;color:#7a4a00;background:rgba(196,122,16,.1);border:1px solid rgba(196,122,16,.2);border-radius:3px;padding:1px 3px;text-align:center} .fl-trip-block{border-bottom:1px solid rgba(26,35,50,.05)} .fl-trip-block:last-child{border-bottom:none} .fl-trip-hd{display:flex;align-items:center;gap:4px;padding:3px 6px;background:rgba(26,35,50,.02)} .fl-eng-rows{padding:2px 6px 3px} .fl-eng-row{display:flex;align-items:center;gap:4px;padding:1.5px 0} .fl-eng-pos{font-size:8px;color:var(--ink-soft);width:34px;flex-shrink:0;font-family:'DM Mono',monospace;font-weight:500} .fl-meter-inp{width:52px;font-size:10px;font-weight:600;font-family:'DM Mono',monospace;background:var(--ocean-50);border:1px solid rgba(26,127,160,.18);border-radius:3px;padding:1px 3px;text-align:center;color:var(--navy)} .fl-meter-inp:focus{outline:none;border-color:var(--ocean)} .fl-delta{font-size:9px;font-weight:500;font-family:'DM Mono',monospace;margin-left:auto;min-width:28px;text-align:right} .fl-dp{color:var(--green)}.fl-d0{color:#bbb} .da-pier-btn{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);color:var(--ink-soft);background:var(--white)} .da-pier-btn.active{background:var(--ocean-50);color:var(--navy);border-color:var(--ocean-light)} .fl-doc-filter-btn{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1.5px solid;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:all .1s} .fl-doc-filter-btn.active{box-shadow:0 0 0 2px rgba(0,0,0,.15)} .fl-doc-filter-all{background:#fff;border-color:var(--border-mid);color:var(--ink-mid)} .fl-doc-filter-all.active{background:var(--navy);border-color:var(--navy);color:#fff} .fl-doc-filter-expired{background:#fde8e6;border-color:#b93428;color:#b93428} .fl-doc-filter-expired.active{background:#b93428;border-color:#b93428;color:#fff} .fl-doc-filter-warn30{background:#fef3d8;border-color:#c47a10;color:#c47a10} .fl-doc-filter-warn30.active{background:#c47a10;border-color:#c47a10;color:#fff} .fl-doc-filter-warn90{background:#fff7e6;border-color:#e09020;color:#9a5c00} .fl-doc-filter-warn90.active{background:#e09020;border-color:#e09020;color:#fff} .fl-doc-filter-ok{background:#d6f0e5;border-color:#2d8a5e;color:#1a5c3d} .fl-doc-filter-ok.active{background:#2d8a5e;border-color:#2d8a5e;color:#fff} .fl-doc-view-btn{padding:4px 12px;border-radius:5px;font-size:11px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--ink-soft);font-family:'DM Sans',sans-serif} .fl-doc-view-btn.active{background:var(--navy);color:#fff} /* doc matrix */ .doc-mx{border-collapse:collapse;font-size:11px;width:100%;table-layout:fixed} .doc-mx-th-boat{width:120px;min-width:120px;padding:7px 10px;background:#f0eeea;border:0.5px solid var(--border);text-align:left;font-size:11px;font-weight:600;color:#1a2332;position:sticky;left:0;z-index:3;white-space:nowrap} .doc-mx-th-group{padding:6px 6px;border:0.5px solid rgba(0,0,0,.1);text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .doc-mx-th-doc{padding:5px 4px;border:0.5px solid rgba(0,0,0,.08);text-align:center;font-size:9px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px} .doc-mx-td-boat{padding:7px 10px;background:var(--white);border:0.5px solid var(--border);position:sticky;left:0;z-index:2;white-space:nowrap} .doc-mx-td{padding:4px 3px;border:0.5px solid var(--border);text-align:center;background:var(--white)} .doc-mx-group-sep{border-left:2px solid rgba(0,0,0,.15) !important} .th-grp-track{background:#ede9f6;color:#4a3578} .td-grp-track{background:#e8e4f5;color:#4a3578} .cell-grp-track{background:#faf9fe} .th-grp-ins{background:#c0dd97;color:#27500a} .th-grp-park{background:#f5c4b3;color:#712b13} .td-grp-govt{background:#ddeaf8;color:#185fa5} .td-grp-ins{background:#d5e8c0;color:#3b6d11} .td-grp-park{background:#f2c4ae;color:#993c1d} .cell-grp-govt{background:var(--white)} .cell-grp-ins{background:var(--white)} .cell-grp-park{background:var(--white)} .inv-tab{font-size:12px;padding:7px 14px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px} .inv-tab.on{color:var(--ink);border-bottom-color:var(--navy);font-weight:500};border-radius:var(--r);cursor:pointer;text-align:left;transition:all .12s;background:var(--white)} .job-type-card:hover{background:var(--sand);border-color:var(--border)} .job-type-card.on{border-color:var(--ocean);background:var(--ocean-50);box-shadow:0 0 0 1px var(--ocean)} .doc-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;font-size:10px;font-weight:500;padding:3px 7px;min-width:60px;white-space:nowrap;cursor:default;text-align:center} .doc-chip-ok{background:#d6f0e5;color:#1a5c3d;border:1px solid #2d8a5e} .doc-chip-warn90{background:#fef3d8;color:#7a4a00;border:1px solid #c47a10} .doc-chip-warn30{background:#fde8e6;color:#b93428;border:1px solid #b93428} .doc-chip-exp{background:#fde8e6;color:#b93428;border:2px solid #b93428;font-weight:700} .doc-chip-na{background:var(--sand);color:var(--ink-soft);border:1px solid var(--border)} .doc-chip-processing{background:#e6f1fb;color:#0c447c;border:1px solid #378add;font-weight:600} .doc-chip-renewed{background:#e6f1fb;color:#0c447c;border:1px solid #378add;font-weight:600} /* doc inline edit popup */ .doc-edit-popup{position:fixed;background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow-md);z-index:999;min-width:240px;display:none} .doc-edit-popup.open{display:block} .dep-title{font-size:11px;font-weight:600;color:var(--ink);margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:6px} .dep-row{display:flex;flex-direction:column;gap:3px;margin-bottom:8px} .dep-lbl{font-size:10px;color:var(--ink-soft);font-weight:500} .dep-status-grid{display:flex;gap:4px;margin-bottom:8px} .dep-st{flex:1;padding:5px 4px;border-radius:5px;border:1px solid var(--border);text-align:center;font-size:10px;font-weight:500;cursor:pointer;color:var(--ink-soft);background:var(--white)} .dep-st.active-exp{background:#fde8e6;border-color:#b93428;color:#b93428} .dep-st.active-processing{background:#e6f1fb;border-color:#378add;color:#0c447c} .dep-st.active-ok{background:#d6f0e5;border-color:#2d8a5e;color:#1a5c3d} .dep-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;border-top:1px solid var(--border);padding-top:8px} .h-bar{height:4px;background:rgba(26,35,50,.08);border-radius:2px;overflow:hidden;margin-top:3px} .h-bar-inner{height:100%;border-radius:2px} .section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)} /* Filter bar (above sidebar+main) */ .ag-filter-bar{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow);margin-bottom:14px;display:flex;flex-direction:column;gap:8px} .ag-filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ag-filter-lbl{font-size:10px;font-weight:600;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;min-width:50px} .ag-filter-bar .filter-pills{display:flex;gap:5px;flex-wrap:wrap} .ag-filter-bar .fp{padding:3px 9px;border-radius:14px;font-size:11px;color:var(--ink-mid);background:var(--sand);border:1px solid var(--border);cursor:pointer;font-weight:500;transition:all .12s;display:inline-flex;align-items:center;gap:0} .ag-filter-bar .fp:hover{background:var(--sand-dark)} .ag-filter-bar .fp.on{background:var(--ink);color:#fff;border-color:var(--ink)} .ag-filter-bar .fp-cnt{margin-left:5px;padding:0 5px;font-size:9px;font-family:'DM Mono',monospace;background:rgba(0,0,0,.08);border-radius:8px;line-height:1.5} .ag-filter-bar .fp.on .fp-cnt{background:rgba(255,255,255,.2)} /* A-Z letter headers */ .sb-az-hd{padding:6px 14px 3px;font-size:10px;font-weight:600;color:var(--sb-pink-dark);background:linear-gradient(to right,var(--sb-pink-light) 0%, transparent 100%);letter-spacing:.05em;font-family:'DM Mono',monospace;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1} /* Sales badge in agent row */ .sb-sales-badge{flex-shrink:0;font-size:9px;font-weight:600;letter-spacing:.04em;padding:2px 6px;border-radius:8px;font-family:'DM Mono',monospace} /* Sales avatar in detail */ .sales-avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;font-family:'DM Mono',monospace;flex-shrink:0} /* ── Team & Markets module ── */ .tm-row{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:0.5px solid var(--border);transition:all .12s} /* rows that carry a drag grip get one extra leading column — Sales rows (no grip) stay 3-col */ .tm-row.tm-drag{grid-template-columns:16px 42px 1fr auto;gap:10px} .tm-row.tm-drag .la-grip{opacity:0;transition:opacity .12s} .tm-row.tm-drag:hover .la-grip{opacity:1} .tm-row:hover{background:var(--sand)} .tm-row:last-child{border-bottom:none} .tm-color-chip{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;font-family:'DM Mono',monospace;letter-spacing:.02em;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)} .tm-row-info{min-width:0;display:flex;flex-direction:column;gap:2px} .tm-row-name{font-size:13px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:8px} .tm-row-meta{font-size:10px;color:var(--ink-soft);font-family:'DM Mono',monospace;letter-spacing:.04em} .tm-row-meta-pill{display:inline-block;padding:1px 6px;font-size:9px;background:var(--sand-dark);border-radius:8px;color:var(--ink-mid);margin-right:3px;font-family:'DM Mono',monospace} /* §salesActive · ป้ายสถานะเซลล์ + แถว inactive หรี่ลง + สวิตช์ในโมดัล */ .tm-status{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.04em;vertical-align:2px} .tm-status.on{background:#D2F0DA;color:#1E5631} .tm-status.off{background:#ECEDF4;color:#5F6477} .tm-row.tm-inactive .tm-color-chip,.tm-row.tm-inactive .tm-row-info{opacity:.55} .tm-row.tm-inactive .tm-row-name{text-decoration:line-through;text-decoration-color:#9AA0B4;text-decoration-thickness:1px} .tm-switch{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 0} .tm-switch input{width:16px;height:16px;accent-color:#1E5631;margin:0} .tm-switch-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:800} .tm-switch-pill.on{background:#D2F0DA;color:#1E5631} .tm-switch-pill.off{background:#ECEDF4;color:#5F6477} .tm-switch-note{font-size:11px;color:var(--ink-soft)} .tm-row-actions{display:flex;gap:4px;flex-shrink:0;opacity:.4;transition:opacity .12s} .tm-row:hover .tm-row-actions{opacity:1} .tm-icon-btn{width:26px;height:26px;border-radius:5px;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-mid);transition:all .12s} .tm-icon-btn:hover{background:var(--ocean-50);border-color:var(--ocean-mid);color:var(--ocean)} .tm-icon-btn.danger:hover{background:var(--red-light);border-color:var(--red);color:var(--red)} .tm-icon-btn svg{width:12px;height:12px} .tm-empty{padding:30px 18px;text-align:center;color:var(--ink-soft);font-size:12px} /* Modal */ .tm-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center} .tm-modal-backdrop{position:absolute;inset:0;background:rgba(15,31,46,0.5);backdrop-filter:blur(2px)} .tm-modal-card{position:relative;background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.18);width:420px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden} .tm-modal-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .tm-modal-ttl{font-size:14px;font-weight:600;color:var(--ink)} .tm-modal-x{background:transparent;border:none;font-size:18px;cursor:pointer;color:var(--ink-soft);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%} .tm-modal-x:hover{background:var(--sand)} .tm-modal-body{padding:18px;overflow-y:auto;flex:1} .tm-modal-actions{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--sand-mid)} .tm-fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .tm-fld-lbl{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)} .tm-fld input,.tm-fld textarea{padding:8px 10px;font-size:12px;font-family:'DM Sans',sans-serif;border:1px solid var(--border);border-radius:var(--r-sm);outline:none;transition:all .12s;color:var(--ink)} .tm-fld input:focus,.tm-fld textarea:focus{border-color:var(--sb-pink);box-shadow:0 0 0 3px var(--sb-pink-light)} .tm-color-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:4px} .tm-color-sw{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .12s;position:relative} .tm-color-sw:hover{transform:scale(1.08)} .tm-color-sw.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset} .tm-color-sw.custom{background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#a55eea);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600} .tm-color-hex{margin-top:8px;display:flex;align-items:center;gap:8px} .tm-color-hex .preview{width:32px;height:32px;border-radius:6px;border:1px solid var(--border)} .tm-color-hex input{flex:1;font-family:'DM Mono',monospace;font-size:12px} /* Sales row fullname display */ .tm-row-fullname{font-size:11px;color:var(--ink-mid);margin-top:1px;font-weight:500} .tm-row-fullname-pos{font-size:10px;color:var(--ink-soft);font-weight:400;letter-spacing:.02em} /* Signature upload */ .tm-sig-upload{margin-top:4px} .tm-sig-drop{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:18px 14px;border:1.5px dashed var(--border);border-radius:var(--r-sm); background:var(--sand);cursor:pointer;transition:all .15s;color:var(--ink-soft); font-size:11px;font-weight:500; } .tm-sig-drop:hover{border-color:var(--sb-pink);background:var(--sb-pink-light);color:var(--sb-pink-dark)} .tm-sig-drop svg{width:22px;height:22px;stroke:currentColor} .tm-sig-preview{ position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-sm); padding:10px;display:flex;align-items:center;justify-content:center;min-height:80px; } .tm-sig-preview img{max-height:80px;max-width:100%;object-fit:contain} .tm-sig-remove{ position:absolute;top:6px;right:6px; width:22px;height:22px;border-radius:50%;border:none; background:rgba(0,0,0,.5);color:#fff;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; } .tm-sig-remove:hover{background:#A32D2D} .tm-sig-remove svg{width:11px;height:11px} /* ══════════ ADD-ON SERVICES (Config) ══════════ */ #view-addonsvc{ --aos-bg:#fafaf8;--aos-card:#fff; --aos-line:rgba(0,0,0,.05);--aos-line-soft:rgba(0,0,0,.04); --aos-ink:#1a1a1a;--aos-ink-mid:#5a5a5a;--aos-ink-soft:#999;--aos-ink-faint:#cccccc; --aos-coral:#ff6b47;--aos-coral-soft:#fde4dc;--aos-coral-veryfaint:#fef5f0;--aos-coral-deep:#d44521; --aos-green:#0F6E56;--aos-green-soft:#E1F5EE; --aos-blue:#185FA5;--aos-blue-soft:#E6F1FB; --aos-amber:#854F0B;--aos-amber-soft:#FAEEDA; background:var(--aos-bg); } #view-addonsvc .page-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} #view-addonsvc .page-hd h1{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--aos-ink)} #view-addonsvc .page-hd p{font-size:12px;color:var(--aos-ink-soft);margin-top:4px} #view-addonsvc .aos-btn-primary{background:var(--aos-coral);border:none;border-radius:24px;padding:9px 18px;font-size:12px;font-weight:600;color:#fff;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px} #view-addonsvc .aos-btn-primary:hover{background:var(--aos-coral-deep)} #view-addonsvc .aos-btn-primary svg{width:13px;height:13px} #view-addonsvc .aos-btn-ghost{background:#fff;border:1px solid var(--aos-line);border-radius:24px;padding:9px 18px;font-size:12px;font-weight:600;color:var(--aos-ink);cursor:pointer;font-family:inherit} #view-addonsvc .aos-btn-ghost:hover{background:var(--aos-bg)} #view-addonsvc .aos-svc-card{background:var(--aos-card);border:1px solid var(--aos-line);border-radius:22px;margin-bottom:14px;overflow:hidden} #view-addonsvc .aos-svc-hd{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--aos-line-soft)} #view-addonsvc .aos-svc-hd-l{display:flex;align-items:center;gap:14px;flex:1;min-width:0} #view-addonsvc .aos-svc-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} #view-addonsvc .aos-svc-icon svg{width:16px;height:16px} #view-addonsvc .aos-svc-icon.boat{background:var(--aos-blue-soft);color:var(--aos-blue)} #view-addonsvc .aos-svc-icon.van{background:var(--aos-amber-soft);color:var(--aos-amber)} #view-addonsvc .aos-svc-icon.guide{background:var(--aos-coral-soft);color:var(--aos-coral-deep)} #view-addonsvc .aos-svc-icon.other{background:var(--aos-green-soft);color:var(--aos-green)} #view-addonsvc .aos-svc-info{display:flex;flex-direction:column;gap:2px;min-width:0} #view-addonsvc .aos-svc-ttl{font-size:14px;font-weight:700;color:var(--aos-ink);letter-spacing:-0.005em;display:flex;align-items:center;gap:8px} #view-addonsvc .aos-svc-cnt{font-size:11px;color:var(--aos-ink-soft);font-family:'DM Mono',monospace;font-weight:500} #view-addonsvc .aos-svc-desc{font-size:11px;color:var(--aos-ink-soft)} #view-addonsvc .aos-svc-actions{display:flex;align-items:center;gap:6px} #view-addonsvc .aos-used-by{font-size:9px;font-weight:600;color:var(--aos-green);background:var(--aos-green-soft);padding:3px 8px;border-radius:8px;font-family:'DM Mono',monospace;letter-spacing:.02em} #view-addonsvc .aos-icon-btn{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--aos-line);color:var(--aos-ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s} #view-addonsvc .aos-icon-btn:hover{background:var(--aos-bg);color:var(--aos-ink)} #view-addonsvc .aos-icon-btn.danger:hover{background:#FCEBEB;color:#A32D2D;border-color:#FCEBEB} #view-addonsvc .aos-icon-btn svg{width:11px;height:11px} #view-addonsvc .aos-svc-body{padding:12px 22px 18px} #view-addonsvc .aos-variants{display:flex;flex-direction:column;gap:6px} #view-addonsvc .aos-variant-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 14px;background:var(--aos-bg);border-radius:12px} #view-addonsvc .aos-variant-info{display:flex;flex-direction:column;gap:2px;min-width:0} #view-addonsvc .aos-variant-ttl{font-size:13px;font-weight:600;color:var(--aos-ink);letter-spacing:-0.005em} #view-addonsvc .aos-variant-unit{font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--aos-ink-soft);font-family:'DM Mono',monospace} #view-addonsvc .aos-variant-actions{display:flex;gap:5px;flex-shrink:0} #view-addonsvc .aos-variant-add{background:transparent;border:1px dashed var(--aos-line);border-radius:12px;padding:9px 14px;color:var(--aos-ink-soft);font-size:11px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit} #view-addonsvc .aos-variant-add:hover{border-color:var(--aos-coral);color:var(--aos-coral-deep);background:var(--aos-coral-veryfaint)} #view-addonsvc .aos-variant-add svg{width:11px;height:11px} #view-addonsvc .aos-svc-add{background:transparent;border:1px dashed var(--aos-line);border-radius:18px;padding:14px 16px;color:var(--aos-ink-soft);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;font-family:inherit} #view-addonsvc .aos-svc-add:hover{border-color:var(--aos-coral);color:var(--aos-coral-deep);background:var(--aos-coral-veryfaint)} #view-addonsvc .aos-svc-add svg{width:13px;height:13px} #view-addonsvc .aos-hint{background:var(--aos-blue-soft);border:1px dashed #b8d4ed;border-radius:18px;padding:14px 18px;margin-top:18px;font-size:12px;color:var(--aos-blue);line-height:1.5;display:flex;gap:10px} #view-addonsvc .aos-hint svg{width:14px;height:14px;flex-shrink:0;margin-top:1px} #view-addonsvc .aos-hint strong{color:var(--aos-blue)} /* Modal */ #view-addonsvc .aos-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center} #view-addonsvc .aos-modal-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.4);backdrop-filter:blur(2px)} #view-addonsvc .aos-modal-card{position:relative;background:#fff;border-radius:18px;box-shadow:0 16px 48px rgba(0,0,0,.15);width:90%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden} #view-addonsvc .aos-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--aos-line-soft)} #view-addonsvc .aos-modal-ttl{font-size:16px;font-weight:700;color:var(--aos-ink);letter-spacing:-0.01em} #view-addonsvc .aos-modal-x{width:30px;height:30px;border-radius:50%;border:none;background:var(--aos-bg);color:var(--aos-ink-mid);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center} #view-addonsvc .aos-modal-x:hover{background:#FCEBEB;color:#A32D2D} #view-addonsvc .aos-modal-body{padding:20px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px} #view-addonsvc .aos-modal-actions{padding:14px 22px;border-top:1px solid var(--aos-line-soft);display:flex;justify-content:flex-end;gap:8px} #view-addonsvc .aos-fld{display:flex;flex-direction:column;gap:5px} #view-addonsvc .aos-fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} #view-addonsvc .aos-fld-lbl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--aos-ink-soft)} #view-addonsvc .aos-fld-lbl .req{color:var(--aos-coral)} #view-addonsvc .aos-fld input,#view-addonsvc .aos-fld textarea,#view-addonsvc .aos-fld select{padding:8px 12px;font-size:12px;font-family:inherit;border:1px solid var(--aos-line);border-radius:10px;outline:none;transition:all .12s;color:var(--aos-ink);background:#fff} #view-addonsvc .aos-fld textarea{resize:vertical;min-height:50px} #view-addonsvc .aos-fld input:focus,#view-addonsvc .aos-fld textarea:focus,#view-addonsvc .aos-fld select:focus{border-color:var(--aos-coral);box-shadow:0 0 0 3px var(--aos-coral-veryfaint)} #view-addonsvc .aos-fld-hint{font-size:10px;color:var(--aos-ink-soft);font-style:italic} #view-addonsvc .aos-icon-picker{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} #view-addonsvc .aos-icon-sw{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s} #view-addonsvc .aos-icon-sw.on{border-color:var(--aos-coral)} #view-addonsvc .aos-icon-sw svg{width:14px;height:14px} #view-addonsvc .aos-icon-sw.boat{background:var(--aos-blue-soft);color:var(--aos-blue)} #view-addonsvc .aos-icon-sw.van{background:var(--aos-amber-soft);color:var(--aos-amber)} #view-addonsvc .aos-icon-sw.guide{background:var(--aos-coral-soft);color:var(--aos-coral-deep)} #view-addonsvc .aos-icon-sw.other{background:var(--aos-green-soft);color:var(--aos-green)} #view-addonsvc .aos-empty{text-align:center;padding:36px 18px;color:var(--aos-ink-soft);font-size:13px;font-style:italic} /* update agent row to better fit new structure */ .sb-ag-row{padding:7px 12px 7px 16px;font-size:12px;color:var(--ink-mid);cursor:pointer;display:flex;align-items:center;gap:8px;border-left:2px solid transparent;transition:all .12s} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--sand-dark);border-radius:3px} /* ══════════ SALES & BOOKING MODULES ══════════ */ /* Shared module palette */ :root{ --sb-pink:#d44a7f;--sb-pink-light:#fde6ee;--sb-pink-dark:#8c2d52; --sb-bg:#faf7f4; /* Core Panel indigo palette — for Agent List redesign */ --cp-accent:#5B6CFF; --cp-accent-soft:#eef0ff; --cp-accent-lavender:#e5e8ff; --cp-accent-deep:#4250e0; --cp-bg:#f7f7fb; --cp-card:#ffffff; --cp-border:#eceef2; --cp-border-soft:#f2f3f7; --cp-ink:#1a1d2e; --cp-ink-mid:#4a4f63; --cp-ink-soft:#9ea4b5; --cp-ink-faint:#c9cdd9; --cp-green:#22b07a; --cp-green-soft:#dff5e9; --cp-red:#e85959; --cp-red-soft:#fae0e0; --cp-amber:#e8a32c; --cp-amber-soft:#fcf2db; --cp-shadow:0 1px 3px rgba(28,30,40,.04), 0 1px 2px rgba(28,30,40,.03); --cp-shadow-md:0 4px 12px rgba(28,30,40,.06); } /* ══════════ AGENT LIST — Financial Dashboard (FinDash) Visual Language ══════════ */ /* Bento style, coral accent, big numbers, dot+name minimal filters, white chips on near-white bg */ :root{ --fd-bg:#fafaf8; --fd-card:#ffffff; --fd-line:rgba(0,0,0,.05); --fd-line-soft:rgba(0,0,0,.04); --fd-ink:#1a1a1a; --fd-ink-mid:#5a5a5a; --fd-ink-soft:#999; --fd-ink-faint:#cccccc; --fd-coral:#ff6b47; --fd-coral-soft:#fde4dc; --fd-coral-veryfaint:#fef5f0; --fd-coral-deep:#d44521; --fd-r:22px; --fd-r-md:18px; } /* Page surface — near-white bleed */ #view-agents{background:var(--fd-bg);margin:-22px;padding:24px 26px 32px;min-height:calc(100vh - 44px);color:var(--fd-ink);font-family:Manrope,-apple-system,system-ui,sans-serif} /* Force Manrope on all descendants — overrides any inherited 'DM Sans' / 'DM Mono' from global rules */ #view-agents, #view-agents *, #view-agents input, #view-agents button, #view-agents select, #view-agents textarea, #view-agents table, #view-agents th, #view-agents td{font-family:Manrope,-apple-system,system-ui,sans-serif} /* Page header */ #view-agents .page-hd{margin-bottom:18px;padding:6px 4px 14px;border-bottom:none;display:flex;align-items:center;justify-content:space-between;gap:14px} #view-agents .page-hd > div:first-child{display:flex;align-items:center;gap:14px} #view-agents .page-hd h1{font-size:24px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:var(--fd-ink)} #view-agents .page-hd h1 span{font-size:11px!important;font-weight:500;color:var(--fd-ink-soft)!important;background:#fff;padding:3px 10px;border-radius:14px;border:1px solid var(--fd-line);margin-left:8px!important;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle} #view-agents .page-hd p{font-size:13px;color:var(--fd-ink-soft);margin-top:3px;font-weight:400} /* Buttons */ #view-agents .page-actions{display:flex;gap:8px} #view-agents .page-actions .btn{font-family:inherit;border-radius:24px;font-size:12px;font-weight:600;padding:9px 18px;letter-spacing:0;transition:all .12s;border:none} #view-agents .page-actions .btn-ghost{background:#fff;color:var(--fd-ink);border:1px solid var(--fd-line);box-shadow:none} #view-agents .page-actions .btn-ghost:hover{background:#fafaf8} #view-agents .page-actions .btn-pink{background:var(--fd-coral);color:#fff;padding:9px 20px;box-shadow:none} #view-agents .page-actions .btn-pink:hover{background:var(--fd-coral-deep)} /* ═══ KPI ROW — first card = Daily Report style ═══ */ #view-agents .sb-kpi-row{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:12px;margin-bottom:14px;align-items:stretch} /* First KPI — daily-report (hero) style */ #view-agents .sb-kpi:nth-child(1){ background:transparent;border:none;padding:14px 22px 14px 6px;box-shadow:none; display:flex;flex-direction:column;justify-content:space-between;gap:4px; border-right:1px solid var(--fd-line);overflow:visible; } #view-agents .sb-kpi:nth-child(1)::after{display:none} #view-agents .sb-kpi:nth-child(1) .sb-kpi-lbl{font-size:14px;font-weight:500;color:var(--fd-ink-faint);letter-spacing:-0.01em;line-height:1.1;text-transform:none;margin-bottom:0} #view-agents .sb-kpi:nth-child(1) .sb-kpi-val{font-size:54px;font-weight:700;letter-spacing:-0.04em;color:var(--fd-ink);line-height:.95;font-variant-numeric:tabular-nums;display:inline-block;margin:4px 0 0} #view-agents .sb-kpi:nth-child(1) .sb-kpi-val::after{content:'AGENTS';font-size:24px;font-weight:600;color:var(--fd-ink-faint);letter-spacing:-0.015em;margin-left:10px;display:inline-block} #view-agents .sb-kpi:nth-child(1) .sb-kpi-sub{font-size:13px;color:var(--fd-ink-soft);font-weight:500;letter-spacing:-0.005em;line-height:1.3;font-family:Manrope,-apple-system,system-ui,sans-serif;margin-top:8px} /* Other KPI cards — solid white with coral icon */ #view-agents .sb-kpi:nth-child(n+2){background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--fd-r);padding:18px 20px;box-shadow:none;position:relative;display:flex;flex-direction:column} #view-agents .sb-kpi:nth-child(n+2)::after{display:none} #view-agents .sb-kpi.k-blue{background:linear-gradient(135deg, var(--fd-coral-soft) 0%, #fff 100%);border-color:var(--fd-coral-soft)} #view-agents .sb-kpi.k-blue .sb-kpi-val{color:var(--fd-coral-deep)} #view-agents .sb-kpi:nth-child(n+2) .sb-kpi-lbl{font-size:11px;color:var(--fd-ink-soft);font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:0} #view-agents .sb-kpi:nth-child(n+2) .sb-kpi-val{font-size:28px;font-weight:700;letter-spacing:-0.02em;color:var(--fd-ink);line-height:1.05;margin-top:3px;font-variant-numeric:tabular-nums;font-family:Manrope,-apple-system,system-ui,sans-serif} #view-agents .sb-kpi:nth-child(n+2) .sb-kpi-sub{font-size:11px;color:var(--fd-ink-soft);margin-top:10px;font-family:Manrope,-apple-system,system-ui,sans-serif;letter-spacing:0;font-weight:400} /* ═══ FILTER BAR ═══ — C1 minimal dot style, white pills on near-white bg */ #view-agents .ag-filter-bar{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;margin-bottom:14px;display:flex;flex-direction:column;gap:8px} #view-agents .ag-filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--fd-line);border-radius:18px;padding:10px 14px} #view-agents .ag-filter-lbl{font-size:11px;color:var(--fd-ink-soft);font-weight:600;min-width:50px;text-transform:lowercase;letter-spacing:0;padding-right:6px;border-right:1px solid var(--fd-line-soft);margin-right:2px} #view-agents .ag-filter-bar .filter-pills{background:transparent;border:none;border-radius:0;padding:0;display:flex;gap:5px;flex-wrap:wrap;flex:1} /* Inactive chip — transparent on white card, hover = subtle */ #view-agents .ag-filter-bar .fp{padding:5px 12px 5px 8px;border-radius:18px;font-size:11px;color:var(--fd-ink-mid);background:transparent;border:none;font-weight:500;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .12s} #view-agents .ag-filter-bar .fp:hover{background:var(--fd-bg)} #view-agents .ag-filter-bar .fp.on{font-weight:700;color:var(--fd-ink);background:#eeece6} #view-agents .ag-filter-bar .fp.on::after{content:''} /* Count chip (small) — shown only when inactive */ #view-agents .ag-filter-bar .fp-cnt{font-size:9px;font-variant-numeric:tabular-nums;color:var(--fd-ink-soft);font-weight:600;background:transparent;padding:0;margin:0} #view-agents .ag-filter-bar .fp.on .fp-cnt{display:none} /* The dot in front — inactive = small circle, active = pill with count */ #view-agents .ag-filter-bar .fp > span:first-child{display:inline-flex;align-items:center;justify-content:center;width:10px;height:10px;border-radius:50%;flex-shrink:0;color:transparent;font-size:0;transition:all .15s;margin-right:0} /* ═══ LAYOUT ═══ — 320px sidebar + detail */ #view-agents .sb-wrap{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:flex-start} /* ═══ SIDEBAR ═══ */ #view-agents .sb-side{background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--fd-r);box-shadow:none;overflow:hidden;position:sticky;top:14px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;padding:0} #view-agents .sb-side-hd{padding:16px 18px 12px;border-bottom:1px solid var(--fd-line-soft);background:transparent;display:flex;align-items:center;justify-content:space-between;flex-shrink:0} #view-agents .sb-side-hd-ttl{font-size:14px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.01em;text-transform:none} #view-agents #ag-list-count{font-variant-numeric:tabular-nums!important;font-size:10px!important;color:var(--fd-coral-deep)!important;font-weight:600!important;background:var(--fd-coral-soft)!important;padding:2px 9px!important;border-radius:10px!important;border:none!important;margin:0!important} #view-agents #ag-search{background:var(--fd-bg);border:none!important;padding:6px 12px!important;width:130px!important;font-size:11px!important;color:var(--fd-ink);border-radius:20px!important;font-family:Manrope,-apple-system,system-ui,sans-serif;outline:none!important} #view-agents #ag-search:focus{background:#fff;box-shadow:0 0 0 1px var(--fd-line)!important} #view-agents .sb-side-body{padding:8px 10px;flex:1;overflow-y:auto} /* A-Z headers */ #view-agents .sb-az-hd{padding:14px 8px 6px;font-size:11px;font-weight:700;color:var(--fd-ink-faint);background:transparent;letter-spacing:.04em;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--fd-line-soft);position:static;display:flex;align-items:center;gap:6px;margin-bottom:4px} #view-agents .sb-az-hd::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fd-ink-faint);display:inline-block} /* Agent row */ #view-agents .sb-ag-row{padding:9px 10px;font-size:13px;color:var(--fd-ink);display:flex;align-items:center;gap:11px;border:1px solid transparent;border-radius:14px;margin-top:3px;cursor:pointer;transition:background .12s;background:transparent} #view-agents .sb-ag-row:hover{background:var(--fd-bg)} #view-agents .sb-ag-row.sel{background:var(--fd-coral-soft);border-color:rgba(255,107,71,.25)} #view-agents .sb-ag-row.sel::before{display:none} /* Avatar — circular 34px FinDash style */ #view-agents .sb-ag-dot{width:34px!important;height:34px!important;border-radius:50%!important;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;font-family:Manrope,-apple-system,system-ui,sans-serif;letter-spacing:-0.01em;flex-shrink:0;box-shadow:none} #view-agents .sb-ag-row .sb-ag-row-name-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} #view-agents .sb-ag-row .sb-ag-row-name-wrap > div:first-child{display:flex;align-items:center;gap:6px} #view-agents .sb-ag-row .sb-ag-row-name-wrap > div:first-child > span{font-size:13px;font-weight:600;color:var(--fd-ink);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-agents .sb-ag-row .sb-ag-row-name-wrap > div:last-child{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:none;font-weight:400} #view-agents .sb-ag-row.sel .sb-ag-row-name-wrap > div:last-child{color:var(--fd-coral-deep)} /* Sales badge */ #view-agents .sb-sales-badge{flex-shrink:0;font-size:9px!important;font-weight:700!important;letter-spacing:.04em!important;padding:3px 8px!important;border-radius:10px!important;font-variant-numeric:tabular-nums!important;text-transform:uppercase} /* Chevron */ #view-agents .sb-ag-row::after{content:'›';color:var(--fd-ink-faint);font-size:16px;flex-shrink:0;margin-left:2px;padding-left:2px} #view-agents .sb-ag-row.sel::after{color:var(--fd-coral-deep)} /* ── List row · sharper details (market color · payment · programs · contract status) ── */ #view-agents .sb-ag-row{padding:8px 10px} #view-agents .sb-ag-row .sb-ag-row-name-wrap > div:first-child > span{font-size:13.5px;font-weight:600;letter-spacing:-.01em} #view-agents .ag-row-meta{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden} #view-agents .ag-row-mkt{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} #view-agents .ag-row-sub{font-size:9px;color:var(--fd-ink-faint);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500} #view-agents .ag-pay-chip{font-size:8px;font-weight:700;letter-spacing:.03em;padding:1px 5px;border-radius:4px;font-family:'DM Mono',monospace;white-space:nowrap;flex-shrink:0} #view-agents .ag-prog-chip{font-size:8px;font-weight:700;color:var(--fd-ink-soft);background:#EEF0F3;border-radius:4px;padding:1px 5px;font-family:'DM Mono',monospace;white-space:nowrap;flex-shrink:0} #view-agents .ag-ct-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;box-shadow:0 0 0 2px rgba(255,255,255,.7)} /* ═══ DETAIL PANEL ═══ */ #view-agents .sb-main{background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--fd-r);box-shadow:none;overflow:hidden;min-height:500px;padding:0} #view-agents .sb-main-hd{padding:18px 22px 18px 26px;border-bottom:1px solid var(--fd-line-soft);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fff} #view-agents .sb-main-ttl{font-size:18px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.01em;display:flex;align-items:center;gap:10px} #view-agents .sb-main-ttl .sb-chip{font-size:10px!important;font-weight:600!important;color:var(--fd-coral-deep)!important;background:var(--fd-coral-soft)!important;padding:3px 9px!important;border-radius:10px!important;font-variant-numeric:tabular-nums!important;letter-spacing:.04em} #view-agents .sb-main-sub{font-size:12px;color:var(--fd-ink-soft);margin-top:3px;font-family:Manrope,-apple-system,system-ui,sans-serif;letter-spacing:0;text-transform:none;font-weight:400} #view-agents .sb-main-hd .btn{font-family:inherit;border-radius:50%;width:34px;height:34px;padding:0;font-size:0;border:1px solid var(--fd-line);background:#fff;color:var(--fd-ink-mid);display:inline-flex;align-items:center;justify-content:center} #view-agents .sb-main-hd .btn:hover{background:var(--fd-bg)} #view-agents .sb-main-hd .btn.btn-danger:hover{background:#FCEBEB;border-color:#A32D2D;color:#A32D2D} #view-agents .sb-main-hd .btn svg{width:13px;height:13px} /* Tabs */ #view-agents .sb-tabs{padding:0 22px;background:#fff;border-bottom:1px solid var(--fd-line-soft);gap:0} #view-agents .sb-tab{padding:12px 16px;font-size:12px;font-weight:500;color:var(--fd-ink-soft);border-bottom:2px solid transparent;letter-spacing:0;text-transform:none;background:transparent} #view-agents .sb-tab:hover{color:var(--fd-ink)} #view-agents .sb-tab.on{color:var(--fd-ink);border-bottom-color:var(--fd-coral);font-weight:700} #view-agents .sb-main-body{padding:18px 22px} #view-agents .sb-main .sb-empty{padding:80px 22px;color:var(--fd-ink-soft);font-size:13px;text-align:center} /* ═══ Contract Document Wizard (Phase 1: shell) ═══ */ .ct-doc-modal{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center} .ct-doc-backdrop{position:absolute;inset:0;background:rgba(15,20,25,.55)} .ct-doc-card{position:relative;width:96%;max-width:1400px;height:92vh;background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.3);font-family:Manrope,-apple-system,system-ui,sans-serif} .ct-doc-hd{padding:14px 22px;background:#fff;border-bottom:1px solid #E0DED8;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0} .ct-doc-hd-l{display:flex;align-items:center;gap:14px;flex:1;min-width:0} .ct-doc-hd-icon{width:34px;height:34px;border-radius:8px;background:#1A2B43;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ct-doc-hd-icon svg{width:16px;height:16px} .ct-doc-hd-ttl{font-size:15px;font-weight:700;color:#0F1419;letter-spacing:-0.01em} .ct-doc-hd-sub{font-size:11px;color:#7a7770;margin-top:2px;font-variant-numeric:tabular-nums} .ct-doc-hd-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .ct-doc-lang{display:inline-flex;background:#F5F4EE;border-radius:18px;padding:3px;gap:2px} .ct-doc-lang-btn{background:transparent;border:none;border-radius:14px;padding:5px 14px;font-size:11px;font-weight:600;color:#5F5E5A;cursor:pointer;font-family:inherit} .ct-doc-lang-btn.on{background:#fff;color:#0F1419;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)} .ct-doc-act{background:#fff;border:1px solid #E0DED8;border-radius:18px;padding:6px 14px;font-size:11px;font-weight:600;color:#1a1a1a;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px} .ct-doc-act:hover{background:#FAFAF6} .ct-doc-act.primary{background:#1A2B43;color:#fff;border-color:#1A2B43} .ct-doc-act.primary:hover{background:#0F1929} .ct-doc-x{background:transparent;border:1px solid #E0DED8;border-radius:50%;width:32px;height:32px;cursor:pointer;color:#5F5E5A;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:14px} .ct-doc-x:hover{background:#FCEBEB;color:#A32D2D;border-color:#A32D2D} .ct-doc-body{display:flex;flex:1;min-height:0;overflow:hidden} .ct-doc-side{width:340px;background:#F5F4EE;border-right:1px solid #E0DED8;overflow-y:auto;padding:18px 14px;flex-shrink:0} .ct-doc-side-hd{font-size:10px;font-weight:700;color:#5F5E5A;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;padding:0 4px} .ct-doc-sec{background:#fff;border:1px solid #E0DED8;border-radius:10px;padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .12s,background .12s;font-family:inherit} .ct-doc-sec:hover{border-color:#9b9590} .ct-doc-sec.on{border-color:#0F6E56;background:#F4FBF7} .ct-doc-sec.required{border-color:#185FA5;background:#F4F8FB;cursor:not-allowed} .ct-doc-sec-cb{width:16px;height:16px;border-radius:3px;border:1.5px solid #9b9590;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff} .ct-doc-sec.on .ct-doc-sec-cb{background:#0F6E56;border-color:#0F6E56;color:#fff} .ct-doc-sec.required .ct-doc-sec-cb{background:#185FA5;border-color:#185FA5;color:#fff} .ct-doc-sec-cb::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px;opacity:0} .ct-doc-sec.on .ct-doc-sec-cb::after, .ct-doc-sec.required .ct-doc-sec-cb::after{opacity:1} .ct-doc-sec-name{flex:1;min-width:0;font-size:12px;font-weight:600;color:#0F1419;letter-spacing:-0.005em} .ct-doc-sec-num{font-size:9px;font-weight:700;color:#9b9590;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase} .ct-doc-sec-meta{font-size:9.5px;color:#7a7770;margin-top:1px} .ct-doc-sec-tag{font-size:9px;font-weight:700;color:#185FA5;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;background:#E6F1FB;padding:2px 7px;border-radius:6px} .ct-doc-sec.required .ct-doc-sec-tag{background:#185FA5;color:#fff} .ct-doc-side-divider{height:1px;background:#E0DED8;margin:14px 4px} .ct-doc-preview{flex:1;min-width:0;overflow-y:auto;background:#E5E2D9;padding:30px 40px;display:flex;flex-direction:column;align-items:center;gap:20px} /* §A4 เป๊ะ · 794px = 210mm และ 1123px = 297mm ที่ 96dpi — preview ต้องเป็นกระดาษจริง เดิม min-height:1080px (285.8mm) = เตี้ยกว่า A4 อยู่ 11mm → เนื้อหาที่พอดีบนจอ ล้นตอนพิมพ์ */ .ct-doc-page{width:100%;max-width:794px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.12);padding:0;border-radius:2px;position:relative;min-height:1123px;display:flex;flex-direction:column;flex-shrink:0} .ct-doc-page-num{position:absolute;bottom:14px;right:24px;font-size:9.5px;color:#9b9590;font-family:Manrope,monospace;font-variant-numeric:tabular-nums} .ct-doc-page-foot{position:absolute;bottom:14px;left:24px;font-size:9.5px;color:#9b9590} /* Editable text in Phase 3 · dashed outline + edit cursor when wizard is in Edit mode */ .ct-doc-edit{outline:1px dashed transparent;outline-offset:3px;border-radius:3px;padding:1px 4px;margin:0 -4px;transition:outline-color .12s,background .12s;cursor:text} .ct-doc-edit:hover{outline-color:#A8773B;background:#FFF7E8} .ct-doc-edit:focus{outline:1.5px solid #A8773B;background:#FFF7E8} .ct-doc-clause-card{background:#FAFAF6;border:1px solid #E0DED8;border-radius:6px;padding:14px 18px;margin-bottom:10px;position:relative} .ct-doc-clause-rm{position:absolute;top:8px;right:8px;background:transparent;border:none;color:#A32D2D;font-size:14px;cursor:pointer;padding:4px 7px;border-radius:5px;line-height:1;opacity:0;transition:opacity .12s,background .12s} .ct-doc-clause-card:hover .ct-doc-clause-rm{opacity:.85} .ct-doc-clause-rm:hover{background:#FCEBEB;opacity:1!important} .ct-doc-add-clause{background:transparent;border:1.5px dashed #C8C6BF;color:#7a7770;font-size:11.5px;font-weight:600;padding:10px 16px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit;width:100%;justify-content:center;transition:all .12s} .ct-doc-add-clause:hover{border-color:#A8773B;color:#A8773B;background:#FFF7E8} /* Print: when user prints the wizard, the modal is moved to be a direct body child (via JS). Then we hide all other body children and let the modal render at top of the page. */ @media print { /* §ระยะขอบ · เดิม margin:10mm 0 → เบราว์เซอร์กินขอบบน-ล่างไป 20mm แล้ว .ct-doc-page ถูกบีบเหลือ 277mm แต่ preview บนจอสูง 285.8mm (min-height:1080px) → คนละขนาดกระดาษ PDF เลยไม่ตรงกับที่เห็น ตอนนี้ @page ไม่มีขอบเลย (แถบ navy ต้องชนขอบกระดาษอยู่แล้ว) และ .ct-doc-page เป็นเจ้าของ A4 เต็มใบ 210×297mm เอง · ระยะขอบทั้งหมดมาจาก padding ของหน้าเอกสาร = ตัวเดียวกับที่ preview ใช้ */ @page { size: A4 portrait; margin: 0; } /* Hide all direct body children except the modal */ body.ct-doc-printing > *:not(#ct-doc-modal) { display: none !important; } body.ct-doc-printing { margin: 0 !important; padding: 0 !important; background: #fff !important; } /* Modal: take it out of overlay mode, render in normal flow */ body.ct-doc-printing #ct-doc-modal { position: static !important; display: block !important; background: #fff !important; inset: auto !important; align-items: stretch !important; justify-content: flex-start !important; } body.ct-doc-printing .ct-doc-backdrop { display: none !important; } body.ct-doc-printing .ct-doc-hd, body.ct-doc-printing .ct-doc-side, body.ct-doc-printing #ct-doc-toast { display: none !important; } /* Reset modal card and body to render as a plain container */ body.ct-doc-printing .ct-doc-card { position: static !important; width: 100% !important; max-width: none !important; height: auto !important; box-shadow: none !important; border-radius: 0 !important; background: #fff !important; display: block !important; } body.ct-doc-printing .ct-doc-body { display: block !important; height: auto !important; overflow: visible !important; } body.ct-doc-printing .ct-doc-preview { background: #fff !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; height: auto !important; display: block !important; align-items: stretch !important; } /* Each page card IS one A4 sheet · same box as the on-screen preview (794×1123px = 210×297mm) */ body.ct-doc-printing .ct-doc-page { box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; page-break-after: always; break-after: page; max-width: none !important; width: 210mm !important; min-height: 297mm !important; height: 297mm !important; /* กล่องเท่ากระดาษเป๊ะ → footer/เลขหน้า (absolute bottom) เกาะก้นกระดาษจริง */ overflow: hidden !important; /* กันเนื้อหาเกินหลุดไปสร้างกระดาษเปล่าใบที่ 2 */ display: flex !important; flex-direction: column !important; box-sizing: border-box !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body.ct-doc-printing .ct-doc-page:last-child { page-break-after: auto; break-after: auto; } /* Remove editable outlines + cursors */ body.ct-doc-printing .ct-doc-edit { outline: none !important; background: transparent !important; cursor: default !important; } /* Avoid splitting tables / rows / clauses across pages */ body.ct-doc-printing .ct-doc-page table { page-break-inside: avoid; break-inside: avoid; } body.ct-doc-printing .ct-doc-page thead { display: table-header-group; } body.ct-doc-printing .ct-doc-page tr { page-break-inside: avoid; break-inside: avoid; } body.ct-doc-printing .ct-doc-clause-card { page-break-inside: avoid; break-inside: avoid; } /* Force the coral letterhead background to print (Chrome/Safari default skips bg colors) */ body.ct-doc-printing .ct-doc-page > *:first-child, body.ct-doc-printing .ct-doc-page aside { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } } /* ═══ RATE TYPES PAGE — reuse Agent List sidebar+main layout ═══ */ /* Match Dashboard fonts — Manrope everywhere, numbers use tabular-nums (no DM Mono) */ #view-rate-types{font-family:Manrope,-apple-system,system-ui,sans-serif} #view-rate-types .page-hd h1, #view-rate-types .sb-side-hd-ttl, #view-rate-types .sb-main, #view-rate-types .sb-side, #view-rate-types button, #view-rate-types input, #view-rate-types table, #view-rate-types th, #view-rate-types td{font-family:Manrope,-apple-system,system-ui,sans-serif} #view-rate-types .num, #view-rate-types .sb-rt-dot, #view-rate-types .sb-rt-vchip, #view-rate-types .sb-az-hd, #view-rate-types #rt-list-count{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;font-family:Manrope,-apple-system,system-ui,sans-serif} #view-rate-types .sb-wrap{display:grid;grid-template-columns:400px 1fr;gap:14px;align-items:flex-start} #view-rate-types .sb-side{background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--fd-r);overflow:hidden;position:sticky;top:14px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;padding:0} #view-rate-types .sb-side-hd{padding:16px 18px 12px;border-bottom:1px solid var(--fd-line-soft);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px} #view-rate-types .sb-side-hd-ttl{font-size:14px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.01em;display:flex;align-items:center;gap:6px} #view-rate-types #rt-list-count{font-variant-numeric:tabular-nums;font-size:10px;color:var(--fd-coral-deep);font-weight:600;background:var(--fd-coral-soft);padding:2px 9px;border-radius:10px;border:none} #view-rate-types #rt-search{background:var(--fd-bg);border:none;padding:6px 12px;width:130px;font-size:11px;color:var(--fd-ink);border-radius:20px;font-family:Manrope,-apple-system,system-ui,sans-serif;outline:none} #view-rate-types #rt-search:focus{background:#fff;box-shadow:0 0 0 1px var(--fd-line)} #view-rate-types .sb-side-body{padding:8px 10px;flex:1;overflow-y:auto} #view-rate-types .sb-az-hd{padding:14px 8px 6px;font-size:11px;font-weight:700;color:var(--fd-ink-faint);letter-spacing:.04em;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--fd-line-soft);display:flex;align-items:center;gap:6px;margin-bottom:4px;text-transform:uppercase} #view-rate-types .sb-az-hd::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fd-ink-faint);display:inline-block} #view-rate-types .sb-rt-row{padding:9px 10px;font-size:13px;color:var(--fd-ink);display:flex;align-items:center;gap:11px;border:1px solid transparent;border-radius:14px;margin-top:3px;cursor:pointer;transition:background .12s;background:transparent;position:relative} #view-rate-types .sb-rt-row:hover{background:var(--fd-bg)} #view-rate-types .sb-rt-row.sel{background:var(--fd-coral-soft);border-color:rgba(255,107,71,.25)} #view-rate-types .sb-rt-row.inactive{opacity:.55} #view-rate-types .sb-rt-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;flex-shrink:0} #view-rate-types .sb-rt-row .sb-rt-name-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} #view-rate-types .sb-rt-row .sb-rt-name-wrap > div:first-child{display:flex;align-items:center;gap:6px} #view-rate-types .sb-rt-row .sb-rt-name-wrap > div:first-child > span.rt-name{font-size:13px;font-weight:600;color:var(--fd-ink);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-rate-types .sb-rt-row .sb-rt-name-wrap > div:last-child{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:400} #view-rate-types .sb-rt-row .sb-rt-valid{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;margin-top:2px;white-space:nowrap} #view-rate-types .sb-rt-row.sel .sb-rt-name-wrap > div:last-child{color:var(--fd-coral-deep)} #view-rate-types .sb-rt-row::after{content:'›';color:var(--fd-ink-faint);font-size:16px;flex-shrink:0;margin-left:2px;padding-left:2px} #view-rate-types .sb-rt-row.sel::after{color:var(--fd-coral-deep)} #view-rate-types .sb-rt-vchip{font-size:9px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:8px;font-variant-numeric:tabular-nums;text-transform:uppercase;flex-shrink:0} #view-rate-types .sb-main{background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--fd-r);overflow:hidden;min-height:500px;padding:0} #view-rate-types .sb-empty{padding:80px 22px;color:var(--fd-ink-soft);font-size:13px;text-align:center} /* 3-column variant — when in "agents" view mode */ #view-rate-types .sb-wrap.three-col{grid-template-columns:280px 1fr 340px} #view-rate-types .sb-third{background:var(--fd-card);border:1px solid var(--fd-line);border-radius:var(--fd-r);overflow:hidden;min-height:500px;padding:0;position:sticky;top:14px;max-height:calc(100vh - 60px);display:flex;flex-direction:column} #view-rate-types .sb-third-hd{padding:16px 18px 12px;border-bottom:1px solid var(--fd-line-soft);flex-shrink:0} #view-rate-types .sb-third-hd-ttl{font-size:14px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.01em;display:flex;align-items:center;gap:6px} #view-rate-types .sb-third-body{padding:12px 14px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px} #view-rate-types .rt-ag-card{background:#fff;border:1px solid var(--fd-line);border-radius:12px;padding:10px 12px;display:flex;align-items:flex-start;gap:10px;transition:all .12s;cursor:pointer} #view-rate-types .rt-ag-card:hover{border-color:var(--fd-ink-faint);background:#fafaf8} #view-rate-types .rt-ag-card.sel{background:var(--fd-coral-soft);border-color:rgba(255,107,71,.3)} #view-rate-types .rt-ag-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums} #view-rate-types .rt-ag-body{flex:1;min-width:0} #view-rate-types .rt-ag-name{font-size:13px;font-weight:600;color:var(--fd-ink);letter-spacing:-0.005em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-rate-types .rt-ag-meta{font-size:10px;color:var(--fd-ink-soft);margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.4} #view-rate-types .rt-ag-sub{font-size:9.5px;color:var(--fd-ink-faint);margin-top:3px;line-height:1.3} #view-rate-types .rt-ag-x{background:transparent;border:none;color:var(--fd-ink-faint);font-size:13px;cursor:pointer;padding:2px 5px;border-radius:6px;line-height:1;align-self:flex-start;opacity:0;transition:opacity .12s} #view-rate-types .rt-ag-card:hover .rt-ag-x{opacity:.7} #view-rate-types .rt-ag-x:hover{background:#FCEBEB;color:#A32D2D;opacity:1!important} #view-rate-types .rt-mkt-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} #view-rate-types .rt-mkt-pill{padding:3px 9px;font-size:10px;border-radius:10px;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--fd-ink-soft);font-weight:500;font-family:inherit} #view-rate-types .rt-mkt-pill:hover{background:var(--fd-bg)} #view-rate-types .rt-mkt-pill.on{background:#eeece6;color:var(--fd-ink);font-weight:700} #view-rate-types .rt-agg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:10px 14px;border-top:1px solid var(--fd-line-soft);flex-shrink:0;background:#fafaf8} #view-rate-types .rt-agg-card{background:#fff;border-radius:10px;padding:8px 10px;text-align:center} #view-rate-types .rt-agg-lbl{font-size:9.5px;color:var(--fd-ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.04em} #view-rate-types .rt-agg-val{font-size:16px;font-weight:700;color:var(--fd-ink);margin-top:2px;font-variant-numeric:tabular-nums;line-height:1} /* Meta cards — FinDash bento style */ #view-agents .sb-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} #view-agents .sb-meta-card{background:var(--fd-bg);border:none;border-radius:var(--fd-r-md);padding:14px 16px;display:flex;flex-direction:column;gap:5px;box-shadow:none} #view-agents .sb-meta-lbl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-ink-soft);margin-bottom:2px} #view-agents .sb-meta-val{font-size:14px;color:var(--fd-ink);font-weight:600;letter-spacing:-0.005em} #view-agents .sb-meta-val.mono{font-variant-numeric:tabular-nums;font-size:13px} /* Sales person card — coral border-left highlight */ #view-agents .sb-meta-card[style*="border-left:3px solid"]{background:var(--fd-coral-soft)!important;border-left:none!important;display:flex;flex-direction:row;align-items:center;gap:12px;grid-column:span 2} #view-agents .sb-meta-card[style*="border-left:3px solid"] > div:first-child{flex-shrink:0} #view-agents .sales-avatar{width:42px;height:42px;border-radius:50%;font-size:12px;font-weight:700} /* Chips inside detail */ #view-agents .sb-chip{font-size:10px;font-weight:600;padding:3px 9px;border-radius:10px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:4px;text-transform:uppercase} #view-agents .sb-chip.pink{background:var(--fd-coral-soft);color:var(--fd-coral-deep)} #view-agents .sb-chip.blue{background:#E6F1FB;color:#185FA5} #view-agents .sb-chip.green{background:#E1F5EE;color:#0F6E56} #view-agents .sb-chip.amber{background:#FAEEDA;color:#854F0B} /* Pricing matrix table */ #view-agents .sb-price-tbl{font-size:11px;border-collapse:collapse;width:100%} #view-agents .sb-price-tbl th{font-size:9px;letter-spacing:.05em;font-weight:700;color:var(--fd-coral-deep);background:var(--fd-coral-soft);border-bottom:1px solid var(--fd-coral-soft);border-right:1px solid rgba(212,69,33,.12);padding:8px 10px;text-transform:uppercase} #view-agents .sb-price-tbl td{padding:9px 10px;border-bottom:1px solid var(--fd-line-soft);border-right:1px solid var(--fd-line-soft);color:var(--fd-ink)} #view-agents .sb-price-tbl tr:hover td{background:var(--fd-bg)} #view-agents .sb-price-tbl tr.prog-row td{background:var(--fd-bg)!important;font-weight:600} #view-agents .sb-price-tbl .prog-name{font-size:12px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.005em} #view-agents .sb-price-tbl .prog-pier{font-size:9px;color:var(--fd-ink-soft);text-transform:uppercase;letter-spacing:.05em;font-family:Manrope,-apple-system,system-ui,sans-serif;margin-top:1px;font-weight:500} /* Recent bookings table */ /* §agSum · ตัวสรุปแยกเดือน × ทริป เหนือตาราง Recent Bookings */ #view-agents .agsum{border:1px solid var(--fd-line);border-radius:12px;margin:0 0 14px;background:#fff;overflow:hidden} #view-agents .agsum-hd{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--fd-line-soft);flex-wrap:wrap} #view-agents .agsum-hd b{font-size:12.5px;color:var(--fd-ink)} #view-agents .agsum-sub{font-size:10.5px;color:var(--fd-ink-soft)} #view-agents .agsum-hd .sp{flex:1} #view-agents .agsum-md{border:1px solid var(--fd-line);background:#fff;color:var(--fd-ink);border-radius:99px;padding:4px 12px;font:600 11px inherit;font-family:inherit;cursor:pointer} #view-agents .agsum-md.on{background:var(--fd-ink);border-color:var(--fd-ink);color:#fff} #view-agents .agsum-md:disabled{opacity:.45;cursor:not-allowed} #view-agents .agsum-sc{overflow-x:auto} #view-agents .agsum-t{border-collapse:collapse;width:100%;font-size:11px} #view-agents .agsum-t th{font-size:9.5px;letter-spacing:.04em;font-weight:700;color:var(--fd-ink-soft); background:var(--fd-bg);border-bottom:1px solid var(--fd-line);padding:7px 10px;text-align:right;white-space:nowrap} /* §agSum · เอเย่นต์ที่ขายหลายโปรแกรม ตารางจะกว้างจนต้องเลื่อนแนวนอน ช่องเดือนต้องตรึงซ้ายไว้ ไม่งั้นเลื่อนไปแล้วไม่รู้ว่าตัวเลขที่มองอยู่เป็นของเดือนไหน */ #view-agents .agsum-t th.m,#view-agents .agsum-t td.m{text-align:left;white-space:nowrap; font-family:'DM Mono',monospace;font-size:11.5px;color:var(--fd-ink);font-weight:600; position:sticky;left:0;z-index:2;background:#fff} #view-agents .agsum-t thead th.m{background:var(--fd-bg);z-index:3} #view-agents .agsum-t tbody tr:hover td.m{background:var(--fd-bg)} #view-agents .agsum-t tfoot td.m{background:#0F172A} #view-agents .agsum-t td{padding:7px 10px;border-bottom:1px solid var(--fd-line-soft);text-align:right;white-space:nowrap} #view-agents .agsum-t td b{display:block;font-family:'DM Mono',monospace;font-size:13px;font-weight:700; color:var(--fd-ink);line-height:1.15;letter-spacing:-.02em} #view-agents .agsum-t td i{display:block;font-style:normal;font-family:'DM Mono',monospace;font-size:10px; color:var(--fd-ink-soft);margin-top:1px} #view-agents .agsum-t td .z{color:#CBD5E1} #view-agents .agsum-t th.sum,#view-agents .agsum-t td.sum{background:var(--fd-bg);border-left:2px solid var(--fd-line)} #view-agents .agsum-t th.dead,#view-agents .agsum-t td.dead{border-left:2px solid var(--fd-line)} #view-agents .agsum-t td.dead b{color:#A32D2D} #view-agents .agsum-t td.dead i{color:#C98A8A} #view-agents .agsum-t tbody tr:hover td{background:var(--fd-bg)} #view-agents .agsum-t tfoot td{background:#0F172A;color:#fff;border-bottom:0;padding:8px 10px} #view-agents .agsum-t tfoot td b{color:#fff} #view-agents .agsum-t tfoot td i{color:#94A3B8} #view-agents .agsum-t tfoot td.m{color:#fff} #view-agents .agsum-t tfoot td.sum{background:#1E293B} #view-agents .agsum-t tfoot td.dead b{color:#FCA5A5} #view-agents .agsum-ft{font-size:10.5px;color:var(--fd-ink-soft);padding:8px 13px;line-height:1.6} #view-agents .bk-recent-tbl{font-size:11px;border-collapse:collapse;width:100%} #view-agents .bk-recent-tbl th{font-size:9px;letter-spacing:.05em;font-weight:600;color:var(--fd-ink-soft);background:var(--fd-bg);border-bottom:1px solid var(--fd-line-soft);padding:8px 11px;text-transform:uppercase} #view-agents .bk-recent-tbl td{padding:9px 11px;border-bottom:1px solid var(--fd-line-soft);color:var(--fd-ink)} #view-agents .bk-recent-tbl tr:hover td{background:var(--fd-bg)} #view-agents .bk-recent-tbl .bk-id{font-variant-numeric:tabular-nums;font-size:10px;color:var(--fd-ink-soft);letter-spacing:.04em} #view-agents .pill{padding:2px 8px;border-radius:8px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em} /* ══════════ BOOKING · 3-TAB PAGE (P1 rework) ══════════ */ /* Calendar+Matrix · By trip+date · All bookings · DM Sans body + DM Mono numbers · NAVY accents */ #view-booking{ font-family:'DM Sans',sans-serif;color:var(--ink);background:transparent; /* Navy palette · scoped to Booking only · matches letterhead Variant C */ --bk-navy-deep:#0F1A33; /* peak heatmap · headings */ --bk-navy:#1B2A55; /* main accent (= letterhead navy) */ --bk-navy-mid:#5C75A8; /* mid heatmap · borders on emphasis */ --bk-navy-soft:#A3B7D6; /* lighter accent · weekend mute */ --bk-navy-light:#DCE3F0; /* mid heatmap fill */ --bk-navy-50:#F0F3FA; /* very pale · low heatmap fill / hover */ } #view-booking *{box-sizing:border-box} /* Shell */ #view-booking .bkv2{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:0;box-shadow:var(--shadow)} /* §btTop3 (2026-09-15) · แท็บที่เหลือของ Booking · ขอบบนให้ตรงกับ sidebar เหมือน By trip By trip ดันขึ้นมาตั้งแต่ §btTop/§btTop2 แต่สไตล์ก้อนนั้นอยู่ในผลลัพธ์ของ By trip เท่านั้น อีก 5 แท็บ (Calendar · All bookings · Seat Locks · รออนุมัติ · Cancellations) จึงยังเริ่มที่ 22 ตาม padding ของ .main = ต่ำกว่า sidebar 16px และกระโดดเวลาสลับแท็บ วัดจริงที่ 1512x950: sidebar 6 · By trip 6 · อีก 5 แท็บ 22 ⚠ ต้องอยู่ "หลัง" #view-booking .bkv2{margin-top:0} บรรทัดบนนี้ specificity เท่ากัน (1,1,0) ตัวที่มาทีหลังชนะ · วางไว้ต้นไฟล์แล้ว margin-top ไม่ติด (วัดเจอ: padding-top ติดที่ 6 แต่ margin ไม่ติด แถบแท็บเลยกลายเป็น 28 แทนที่จะเป็น 6) -22 ดันกล่องขึ้นไปที่ 0 · +6 คือ padding ที่ทำให้แถบแท็บที่ตาเห็นลงที่ 6 พอดี (กล่องพื้นโปร่งจาก 02-skins.css:46 · ที่ตาเทียบคือแถบแท็บข้างใน ไม่ใช่ตัวกล่อง) ไม่แตะ margin-bottom · By trip บีบเหลือ 4px เพราะมีของตรึงต่อท้าย แท็บอื่นยังใช้ 12 ตามเดิม ⚠ จอกว้างเท่านั้น · มือถือ .main มี padding-top:calc(30px + safe-area) เผื่อแถบบนที่ลอยอยู่ ดันขึ้นตรงนี้จะมุดเข้าไปใต้แถบนั้น (02-skins.css:672) */ @media (min-width:821px){ #view-booking .bkv2-topcard{margin-top:-22px;padding-top:6px} } /* Topbar (tabs + view toggle + nav + actions) */ #view-booking .bkv2-topbar{padding:11px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--white);flex-wrap:wrap} #view-booking .bkv2-tabs{display:inline-flex;background:var(--sand-mid);border-radius:var(--r-sm);padding:2px;gap:1px} #view-booking .bkv2-tab{padding:5px 12px;border-radius:4px;font-size:12px;font-weight:500;color:var(--ink-soft);cursor:pointer;background:transparent;border:none;font-family:inherit} #view-booking .bkv2-tab.on{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(26,35,50,.08)} #view-booking .bkv2-vtoggle{display:inline-flex;background:var(--sand-mid);border-radius:var(--r-sm);padding:2px;margin-left:6px} #view-booking .bkv2-vbtn{padding:5px 11px;border-radius:4px;font-size:12px;color:var(--ink-soft);cursor:pointer;background:transparent;border:none;font-family:inherit;display:inline-flex;align-items:center;gap:5px} #view-booking .bkv2-vbtn.on{background:var(--bk-navy);color:var(--white)} #view-booking .bkv2-vbtn svg{width:13px;height:13px} #view-booking .bkv2-mnav{display:inline-flex;align-items:center;gap:6px;margin-left:10px} #view-booking .bkv2-mnav-btn{width:24px;height:24px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--white);cursor:pointer;color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;font-family:inherit} #view-booking .bkv2-mnav-lbl{font-size:13px;font-weight:500;min-width:96px;text-align:center;color:var(--ink)} #view-booking .bkv2-today{padding:4px 10px;border:1px solid var(--border);background:var(--sand-mid);color:var(--ink-soft);font-size:11px;border-radius:var(--r-sm);cursor:pointer;font-family:inherit} #view-booking .bkv2-meta{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-soft)} #view-booking .bkv2-newbtn{padding:6px 12px;border:1px solid var(--bk-navy);background:var(--bk-navy);color:var(--white);font-size:12px;border-radius:var(--r-sm);font-family:inherit;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px} #view-booking .bkv2-newbtn:hover{background:var(--bk-navy-deep)} #view-booking .bkv2-kbd{background:var(--sand-mid);border:1px solid var(--border);padding:1px 6px;border-radius:3px;font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);font-weight:500} /* Calendar grid (Tab 1 Calendar view) */ /* Stats cards row (4 cards) · matches Calendar page top stats */ #view-booking .bkv2-stats{display:grid;grid-template-columns:1.4fr 1fr 1fr 0.9fr;gap:10px;padding:12px 12px 0} #view-booking .bkv2-stat{background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 18px;min-height:84px;display:flex;flex-direction:column} #view-booking .bkv2-stat.hero{background:var(--bk-navy);color:var(--white);border-color:var(--bk-navy-deep)} #view-booking .bkv2-stat.warn{background:#FFF6E5;border-color:#EAD9B0} #view-booking .bkv2-stat.success{background:#E1F5EE;border-color:#9FE1CB} #view-booking .bkv2-stat .s-lab{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} #view-booking .bkv2-stat.hero .s-lab{color:rgba(255,255,255,.55)} #view-booking .bkv2-stat.warn .s-lab{color:#8a5a00} #view-booking .bkv2-stat.success .s-lab{color:#0F6E56} #view-booking .bkv2-stat .s-val{font-family:'DM Sans',sans-serif;font-size:26px;font-weight:700;line-height:1;margin-top:6px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px} #view-booking .bkv2-stat .s-unit{font-size:13px;font-weight:500;color:var(--ink-soft);letter-spacing:0} #view-booking .bkv2-stat.hero .s-unit{color:rgba(255,255,255,.6)} #view-booking .bkv2-stat .s-foot{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:auto;padding-top:8px} #view-booking .bkv2-stat.hero .s-foot{color:rgba(255,255,255,.65)} #view-booking .bkv2-stat.warn .s-foot{color:#8a5a00} #view-booking .bkv2-stat-pill{display:inline-block;background:rgba(27,42,85,.12);color:var(--bk-navy);font-family:'DM Mono',monospace;font-size:10px;font-weight:600;padding:2px 7px;border-radius:8px;margin-top:6px;letter-spacing:.04em} #view-booking .bkv2-stat.hero .bkv2-stat-pill{background:rgba(255,255,255,.18);color:#fff} /* Per-route avg row */ #view-booking .bkv2-routes{padding:14px 12px 0} #view-booking .bkv2-routes-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;padding:0 4px} #view-booking .bkv2-routes-ttl{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase} #view-booking .bkv2-routes-sub{font-size:11px;color:var(--ink-soft);font-style:italic} #view-booking .bkv2-mode{display:inline-flex;background:var(--sand-mid);border-radius:14px;padding:2px;margin-left:auto;gap:1px} #view-booking .bkv2-mode-btn{padding:3px 10px;font-size:10px;font-weight:600;color:var(--ink-soft);background:transparent;border:none;border-radius:12px;cursor:pointer;font-family:inherit;letter-spacing:.02em} #view-booking .bkv2-mode-btn.on{background:var(--bk-navy);color:var(--white)} #view-booking .bkv2-routes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px} #view-booking .bkv2-route-card{background:#FFFCF5;border:1px solid #F0E5C8;border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;border-left:3px solid var(--bk-navy)} #view-booking .bkv2-route-card .rc-name{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--ink);line-height:1.2} #view-booking .bkv2-route-card .rc-meta{font-family:'DM Mono',monospace;font-size:9px;color:var(--ink-soft);margin-top:2px} #view-booking .bkv2-route-card .rc-val{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;color:var(--ink);text-align:right;margin-top:6px;letter-spacing:-.01em} #view-booking .bkv2-route-card .rc-unit{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);text-align:right;letter-spacing:.04em;font-weight:500} #view-booking .bkv2-route-card .rc-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:4px} /* Split layout (Calendar left + Selected Day right) */ #view-booking .bkv2-split{display:grid;grid-template-columns:1fr 360px;gap:14px;align-items:start;margin-top:16px} #view-booking .bkv2-cal{padding:12px} #view-booking .bkv2-selday{background:var(--white);border-left:1px solid var(--border);padding:16px 16px 16px;min-height:520px;align-self:stretch} #view-booking .bkv2-selday-lab{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:3px} #view-booking .bkv2-selday-ttl{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.15;display:flex;align-items:center;gap:8px} #view-booking .bkv2-selday-today{background:var(--bk-navy);color:var(--white);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:11px;display:inline-block} #view-booking .bkv2-week-summary{background:#FFFCF5;border:1px solid #F0E5C8;border-radius:var(--r-sm);padding:12px 14px;margin:12px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px} #view-booking .bkv2-week-summary .ws-lab{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:var(--ink)} #view-booking .bkv2-week-summary .ws-meta{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:2px} #view-booking .bkv2-week-summary .ws-total{font-family:'DM Sans',sans-serif;font-size:24px;font-weight:700;color:var(--bk-navy);letter-spacing:-.015em;line-height:1} #view-booking .bkv2-week-summary .ws-totlab{font-family:'DM Mono',monospace;font-size:9px;color:var(--ink-soft);text-align:right;margin-top:2px;letter-spacing:.04em} #view-booking .bkv2-selday-empty{font-size:12px;color:var(--ink-soft);font-style:italic;padding:32px 8px;text-align:center} #view-booking .bkv2-rd-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px;border-left:3px solid var(--bk-navy)} #view-booking .bkv2-rd-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px} #view-booking .bkv2-rd-name{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--ink);line-height:1.2} #view-booking .bkv2-rd-val{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em} #view-booking .bkv2-rd-meta{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:3px;line-height:1.5} #view-booking .bkv2-rd-meta .lab{color:var(--ink-soft);opacity:.7} #view-booking .bkv2-rd-meta .val{color:var(--ink);font-weight:600} #view-booking .bkv2-rd-meta .val.foc{color:#ba7517} #view-booking .bkv2-rd-foc{display:inline-block;background:#faeeda;color:#633806;font-family:'DM Mono',monospace;font-size:9px;padding:1px 6px;border-radius:3px;margin-left:6px;font-weight:600} #view-booking .bkv2-rd-card.foc{background:#FFFBF0} #view-booking .bkv2-rd-card.muted{opacity:.45} #view-booking .bkv2-rd-card.muted .bkv2-rd-name{font-style:italic;font-weight:500} #view-booking .bkv2-rd-empty-msg{font-size:11px;color:var(--ink-soft);font-style:italic} #view-booking .bkv2-rd-zone{margin-top:6px;display:flex;gap:10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft)} #view-booking .bkv2-rd-zone .z-val{color:var(--ink);font-weight:600} #view-booking .bkv2-rd-actions{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)} #view-booking .bkv2-rd-actions button{flex:1;padding:7px 10px;font-family:inherit;font-size:11px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--ink)} #view-booking .bkv2-rd-actions button.pri{background:var(--bk-navy);color:var(--white);border-color:var(--bk-navy)} #view-booking .bkv2-rd-actions button.pri:hover{background:var(--bk-navy-deep)} #view-booking .bkv2-cal-wdrow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;font-family:'DM Sans',sans-serif;background:rgba(58,111,247,.09);border-radius:var(--r-sm);padding:2px;gap:2px} #view-booking .bkv2-cal-wd{text-align:center;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bk-navy);padding:6px 0;background:transparent} #view-booking .bkv2-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} /* Cells · crisper borders + better hierarchy */ #view-booking .bkv2-cal-cell{min-height:118px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--border);padding:6px 5px 5px;cursor:pointer;transition:all .15s;position:relative;display:flex;flex-direction:column} #view-booking .bkv2-cal-cell:hover{border-color:var(--bk-navy-mid);box-shadow:0 2px 10px rgba(27,42,85,.15)} #view-booking .bkv2-cal-cell.empty{background:transparent;border:1px dashed var(--border);opacity:.35;cursor:default} #view-booking .bkv2-cal-cell.today{border:2px solid var(--bk-navy);background:var(--bk-navy-50);padding:5px 4px 4px} #view-booking .bkv2-cal-cell.sel{border:2px solid var(--bk-navy);background:var(--bk-navy-light);box-shadow:0 3px 12px rgba(27,42,85,.22);padding:5px 4px 4px} #view-booking .bkv2-cal-cell.weekend{background:#fbfaf6} #view-booking .bkv2-cal-cell.weekend.today{background:var(--bk-navy-50)} #view-booking .bkv2-cal-daynum{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--ink-soft);line-height:1;margin-bottom:5px;display:flex;align-items:center;padding:0 2px} #view-booking .bkv2-cal-cell.today .bkv2-cal-daynum{color:var(--bk-navy);font-weight:700} #view-booking .bkv2-cal-cell.sel .bkv2-cal-daynum{color:var(--bk-navy-deep);font-weight:700} #view-booking .bkv2-cal-foc{margin-left:auto;width:6px;height:6px;background:#ba7517;border-radius:50%} /* Chips · full route names · crisp text */ #view-booking .bkv2-cal-chip{display:flex;align-items:center;justify-content:space-between;border-radius:3px;padding:3px 6px 3px 7px;margin-bottom:2px;border-left:3px solid transparent;font-size:11px;background:#f5f3ef;gap:5px;min-height:19px} #view-booking .bkv2-cal-chip-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'DM Sans',sans-serif;flex:1;min-width:0;letter-spacing:-0.005em;line-height:1.25} #view-booking .bkv2-cal-chip-pax{font-family:'DM Mono',monospace;font-weight:700;font-size:12px;flex-shrink:0;letter-spacing:-.02em} #view-booking .bkv2-cal-chip.foc{background:#fff6e5} #view-booking .bkv2-cal-chip.empty{background:transparent;border-left-style:dashed;border-left-width:2px} #view-booking .bkv2-cal-chip.empty .bkv2-cal-chip-name{font-weight:500;opacity:.7} /* §bkCalOrphan · ปิดวันนั้นแล้วแต่ยังมี booking ค้าง · ต้องสะดุดตากว่าชิปปกติทุกตัว */ #view-booking .bkv2-cal-chip.orphan{background:#FDECEA;border-left-width:3px} #view-booking .bkv2-cal-chip.orphan .bkv2-cal-chip-name{color:#8C3A0B;font-weight:800} #view-booking .bkv2-cal-chip.orphan .bkv2-cal-chip-pax{color:#8C3A0B} #view-booking .bkv2-lg-orphan{color:#8C3A0B;font-weight:600} #view-booking .bkv2-lg-orphan .sw{background:#FDECEA;border:1px solid #E8B4A0} #view-booking .bkv2-cal-more{font-size:9px;color:var(--ink-soft);font-style:italic;margin-top:3px;letter-spacing:.02em;padding-left:5px} /* Matrix view (Tab 1 Matrix) */ #view-booking .bkv2-mx{padding:12px 12px 4px;background:var(--white);overflow-x:auto} #view-booking .bkv2-mx table{width:100%;border-collapse:separate;border-spacing:1px;font-family:'DM Mono',monospace;table-layout:fixed} #view-booking .bkv2-mx col.label{width:150px} /* §mxBrk2 · 230 ก็ตัดคำอยู่ดี · ยกที่ให้คอลัมน์ตัวเลข */ #view-booking .bkv2-mx col.day{width:auto} #view-booking .bkv2-mx th.rowh{font-family:'DM Sans',sans-serif;text-align:left;padding:5px 8px;color:var(--ink-soft);font-weight:500;font-size:9px;letter-spacing:.04em;width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-booking .bkv2-mx td.rowh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px} #view-booking .bkv2-mx th.dh{padding:3px 0;font-size:8px;font-weight:500;color:var(--ink-soft);text-align:center} #view-booking .bkv2-mx th.dh.weekend{color:#b4b2a9} #view-booking .bkv2-mx th.dh.today{background:var(--bk-navy);color:var(--white);border-radius:3px} #view-booking .bkv2-mx th.dh .dnum{display:block;font-size:11px;color:var(--ink);font-weight:500;margin-top:1px} #view-booking .bkv2-mx th.dh.weekend .dnum{color:var(--ink-soft)} #view-booking .bkv2-mx th.dh.today .dnum{color:var(--white)} #view-booking .bkv2-mx td.cell{text-align:center;padding:4px 0;font-weight:500;font-size:10px;cursor:pointer;border-radius:3px} #view-booking .bkv2-mx td.cell.empty{background:var(--sand-mid);color:#b4b2a9;cursor:default;font-weight:400} #view-booking .bkv2-mx td.cell.closed{background:repeating-linear-gradient(45deg,#f0ebe0,#f0ebe0 3px,transparent 3px,transparent 6px);color:#b4b2a9;cursor:default;font-weight:400} #view-booking .bkv2-mx td.cell.closed-with-data{background:repeating-linear-gradient(45deg,#fdecea,#fdecea 3px,transparent 3px,transparent 6px);color:#A32D2D;cursor:pointer;font-weight:500} #view-booking .bkv2-mx td.cell.lo{background:var(--white);color:var(--ink);border:1px solid var(--border)} #view-booking .bkv2-mx td.cell.mid{background:var(--bk-navy-50);color:var(--bk-navy-deep)} #view-booking .bkv2-mx td.cell.hi{background:var(--bk-navy-light);color:var(--bk-navy-deep)} #view-booking .bkv2-mx td.cell.peak{background:var(--bk-navy);color:var(--white)} #view-booking .bkv2-mx td.cell.foc{background:#faeeda;color:#633806} #view-booking .bkv2-mx td.cell.sel{outline:2px solid var(--bk-navy);outline-offset:-1px} #view-booking .bkv2-mx td.cell.focdot{position:relative} #view-booking .bkv2-mx td.cell.focdot::after{content:'';position:absolute;top:1px;right:2px;width:4px;height:4px;background:#ba7517;border-radius:50%} #view-booking .bkv2-mx tr.tot td{background:var(--sand-mid);color:var(--ink-soft);font-weight:500;font-size:10px;text-align:center;padding:6px 0} #view-booking .bkv2-mx tr.tot td.rowh{text-align:left;font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.04em;text-transform:uppercase;padding:6px 8px} #view-booking .bkv2-mx tr.tot td.today{background:var(--bk-navy);color:var(--white)} /* Family parent rows + sub-rows for grouping */ #view-booking .bkv2-mx tr.fam td.rowh{cursor:pointer;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;color:var(--ink);padding:8px 6px 8px 8px;border-left:3px solid #c0392b;background:transparent;letter-spacing:-.005em;line-height:1.25;text-transform:none} #view-booking .bkv2-mx tr.fam td.rowh .caret{display:inline-block;color:var(--ink-soft);margin-right:6px;font-size:10px;width:10px} #view-booking .bkv2-mx tr.fam.expanded td.rowh{background:var(--bk-navy-50)} #view-booking .bkv2-mx tr.fam.expanded td.rowh .caret{color:var(--bk-navy);font-weight:700} #view-booking .bkv2-mx tr.fam .subc{font-family:'DM Mono',monospace;font-size:9px;color:var(--ink-soft);font-weight:500;margin-left:6px;letter-spacing:.02em} #view-booking .bkv2-mx tr.sub td.rowh{padding:4px 4px 4px 28px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;color:var(--ink-soft);background:#FAFBFD;border-left:2px solid var(--border);text-transform:none;letter-spacing:0;line-height:1.2} #view-booking .bkv2-mx tr.sub td.cell{font-size:10px;font-weight:600;color:var(--ink-soft)} #view-booking .bkv2-mx tr.sub td.cell.lo,#view-booking .bkv2-mx tr.sub td.cell.mid,#view-booking .bkv2-mx tr.sub td.cell.hi,#view-booking .bkv2-mx tr.sub td.cell.peak{background:transparent;color:var(--ink)} #view-booking .bkv2-mx-toolbar{display:flex;align-items:center;gap:8px;padding:0 4px 8px;font-size:10px;color:var(--ink-soft)} #view-booking .bkv2-mx-toolbar button{font-family:inherit;background:transparent;border:1px solid var(--border);color:var(--ink-soft);padding:3px 9px;border-radius:var(--r-sm);font-size:10px;font-weight:500;cursor:pointer} #view-booking .bkv2-mx-toolbar button:hover{border-color:var(--bk-navy-mid);color:var(--bk-navy)} /* Detail panel (shared between Calendar + Matrix) */ #view-booking .bkv2-detail{margin:0 12px 12px;background:var(--white);border:2px solid var(--bk-navy);border-radius:var(--r-sm);padding:13px 16px} #view-booking .bkv2-detail-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px} #view-booking .bkv2-detail-lab{font-family:'DM Sans',sans-serif;font-size:9px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;font-weight:500} #view-booking .bkv2-detail-ttl{font-size:14px;font-weight:500;color:var(--ink);margin-top:1px} #view-booking .bkv2-detail-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:#faeeda;color:#633806;border-radius:4px;font-size:11px;font-weight:500} #view-booking .bkv2-detail-chip .dot{width:6px;height:6px;border-radius:50%;background:#ba7517} #view-booking .bkv2-detail-open{padding:6px 12px;border:1px solid var(--bk-navy);background:var(--bk-navy);color:var(--white);font-size:11px;border-radius:var(--r-sm);font-weight:500;cursor:pointer;font-family:inherit} #view-booking .bkv2-detail-open:hover{background:var(--bk-navy-deep)} #view-booking .bkv2-detail-row{display:grid;grid-template-columns:96px 1fr;gap:12px 16px;padding:6px 0;border-top:1px solid var(--border);font-size:11px;align-items:center} #view-booking .bkv2-detail-row.first{border-top:1px solid var(--border)} #view-booking .bkv2-detail-rname{font-family:'DM Sans',sans-serif;font-weight:500;color:var(--ink);font-size:12px} #view-booking .bkv2-detail-rname.muted{color:var(--ink-soft);font-weight:400} #view-booking .bkv2-detail-stats{display:flex;gap:12px;font-family:'DM Mono',monospace;align-items:center;flex-wrap:wrap} #view-booking .bkv2-detail-stats .sep{color:var(--border)} #view-booking .bkv2-detail-stats .lab{color:var(--ink-soft)} #view-booking .bkv2-detail-stats .val{color:var(--ink);font-weight:500} #view-booking .bkv2-detail-stats .val.foc{color:#ba7517} #view-booking .bkv2-detail-stats .val.big{font-size:13px} #view-booking .bkv2-detail-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;margin-top:6px;border-top:1px solid var(--border)} #view-booking .bkv2-detail-foot .lab{font-family:'DM Sans',sans-serif;font-size:9px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;font-weight:500} #view-booking .bkv2-detail-foot .stats{display:flex;gap:14px;font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--ink)} #view-booking .bkv2-detail-foot .stats .sep{color:var(--border)} /* Tab 2 — by trip + date (filter chip + reuse table) */ #view-booking .bkv2-filterchip{display:inline-flex;align-items:center;gap:8px;background:var(--bk-navy-50);border:1px solid var(--bk-navy-mid);color:var(--bk-navy);padding:4px 11px;border-radius:var(--r-sm);font-size:12px;font-weight:500} #view-booking .bkv2-filterchip .clear{background:transparent;border:none;color:var(--bk-navy);cursor:pointer;font-size:14px;padding:0;line-height:1;font-family:inherit} /* Tab 3 reuses KPI/filter/table from old design — restore tokens to DM Sans/Mono */ #view-booking .bkv2-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--border);background:var(--white)} #view-booking .bkv2-kpi{padding:13px 18px;border-right:1px solid var(--border)} #view-booking .bkv2-kpi:last-child{border-right:none} #view-booking .bkv2-kpi-lab{font-family:'DM Sans',sans-serif;font-size:10px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;font-weight:500} #view-booking .bkv2-kpi-val{font-family:'DM Mono',monospace;font-size:22px;font-weight:500;letter-spacing:-.005em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1} #view-booking .bkv2-kpi-foot{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:3px} #view-booking .bkv2-kpi.warn .bkv2-kpi-val{color:#ba7517} #view-booking .bkv2-filterbar{display:flex;align-items:center;gap:8px;padding:11px 18px;background:var(--white);border-bottom:1px solid var(--border);flex-wrap:wrap} #view-booking .bkv2-pill{padding:4px 11px;border-radius:var(--r-sm);font-size:12px;font-weight:500;background:var(--sand-mid);color:var(--ink-soft);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:inherit} #view-booking .bkv2-pill.on{background:var(--bk-navy);color:var(--white)} #view-booking .bkv2-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-soft)} #view-booking .bkv2-pill.on .dot{background:var(--white)} #view-booking .bkv2-pill[data-st="confirmed"] .dot{background:#1d9e75} #view-booking .bkv2-pill[data-st="pending_foc"] .dot{background:#ba7517} #view-booking .bkv2-pill[data-st="quote"] .dot{background:var(--ink-soft)} #view-booking .bkv2-pill[data-st="rejected"] .dot{background:#a32d2d} #view-booking .bkv2-pill[data-st="completed"] .dot{background:var(--bk-navy)} #view-booking .bkv2-search{margin-left:auto;background:var(--sand-mid);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 11px;font-size:12px;font-family:inherit;color:var(--ink);width:220px;outline:none} #view-booking .bkv2-search:focus{border-color:var(--bk-navy-mid);background:var(--white)} #view-booking .bkv2-tbl{width:100%;border-collapse:collapse;font-size:12px;background:var(--white)} #view-booking .bkv2-tbl thead th{font-family:'DM Mono',monospace;font-size:9px;color:var(--ink-soft);font-weight:500;letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:9px 14px;background:var(--sand-mid);border-bottom:1px solid var(--border)} #view-booking .bkv2-tbl thead th.num{text-align:right} #view-booking .bkv2-tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:12px} #view-booking .bkv2-tbl tbody tr{cursor:pointer} #view-booking .bkv2-tbl tbody tr:hover td{background:var(--sand-mid)} #view-booking .bkv2-tbl .num{text-align:right;font-variant-numeric:tabular-nums} #view-booking .bkv2-tbl .bk-id{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums} #view-booking .bkv2-tbl .agent-name{font-family:'DM Sans',sans-serif;font-weight:500;color:var(--ink)} #view-booking .bkv2-tbl .agent-rt{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:1px} #view-booking .bkv2-tbl .trip-name{font-weight:500;color:var(--ink);font-family:'DM Sans',sans-serif} #view-booking .bkv2-tbl .trip-date{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:1px} #view-booking .bkv2-tbl .pax-total{font-family:'DM Mono',monospace;font-weight:500;font-variant-numeric:tabular-nums} #view-booking .bkv2-tbl .pax-break{font-family:'DM Mono',monospace;font-size:9px;color:var(--ink-soft);margin-top:1px} #view-booking .bkv2-tbl .price{font-family:'DM Mono',monospace;font-weight:500;font-variant-numeric:tabular-nums} #view-booking .bkv2-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-sm);font-size:10px;font-weight:500;line-height:1.4;font-family:'DM Sans',sans-serif} #view-booking .bkv2-chip .dot{width:5px;height:5px;border-radius:50%} #view-booking .bkv2-chip.confirmed{background:#e1f5ee;color:#0f6e56} #view-booking .bkv2-chip.confirmed .dot{background:#1d9e75} #view-booking .bkv2-chip.pending_foc{background:#faeeda;color:#633806} #view-booking .bkv2-chip.pending_foc .dot{background:#ba7517} #view-booking .bkv2-chip.quote{background:var(--sand-mid);color:var(--ink-soft)} #view-booking .bkv2-chip.quote .dot{background:var(--ink-soft)} #view-booking .bkv2-chip.rejected{background:#fcebeb;color:#791f1f} #view-booking .bkv2-chip.rejected .dot{background:#a32d2d} #view-booking .bkv2-chip.cancelled{background:var(--sand-mid);color:#888780} #view-booking .bkv2-chip.cancelled .dot{background:#9c9c95} #view-booking .bkv2-chip.completed{background:var(--bk-navy-50);color:var(--bk-navy)} #view-booking .bkv2-chip.completed .dot{background:var(--bk-navy)} #view-booking .bkv2-foc-flag{display:inline-block;background:#faeeda;color:#633806;font-family:'DM Mono',monospace;font-size:9px;padding:1px 6px;border-radius:3px;margin-left:6px;font-weight:500;letter-spacing:.02em} #view-booking .bkv2-empty{padding:60px 20px;text-align:center;background:var(--white)} #view-booking .bkv2-empty .ttl{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px} #view-booking .bkv2-empty .sub{font-size:12px;color:var(--ink-soft);margin-bottom:18px} #view-booking .bkv2-foot-hints{padding:9px 16px;background:var(--sand-mid);border-top:1px solid var(--border);display:flex;align-items:center;gap:14px;font-size:11px;color:var(--ink-soft);flex-wrap:wrap} #view-booking .bkv2-foot-hints .gp{display:inline-flex;align-items:center;gap:6px} #view-booking .bkv2-legend{display:inline-flex;align-items:center;gap:5px} #view-booking .bkv2-legend .sw{width:9px;height:9px;border-radius:2px} #view-booking .bkv2-legend .sw.lo{background:var(--white);border:1px solid var(--border)} #view-booking .bkv2-legend .sw.mid{background:var(--bk-navy-50);border:1px solid var(--bk-navy-light)} #view-booking .bkv2-legend .sw.hi{background:var(--bk-navy-light);border:1px solid var(--bk-navy-mid)} #view-booking .bkv2-legend .sw.peak{background:var(--bk-navy)} #view-booking .bkv2-legend .sw.foc{background:#faeeda;border:1px solid #ead9b0} #view-booking .bkv2-legend .sw.focdot{background:#ba7517;border-radius:50%} /* New Booking form (P2 · navy theme · card-split layout) */ #view-booking .bkv2-nb{background:#F4F5F3;border:0;border-radius:0;max-width:1320px;margin:0 auto;box-shadow:none;overflow:visible;padding:14px} #view-booking .bkv2-nb-topbar{display:flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid rgba(26,35,50,0.05);background:var(--white);border-radius:14px;margin-bottom:14px;margin-right:354px;box-shadow:0 1px 2px rgba(26,35,50,.03)} #view-booking .bkv2-nb-back{background:transparent;border:1px solid var(--border);padding:5px 11px;border-radius:var(--r-sm);cursor:pointer;color:var(--ink-soft);font-size:11px;font-family:inherit;font-weight:500} #view-booking .bkv2-nb-back:hover{background:var(--sand-mid);color:var(--ink)} #view-booking .bkv2-nb-h1{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em} #view-booking .bkv2-nb-draft{background:#faeeda;color:#633806;padding:3px 10px;border-radius:11px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-left:auto;display:inline-flex;align-items:center;gap:5px} #view-booking .bkv2-nb-draft .dot{width:6px;height:6px;background:#ba7517;border-radius:50%} #view-booking .bkv2-nb-sec{padding:18px 20px;background:var(--white);border:1px solid rgba(26,35,50,0.05);border-radius:14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(26,35,50,.03)} #view-booking .bkv2-nb-sec:last-of-type{margin-bottom:0} #view-booking .bkv2-nb-sec-h{font-size:10px;font-weight:700;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:7px} #view-booking .bkv2-nb-sec-h::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bk-navy)} /* P3 · Booking Detail page styles */ #view-booking .bkv2-nb-card{padding:18px 20px;background:var(--white);border:1px solid rgba(26,35,50,0.05);border-radius:14px;box-shadow:0 1px 2px rgba(26,35,50,.03)} #view-booking .bkv2-nb-sec-hd{font-size:14px;font-weight:800;color:var(--bk-navy);letter-spacing:-.005em;margin-bottom:12px;display:flex;align-items:center;gap:8px} #view-booking .bkv2-nb-sec-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bk-navy)} #view-booking .bkv2-nb-sec-ttl{font-size:14px;font-weight:800} #view-booking .bkv2-nb-title{font-size:15px;font-weight:800;color:var(--ink);font-family:'DM Mono',monospace;letter-spacing:.02em} #view-booking .bkv2-nb-btn{background:var(--white);border:1px solid rgba(26,35,50,0.15);padding:7px 12px;border-radius:8px;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;transition:all .12s} #view-booking .bkv2-nb-btn:hover{background:#f5f5f1;border-color:rgba(26,35,50,0.25)} #view-booking .bkv2-dt-lab{font-size:10px;font-weight:700;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px} #view-booking .bkv2-dt-val{font-size:13px;font-weight:600;color:var(--ink);line-height:1.4} #view-booking .bkv2-dt-sub{font-size:11px;color:var(--ink-soft);margin-top:3px;line-height:1.4} #view-booking .bkv2-dt-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:12px;color:var(--ink);font-family:'DM Mono',monospace} #view-booking .bkv2-dt-row > span:last-child{font-weight:700} #view-booking .bkv2-nb-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px} #view-booking .bkv2-nb-row:last-child{margin-bottom:0} #view-booking .bkv2-nb-field{display:flex;flex-direction:column;gap:4px} #view-booking .bkv2-nb-label{font-size:10px;font-weight:600;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase} #view-booking .bkv2-nb-input{border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 11px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--white);transition:border-color .15s} /* §altDropFix · เหตุผลเดียวกับ §pax boxes ข้างล่าง แต่เกิดกับคอลัมน์จุดรับ/จุดส่ง ที่ห่อด้วย
· ตัว div เป็น grid item ที่ min-width:auto จึงกว้างตาม select/input ข้างใน แล้วล้นไปทับปุ่มลบ · บังคับให้ทุกช่องในแถวนี้หดได้ */ #view-booking .bkv2-alt-row>*{min-width:0} #view-booking .bkv2-alt-row .bkv2-nb-input{width:100%;box-sizing:border-box;max-width:100%} /* §pax boxes · a grid item defaults to min-width:auto, and has a wide intrinsic size (~170px), so four of them refused to shrink and spilled out over the pickup dropdown. */ .bkv2-pax-box{min-width:0;width:100%;box-sizing:border-box;padding:8px 2px;text-align:center;-moz-appearance:textfield} .bkv2-pax-box::-webkit-outer-spin-button,.bkv2-pax-box::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} #view-booking .bkv2-nb-input:focus{outline:none;border-color:var(--bk-navy-mid);box-shadow:0 0 0 2px rgba(27,42,85,.08)} #view-booking .bkv2-nb-input.read{background:#f8f7f3;color:var(--ink-soft);cursor:not-allowed} #view-booking .bkv2-nb-input::placeholder{color:#b4b2a9} #view-booking .bkv2-nb-input optgroup{font-weight:700;color:var(--bk-navy);font-style:normal} /* Custom autocomplete dropdown · replaces native datalist (browser styling can't be controlled) */ #view-booking .bkv2-nb-ddwrap{position:relative;width:100%} #view-booking .bkv2-nb-ddwrap > input{width:100%;box-sizing:border-box} #view-booking .bkv2-nb-dd{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid rgba(26,35,50,.1);border-radius:10px;box-shadow:0 8px 24px rgba(26,35,50,.12),0 2px 6px rgba(26,35,50,.04);padding:5px;max-height:280px;overflow-y:auto;z-index:200;display:none} #view-booking .bkv2-nb-ddwrap:focus-within{z-index:201;position:relative} /* Fixed Booking Review · positioned to viewport · always visible during scroll */ #view-booking .bkv2-review-cell{align-self:start;display:block;min-width:0;width:340px} #view-booking .bkv2-review-sticky{position:fixed;top:74px;width:340px;max-height:calc(100vh - 90px);overflow-y:auto;background:var(--white);border:1px solid rgba(26,35,50,0.05);border-radius:14px;box-shadow:0 1px 2px rgba(26,35,50,.03);z-index:50} #view-booking .bkv2-review-inner{padding:18px 20px} #view-booking .bkv2-nb-dd.open{display:block} #view-booking .bkv2-nb-dd-item{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--ink);display:flex;align-items:center;gap:8px;font-family:inherit;line-height:1.3} #view-booking .bkv2-nb-dd-item:hover,#view-booking .bkv2-nb-dd-item.active{background:var(--bk-navy-50)} #view-booking .bkv2-nb-dd-mkt{font-size:9px;font-weight:700;color:var(--bk-navy);background:var(--bk-navy-50);padding:1px 7px;border-radius:8px;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0} #view-booking .bkv2-nb-dd-code{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-soft);flex-shrink:0} #view-booking .bkv2-nb-dd-name{flex:1;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* §pierHd · หัวคั่นท่าเรือในช่องเลือกทริป · ชื่อท่า แล้วขีดยาวหนึ่งขีด */ #view-booking .bkv2-nb-dd-hd{display:flex;align-items:center;gap:9px;padding:9px 10px 5px;pointer-events:none;user-select:none} #view-booking .bkv2-nb-dd-hd:first-child{padding-top:4px} #view-booking .bkv2-nb-dd-hd .lb{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap} #view-booking .bkv2-nb-dd-hd .ln{flex:1;height:1px;background:var(--border)} #view-booking .bkv2-nb-dd-empty{padding:14px 10px;font-size:11px;color:var(--ink-soft);text-align:center;font-style:italic} /* Custom calendar widget · click input → popup grid · closed dates grayed out */ #view-booking .bkv2-cal-wrap{position:relative;width:100%} #view-booking .bkv2-cal-trig{display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--white)} #view-booking .bkv2-cal-trig::after{content:'';width:11px;height:11px;margin-left:auto;background-image:url("data:image/svg+xml;utf8,");background-size:contain;background-repeat:no-repeat;opacity:.7;flex-shrink:0} #view-booking .bkv2-cal-pop{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid rgba(26,35,50,.1);border-radius:12px;box-shadow:0 8px 24px rgba(26,35,50,.14),0 2px 6px rgba(26,35,50,.04);padding:10px;width:288px;z-index:60;display:none;font-family:inherit} #view-booking .bkv2-cal-pop.open{display:block} #view-booking .bkv2-cal-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;margin-bottom:8px} #view-booking .bkv2-cal-head-title{font-size:12px;font-weight:700;color:var(--ink);font-family:inherit} #view-booking .bkv2-cal-nav{background:transparent;border:1px solid var(--border);border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);font-family:inherit;font-size:11px;font-weight:700} #view-booking .bkv2-cal-nav:hover{border-color:var(--bk-navy);color:var(--bk-navy)} #view-booking .bkv2-cal-wdh{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:9px;color:var(--ink-soft);font-weight:600;letter-spacing:.04em;margin-bottom:4px;padding:0 4px} #view-booking .bkv2-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 4px} #view-booking .bkv2-cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:11px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .1s;color:var(--ink);background:transparent;border:1px solid transparent} #view-booking .bkv2-cal-day:hover:not(.closed):not(.past):not(.empty){background:var(--bk-navy-50);color:var(--bk-navy)} #view-booking .bkv2-cal-day.empty{visibility:hidden;cursor:default} #view-booking .bkv2-cal-day.past{color:#ccc;cursor:not-allowed;background:transparent} #view-booking .bkv2-cal-day.closed{background:#FDECEA;color:#C44A36;cursor:not-allowed;text-decoration:line-through;text-decoration-color:#C44A3680;text-decoration-thickness:1px} #view-booking .bkv2-cal-day.today{border-color:var(--bk-navy);font-weight:700} #view-booking .bkv2-cal-day.sel{background:var(--bk-navy);color:#fff;font-weight:700} #view-booking .bkv2-cal-day.sel.closed{background:#C44A36;color:#fff;text-decoration:none} #view-booking .bkv2-cal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:7px 6px 0;border-top:1px solid var(--border);font-size:10px;color:var(--ink-soft)} #view-booking .bkv2-cal-foot button{background:transparent;border:0;color:var(--bk-navy);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px} #view-booking .bkv2-cal-foot button:hover{background:var(--bk-navy-50)} #view-booking .bkv2-cal-legend{display:flex;gap:8px;align-items:center} #view-booking .bkv2-cal-legend span{display:inline-flex;align-items:center;gap:3px} #view-booking .bkv2-cal-legend i{width:8px;height:8px;border-radius:2px;display:inline-block} #view-booking .bkv2-nb-rt-preview{background:var(--bk-navy-50);border:1px solid var(--bk-navy-light);border-radius:var(--r-sm);padding:11px 14px;margin-top:10px;font-size:11px;color:var(--bk-navy-deep);line-height:1.5} #view-booking .bkv2-nb-rt-preview strong{color:var(--bk-navy)} #view-booking .bkv2-nb-rt-preview .meta{color:var(--ink-soft);margin-top:3px;font-family:'DM Mono',monospace;font-size:10px} #view-booking .bkv2-nb-actions{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--white);border:1px solid rgba(26,35,50,0.05);border-radius:14px;margin-top:12px;box-shadow:0 1px 2px rgba(26,35,50,.03)} #view-booking .bkv2-nb-actions .meta{color:var(--ink-soft);font-size:11px} #view-booking .bkv2-nb-actions .btn-grp{margin-left:auto;display:flex;gap:8px} #view-booking .bkv2-nb-btn{padding:8px 14px;border:1px solid var(--border);background:var(--white);color:var(--ink);font-size:12px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;font-family:inherit} #view-booking .bkv2-nb-btn:hover:not(:disabled){border-color:var(--bk-navy-mid);color:var(--bk-navy)} #view-booking .bkv2-nb-btn.ghost{background:transparent;color:var(--ink-soft)} #view-booking .bkv2-nb-btn.pri{background:var(--bk-navy);color:var(--white);border-color:var(--bk-navy)} #view-booking .bkv2-nb-btn.pri:hover:not(:disabled){background:var(--bk-navy-deep);color:var(--white)} #view-booking .bkv2-nb-btn:disabled{opacity:.4;cursor:not-allowed} /* Trip cards */ #view-booking .bkv2-nb-trip{border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:10px;background:#fafafa} #view-booking .bkv2-nb-trip:last-of-type{margin-bottom:0} #view-booking .bkv2-nb-trip-h{display:flex;align-items:center;gap:8px;margin-bottom:10px} #view-booking .bkv2-nb-pax-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px} #view-booking .bkv2-nb-pax-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start} /* Add-on items */ #view-booking .bkv2-nb-addons{display:flex;flex-direction:column;gap:6px} #view-booking .bkv2-nb-addon{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;background:var(--white);transition:border-color .15s} #view-booking .bkv2-nb-addon:hover{border-color:var(--bk-navy-mid)} #view-booking .bkv2-nb-addon.on{border-color:var(--bk-navy);background:var(--bk-navy-50)} #view-booking .bkv2-nb-addon input[type=checkbox]{accent-color:var(--bk-navy);width:14px;height:14px;cursor:pointer} /* ══════════ AGENT INFO TAB (Phase 1 sections) ══════════ */ #view-agents .agi-sect{margin-bottom:24px} #view-agents .agi-sect:last-child{margin-bottom:0} #view-agents .agi-sect-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--fd-line-soft);gap:14px} #view-agents .agi-sect-ttl{font-size:13px;font-weight:700;color:var(--fd-ink);letter-spacing:0;display:flex;align-items:center;gap:8px} #view-agents .agi-sect-ttl::before{content:'';width:4px;height:14px;background:var(--fd-coral);border-radius:2px} #view-agents .agi-sect-cnt{font-size:10px;font-weight:600;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;margin-left:6px;letter-spacing:.02em} #view-agents .agi-sect-desc{font-size:11px;color:var(--fd-ink-soft);margin-top:2px;font-weight:400} #view-agents .agi-sect-act{font-size:11px;color:var(--fd-coral);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:transparent;border:none;font-family:inherit;padding:4px 8px;border-radius:8px;transition:background .12s} #view-agents .agi-sect-act:hover{background:var(--fd-coral-veryfaint)} #view-agents .agi-sect-act svg{width:11px;height:11px} /* Sales card */ #view-agents .agi-sales-card{display:flex;align-items:center;gap:14px;background:var(--fd-coral-soft);border-radius:18px;padding:14px 18px} #view-agents .agi-sales-av{width:46px;height:46px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:.02em} #view-agents .agi-sales-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} #view-agents .agi-sales-lbl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-coral-deep)} #view-agents .agi-sales-name{font-size:15px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.01em} #view-agents .agi-sales-meta{font-size:11px;color:var(--fd-ink-mid);font-variant-numeric:tabular-nums;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-agents .agi-icon-btn{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--fd-line);color:var(--fd-ink-mid);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} #view-agents .agi-icon-btn:hover{background:var(--fd-bg)} #view-agents .agi-icon-btn svg{width:13px;height:13px} /* Summary stats */ #view-agents .agi-prog-summary{display:flex;gap:18px;padding:12px 16px;background:var(--fd-bg);border-radius:14px;margin-bottom:10px;align-items:center} #view-agents .agi-prog-sum-item{display:flex;flex-direction:column;gap:2px;flex:1} #view-agents .agi-prog-sum-lbl{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-ink-soft)} #view-agents .agi-prog-sum-val{font-size:14px;font-weight:700;color:var(--fd-ink);font-variant-numeric:tabular-nums;letter-spacing:-0.01em} #view-agents .agi-prog-sum-val.mono{font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.01em} #view-agents .agi-prog-sum-divider{width:1px;background:var(--fd-line);align-self:stretch} /* Programs list */ #view-agents .agi-prog-header{display:grid;grid-template-columns:24px 1.5fr 1.3fr 1.3fr auto;gap:14px;padding:8px 16px 6px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-ink-soft)} #view-agents .agi-prog-header > div:last-child{min-width:62px} #view-agents .agi-prog-list{display:flex;flex-direction:column;gap:6px} #view-agents .agi-prog-row{background:#fff;border:1px solid var(--fd-line);border-radius:14px;padding:12px 16px;display:grid;grid-template-columns:24px 1.5fr 1.3fr 1.3fr auto;gap:14px;align-items:center;transition:all .15s} #view-agents .agi-prog-row:hover{border-color:var(--fd-coral-soft);background:var(--fd-coral-veryfaint)} #view-agents .agi-prog-dot-wrap{display:flex;align-items:center;justify-content:center} #view-agents .agi-prog-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0} #view-agents .agi-prog-name-wrap{display:flex;flex-direction:column;gap:2px;min-width:0} #view-agents .agi-prog-name{font-size:13px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-agents .agi-prog-pier{font-size:9px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase;font-weight:600} #view-agents .agi-period-col{display:flex;flex-direction:column;gap:2px;min-width:0} #view-agents .agi-period-lbl{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-ink-soft);display:flex;align-items:center;gap:5px} #view-agents .agi-period-lbl::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fd-ink-faint)} #view-agents .agi-period-lbl.book::before{background:#185FA5} #view-agents .agi-period-lbl.travel::before{background:var(--fd-coral)} #view-agents .agi-period-val{font-size:12px;font-weight:600;color:var(--fd-ink);font-variant-numeric:tabular-nums;letter-spacing:.01em;display:flex;align-items:center;gap:4px;white-space:nowrap} #view-agents .agi-period-val .arrow{color:var(--fd-ink-faint);font-weight:400} #view-agents .agi-prog-actions{display:flex;gap:4px} #view-agents .agi-prog-act-btn{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--fd-line);color:var(--fd-ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s} #view-agents .agi-prog-act-btn:hover{background:var(--fd-bg);color:var(--fd-ink)} #view-agents .agi-prog-act-btn svg{width:11px;height:11px} #view-agents .agi-prog-add{background:transparent;border:1px dashed var(--fd-line);border-radius:14px;padding:12px 16px;color:var(--fd-ink-soft);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;margin-top:2px} #view-agents .agi-prog-add:hover{border-color:var(--fd-coral);color:var(--fd-coral-deep);background:var(--fd-coral-veryfaint)} #view-agents .agi-prog-add svg{width:13px;height:13px} /* Notes */ #view-agents .agi-note{background:var(--fd-coral-veryfaint);border:1px dashed var(--fd-coral-soft);border-radius:14px;padding:12px 14px;font-size:11px;color:var(--fd-coral-deep);display:flex;align-items:flex-start;gap:8px;margin-top:10px;line-height:1.5} #view-agents .agi-note svg{width:13px;height:13px;flex-shrink:0;margin-top:1px} /* Info grid + cards */ #view-agents .agi-grid{display:grid;gap:10px} #view-agents .agi-grid-3{grid-template-columns:repeat(3,1fr)} #view-agents .agi-grid-4{grid-template-columns:repeat(4,1fr)} #view-agents .agi-info-card{background:var(--fd-bg);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:5px} #view-agents .agi-info-card.span2{grid-column:span 2} #view-agents .agi-info-card.span3{grid-column:span 3} #view-agents .agi-info-card.coral{background:var(--fd-coral-soft)} #view-agents .agi-info-card.coral .agi-info-lbl{color:var(--fd-coral-deep)} #view-agents .agi-info-card.coral .agi-info-val{color:var(--fd-coral-deep)} #view-agents .agi-info-lbl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-ink-soft);margin-bottom:2px} #view-agents .agi-info-val{font-size:14px;font-weight:600;color:var(--fd-ink);letter-spacing:-0.005em;line-height:1.35} #view-agents .agi-info-val.mono{font-variant-numeric:tabular-nums;font-size:13px} #view-agents .agi-info-val.big{font-size:18px;font-weight:700} #view-agents .agi-info-val.muted{color:var(--fd-ink-soft);font-weight:400} #view-agents .agi-info-val.multi{font-size:12px;font-weight:500;line-height:1.5} #view-agents .agi-info-sub{font-size:10px;color:var(--fd-ink-soft);font-weight:400;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:.02em} /* ── Detail panel · sharper section titles + crisper info cells (label/value contrast) ── */ #view-agents .agi-sect-ttl{font-size:14px;font-weight:800;letter-spacing:-.01em} #view-agents .agi-sect-ttl::before{height:15px;width:4px} #view-agents .agi-sect-desc{font-size:11px;color:var(--fd-ink-faint)} #view-agents .agi-info-card{background:#fff;border:1px solid var(--fd-line-soft);box-shadow:0 1px 2px rgba(15,23,42,.03);padding:12px 15px} #view-agents .agi-info-lbl{font-size:9.5px;font-weight:700;letter-spacing:.07em;color:#98a1ab} #view-agents .agi-info-val{font-weight:600;color:var(--fd-ink);letter-spacing:-.008em} #view-agents .agi-info-val.muted{color:var(--fd-ink-soft);font-weight:500} /* Signatory card */ #view-agents .agi-sig-card{border-radius:14px;padding:16px 18px} #view-agents .agi-sig-card.signed{background:#E1F5EE} #view-agents .agi-sig-card.pending{background:#FAEEDA} #view-agents .agi-sig-role{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px} #view-agents .agi-sig-card.signed .agi-sig-role{color:#0F6E56} #view-agents .agi-sig-card.pending .agi-sig-role{color:#854F0B} #view-agents .agi-sig-name{font-size:14px;font-weight:700;margin-bottom:2px;letter-spacing:-0.005em} #view-agents .agi-sig-card.signed .agi-sig-name{color:#0F6E56} #view-agents .agi-sig-card.pending .agi-sig-name{color:#854F0B} #view-agents .agi-sig-pos{font-size:11px;color:var(--fd-ink-mid);font-variant-numeric:tabular-nums;margin-bottom:8px} #view-agents .agi-sig-meta{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em} /* ══════════ AGENT EDIT MODAL ══════════ */ #view-agents .ag-edit-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center} #view-agents .ag-edit-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.4);backdrop-filter:blur(2px)} #view-agents .ag-edit-card{position:relative;background:#fff;border-radius:18px;box-shadow:0 16px 48px rgba(0,0,0,.15);width:90%;max-width:680px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden} #view-agents .ag-edit-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--fd-line-soft)} #view-agents .ag-edit-ttl{font-size:16px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.01em} #view-agents .ag-edit-x{width:30px;height:30px;border-radius:50%;border:none;background:var(--fd-bg);color:var(--fd-ink-mid);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center} #view-agents .ag-edit-x:hover{background:#FCEBEB;color:#A32D2D} #view-agents .ag-edit-body{padding:20px 22px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px} #view-agents .ag-edit-actions{padding:14px 22px;border-top:1px solid var(--fd-line-soft);display:flex;justify-content:flex-end;gap:8px} #view-agents .ag-edit-btn{font-family:inherit;font-size:12px;font-weight:600;padding:8px 16px;border-radius:18px;border:none;cursor:pointer;transition:all .12s} #view-agents .ag-edit-btn.ghost{background:#fff;color:var(--fd-ink);border:1px solid var(--fd-line)} #view-agents .ag-edit-btn.ghost:hover{background:var(--fd-bg)} #view-agents .ag-edit-btn.primary{background:var(--fd-coral);color:#fff} #view-agents .ag-edit-btn.primary:hover{background:var(--fd-coral-deep)} /* ══════════ CONTRACT BANNER + HISTORY BAR ══════════ */ #view-agents .ct-banner{ background:linear-gradient(90deg, #FAEEDA 0%, transparent 50%); border-left:5px solid #854F0B; padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px; } #view-agents .ct-banner.warn{background:linear-gradient(90deg, #fbeaea 0%, transparent 50%);border-left-color:#A32D2D} #view-agents .ct-banner-l{display:flex;align-items:center;gap:12px;min-width:0} #view-agents .ct-banner-icon{ width:34px;height:34px;border-radius:50%;background:rgba(133,79,11,.15);color:#854F0B; display:flex;align-items:center;justify-content:center;flex-shrink:0; } #view-agents .ct-banner.warn .ct-banner-icon{background:rgba(163,45,45,.15);color:#A32D2D} #view-agents .ct-banner-icon svg{width:15px;height:15px} #view-agents .ct-banner-text{display:flex;flex-direction:column;gap:2px;min-width:0} #view-agents .ct-banner-ttl{font-size:13px;font-weight:700;color:#854F0B;letter-spacing:-0.005em} #view-agents .ct-banner.warn .ct-banner-ttl{color:#A32D2D} #view-agents .ct-banner-sub{font-size:11px;color:var(--fd-ink-mid);font-variant-numeric:tabular-nums;letter-spacing:.02em} #view-agents .ct-btn-renew{ background:var(--fd-coral);border:none;border-radius:18px;padding:8px 16px; font-size:11px;font-weight:600;color:#fff;cursor:pointer;font-family:inherit; display:inline-flex;align-items:center;gap:6px;flex-shrink:0; } #view-agents .ct-btn-renew:hover{background:var(--fd-coral-deep)} #view-agents .ct-btn-renew svg{width:12px;height:12px} #view-agents .ct-btn-renew.warn{background:#A32D2D} #view-agents .ct-btn-renew.warn:hover{background:#7d2222} /* Contract history bar */ #view-agents .ct-history{ padding:12px 22px;background:var(--fd-bg);border-bottom:1px solid var(--fd-line-soft); display:flex;align-items:center;gap:10px;flex-wrap:wrap; } #view-agents .ct-history-lbl{font-size:9px;font-weight:700;color:var(--fd-ink-soft);letter-spacing:.06em;text-transform:uppercase;flex-shrink:0} #view-agents .ct-history-pill{ display:inline-flex;align-items:center;gap:8px;padding:5px 12px; background:#fff;border:1px solid var(--fd-line);border-radius:14px;font-size:11px;cursor:pointer; transition:all .12s; } #view-agents .ct-history-pill:hover{border-color:var(--fd-ink-faint)} #view-agents .ct-history-pill.active{background:#E1F5EE;border-color:transparent;color:#0F6E56;font-weight:600} #view-agents .ct-history-pill.active::before{content:'';width:6px;height:6px;border-radius:50%;background:#0F6E56;box-shadow:0 0 0 3px rgba(15,110,86,.15)} #view-agents .ct-history-pill.expired{color:var(--fd-ink-soft)} #view-agents .ct-history-pill .v{font-variant-numeric:tabular-nums;font-weight:700} #view-agents .ct-history-pill .period{font-variant-numeric:tabular-nums;font-size:10px;color:inherit;opacity:.85} #view-agents .ct-history-pill .ct-archived-icon{opacity:.6;font-size:11px} #view-agents .ct-history-total{margin-left:auto;font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em} /* Renewal Wizard Modal */ #view-agents .ct-wiz{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center} #view-agents .ct-wiz-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.4);backdrop-filter:blur(2px)} #view-agents .ct-wiz-card{position:relative;background:#fff;border-radius:18px;box-shadow:0 16px 48px rgba(0,0,0,.15);width:92%;max-width:680px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden} #view-agents .ct-wiz-hd{ padding:18px 22px;border-bottom:1px solid var(--fd-line-soft); display:flex;align-items:center;justify-content:space-between;gap:14px; background:linear-gradient(90deg, var(--fd-coral-veryfaint) 0%, transparent 50%); } #view-agents .ct-wiz-ttl{font-size:15px;font-weight:700;color:var(--fd-coral-deep);letter-spacing:-0.01em} #view-agents .ct-wiz-sub{font-size:11px;color:var(--fd-ink-mid);font-variant-numeric:tabular-nums;margin-top:1px} #view-agents .ct-wiz-x{width:30px;height:30px;border-radius:50%;border:1px solid var(--fd-line);background:#fff;color:var(--fd-ink-mid);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center} #view-agents .ct-wiz-x:hover{background:#FCEBEB;color:#A32D2D} #view-agents .ct-wiz-steps{padding:14px 22px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--fd-line-soft);background:var(--fd-bg)} #view-agents .ct-wstep{display:flex;align-items:center;gap:7px;color:var(--fd-ink-soft);font-size:11px;font-weight:600} #view-agents .ct-wstep-num{width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--fd-ink-faint);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums} #view-agents .ct-wstep.done .ct-wstep-num{background:#0F6E56;border-color:#0F6E56;color:#fff} #view-agents .ct-wstep.done .ct-wstep-num::before{content:'✓'} #view-agents .ct-wstep.done .ct-wstep-num-num{display:none} #view-agents .ct-wstep.current{color:var(--fd-ink)} #view-agents .ct-wstep.current .ct-wstep-num{background:var(--fd-coral);border-color:var(--fd-coral);color:#fff} #view-agents .ct-wstep-conn{flex:1;height:1.5px;background:var(--fd-line)} #view-agents .ct-wstep.done + .ct-wstep-conn{background:#0F6E56} #view-agents .ct-wiz-body{padding:20px 22px;overflow-y:auto;flex:1} #view-agents .ct-wiz-intro{font-size:12px;color:var(--fd-ink-mid);margin-bottom:14px;line-height:1.5} /* Step 1 — period picker */ #view-agents .ct-period-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin-bottom:10px} #view-agents .ct-period-fld{display:flex;flex-direction:column;gap:4px} #view-agents .ct-period-fld label{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-ink-soft)} #view-agents .ct-period-fld input{padding:9px 12px;font-size:13px;font-variant-numeric:tabular-nums;border:1px solid var(--fd-line);border-radius:10px;outline:none} #view-agents .ct-period-fld input:focus{border-color:var(--fd-coral);box-shadow:0 0 0 3px var(--fd-coral-veryfaint)} #view-agents .ct-period-quickset{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} #view-agents .ct-period-quickset-chip{font-size:10px;font-weight:600;padding:5px 12px;background:#fff;border:1px solid var(--fd-line);border-radius:14px;cursor:pointer;color:var(--fd-ink-mid);font-family:inherit} #view-agents .ct-period-quickset-chip:hover{border-color:var(--fd-coral);color:var(--fd-coral-deep)} /* Step 2 — carry-over checklist */ #view-agents .ct-carry-list{display:flex;flex-direction:column;gap:6px} #view-agents .ct-carry-row{display:flex;align-items:center;gap:10px;padding:11px 12px;background:#fff;border-radius:11px;border:1px solid var(--fd-line);font-size:12px;cursor:pointer;transition:all .12s} #view-agents .ct-carry-row:hover{border-color:var(--fd-coral-soft);background:var(--fd-coral-veryfaint)} #view-agents .ct-carry-row .ct-cb{width:18px;height:18px;border-radius:5px;background:var(--fd-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0} #view-agents .ct-carry-row .ct-cb.off{background:#fff;border:1.5px solid var(--fd-ink-faint);color:transparent} #view-agents .ct-carry-row-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0} #view-agents .ct-carry-row-name{font-weight:600;color:var(--fd-ink);letter-spacing:-0.005em} #view-agents .ct-carry-row-meta{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em} #view-agents .ct-carry-row-pct{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em;flex-shrink:0} /* Step 3 — review */ #view-agents .ct-review-card{background:var(--fd-bg);border-radius:12px;padding:12px 14px;margin-bottom:8px} #view-agents .ct-review-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} #view-agents .ct-review-ttl{font-size:11px;font-weight:700;color:var(--fd-ink);letter-spacing:.02em;display:flex;align-items:center;gap:6px} #view-agents .ct-review-ttl::before{content:'';width:3px;height:12px;background:var(--fd-coral);border-radius:2px} #view-agents .ct-review-body{font-size:11px;color:var(--fd-ink-mid);line-height:1.5} /* Step 4 — activate */ #view-agents .ct-activate{background:#E1F5EE;border-radius:14px;padding:18px;text-align:center;margin-bottom:14px} #view-agents .ct-activate-icon{width:50px;height:50px;border-radius:50%;background:#0F6E56;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:24px} #view-agents .ct-activate-ttl{font-size:14px;font-weight:700;color:#0F6E56;margin-bottom:4px} #view-agents .ct-activate-sub{font-size:11px;color:var(--fd-ink-mid);line-height:1.5} #view-agents .ct-activate-sub strong{color:var(--fd-ink);font-weight:700} #view-agents .ct-versions{display:grid;grid-template-columns:1fr 1fr;gap:10px} #view-agents .ct-versions-card{background:var(--fd-bg);border-radius:12px;padding:12px 14px} #view-agents .ct-versions-card.new{background:#E1F5EE;border:1px solid #c8e8d8} #view-agents .ct-versions-ttl{font-size:11px;font-weight:700;color:var(--fd-ink);margin-bottom:8px;display:flex;align-items:center;gap:5px} #view-agents .ct-versions-card.new .ct-versions-ttl{color:#0F6E56} #view-agents .ct-versions-body{font-size:10px;color:var(--fd-ink-mid);line-height:1.6;font-variant-numeric:tabular-nums;letter-spacing:.02em} #view-agents .ct-versions-body .v{font-weight:700;color:var(--fd-ink);font-size:12px} #view-agents .ct-versions-card.new .ct-versions-body .v{color:#0F6E56} #view-agents .ct-wiz-ft{padding:14px 22px;border-top:1px solid var(--fd-line-soft);display:flex;justify-content:space-between;align-items:center;gap:8px} #view-agents .ct-wiz-ft-l{font-size:11px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums} #view-agents .ct-wiz-ft-r{display:flex;gap:8px} #view-agents .ct-wiz-btn-sec{background:#fff;border:1px solid var(--fd-line);border-radius:18px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--fd-ink);cursor:pointer;font-family:inherit} #view-agents .ct-wiz-btn-sec:hover{background:var(--fd-bg)} #view-agents .ct-wiz-btn-pri{background:var(--fd-coral);border:none;border-radius:18px;padding:8px 18px;font-size:12px;font-weight:600;color:#fff;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px} #view-agents .ct-wiz-btn-pri:hover{background:var(--fd-coral-deep)} #view-agents .ct-wiz-btn-pri.activate{background:#0F6E56} #view-agents .ct-wiz-btn-pri.activate:hover{background:#0a5642} #view-agents .ct-wiz-btn-pri svg{width:11px;height:11px} /* Nav notification badge */ .nav-item .ct-nav-badge{ margin-left:auto;background:var(--coral, #ff6b47);color:#fff;font-size:9px;font-weight:700; padding:1px 6px;border-radius:8px;font-variant-numeric:tabular-nums; } /* ══════════ ARCHIVED CONTRACT SIDE PANEL ══════════ */ #view-agents .ct-arch-panel{position:fixed;inset:0;z-index:180;display:flex;justify-content:flex-end} #view-agents .ct-arch-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.25);backdrop-filter:blur(1px);cursor:pointer} #view-agents .ct-arch-side{ position:relative;background:#fff;width:520px;max-width:95vw;height:100%; display:flex;flex-direction:column;overflow:hidden; box-shadow:-12px 0 32px rgba(0,0,0,.12); animation:ctArchSlideIn .25s ease-out; } @keyframes ctArchSlideIn{ from{transform:translateX(100%)} to{transform:translateX(0)} } #view-agents .ct-arch-banner{ padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px; background:linear-gradient(90deg, #f4ecde 0%, transparent 65%); border-left:5px solid #8a7548;border-bottom:1px solid var(--fd-line-soft); flex-shrink:0; } #view-agents .ct-arch-banner-l{display:flex;align-items:center;gap:10px} #view-agents .ct-arch-banner-icon{font-size:22px;flex-shrink:0} #view-agents .ct-arch-banner-ttl{font-size:13px;font-weight:700;color:#8a7548;letter-spacing:-0.005em} #view-agents .ct-arch-banner-sub{font-size:10px;color:var(--fd-ink-mid);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-top:2px} #view-agents .ct-arch-x{width:30px;height:30px;border-radius:50%;border:1px solid var(--fd-line);background:#fff;color:var(--fd-ink-mid);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0} #view-agents .ct-arch-x:hover{background:#FCEBEB;color:#A32D2D} #view-agents .ct-arch-body{padding:18px 20px;overflow-y:auto;flex:1} /* Archived sections (similar to agi but slightly muted) */ #view-agents .ct-arch-sect{margin-bottom:18px} #view-agents .ct-arch-sect:last-child{margin-bottom:0} #view-agents .ct-arch-sect-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--fd-line-soft)} #view-agents .ct-arch-sect-ttl{font-size:12px;font-weight:700;color:var(--fd-ink);letter-spacing:0;display:flex;align-items:center;gap:8px} #view-agents .ct-arch-sect-ttl::before{content:'';width:3px;height:13px;background:#8a7548;border-radius:2px} #view-agents .ct-arch-sect-cnt{font-size:10px;font-weight:600;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;margin-left:4px} /* Period summary card */ #view-agents .ct-arch-validity{ background:linear-gradient(90deg, #f4ecde 0%, transparent 60%); border-radius:12px;padding:14px 16px;margin-bottom:14px; display:flex;align-items:center;gap:18px; } #view-agents .ct-arch-validity-col{display:flex;flex-direction:column;gap:2px;flex:1} #view-agents .ct-arch-validity-lbl{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-ink-soft)} #view-agents .ct-arch-validity-val{font-size:15px;font-weight:700;color:var(--fd-ink);font-variant-numeric:tabular-nums;letter-spacing:-0.005em} #view-agents .ct-arch-validity-sep{font-size:14px;color:#8a7548;font-weight:700} #view-agents .ct-arch-validity-meta{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:2px} /* Programs list (compact for archived view) */ #view-agents .ct-arch-prog-list{display:flex;flex-direction:column;gap:5px} #view-agents .ct-arch-prog-row{ display:grid;grid-template-columns:12px 1fr auto auto;gap:10px;align-items:center; padding:9px 12px;background:var(--fd-bg);border-radius:10px; } #view-agents .ct-arch-prog-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} #view-agents .ct-arch-prog-info{display:flex;flex-direction:column;gap:1px;min-width:0} #view-agents .ct-arch-prog-name{font-size:12px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-agents .ct-arch-prog-pier{font-size:9px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase;font-weight:600} #view-agents .ct-arch-prog-period{display:flex;flex-direction:column;gap:1px;text-align:right;font-size:10px;font-variant-numeric:tabular-nums;color:var(--fd-ink-mid)} #view-agents .ct-arch-prog-period-lbl{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-ink-soft)} /* Add-on list (compact) */ #view-agents .ct-arch-addon-row{ background:var(--fd-bg);border-radius:10px;padding:9px 12px;margin-bottom:5px; display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center; } #view-agents .ct-arch-addon-row .aos-svc-icon{width:28px;height:28px} #view-agents .ct-arch-addon-row .aos-svc-icon svg{width:13px;height:13px} #view-agents .ct-arch-addon-info{display:flex;flex-direction:column;gap:1px} #view-agents .ct-arch-addon-name{font-size:12px;font-weight:700;color:var(--fd-ink)} #view-agents .ct-arch-addon-vars{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em} /* Signatory card */ #view-agents .ct-arch-sig{ background:#E1F5EE;border-radius:12px;padding:12px 14px; } #view-agents .ct-arch-sig-role{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#0F6E56;margin-bottom:5px} #view-agents .ct-arch-sig-name{font-size:13px;font-weight:700;color:#0F6E56;letter-spacing:-0.005em} #view-agents .ct-arch-sig-pos{font-size:11px;color:var(--fd-ink-mid);font-variant-numeric:tabular-nums;margin-top:1px} #view-agents .ct-arch-sig-meta{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:5px} /* Empty data */ #view-agents .ct-arch-empty{ font-size:11px;color:var(--fd-ink-soft);font-style:italic; padding:10px 14px;background:var(--fd-bg);border-radius:10px;text-align:center; } /* Action: open as wizard from archived */ #view-agents .ct-arch-actions{ padding:14px 20px;border-top:1px solid var(--fd-line-soft); display:flex;justify-content:space-between;align-items:center;gap:10px; background:var(--fd-bg);flex-shrink:0; } #view-agents .ct-arch-actions-l{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em} /* Highlight current-viewing pill */ #view-agents .ct-history-pill.viewing{ background:#f4ecde;border-color:transparent;color:#8a7548;font-weight:600; } #view-agents .ct-history-pill.viewing::before{content:'';width:6px;height:6px;border-radius:50%;background:#8a7548;box-shadow:0 0 0 3px rgba(138,117,72,.15)} /* Form fields */ #view-agents .ag-fld{display:flex;flex-direction:column;gap:5px} #view-agents .ag-fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} #view-agents .ag-fld-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} #view-agents .ag-fld-lbl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-ink-soft)} #view-agents .ag-fld-lbl .req{color:var(--fd-coral)} #view-agents .ag-fld input,#view-agents .ag-fld textarea,#view-agents .ag-fld select{padding:8px 12px;font-size:12px;font-family:inherit;border:1px solid var(--fd-line);border-radius:10px;outline:none;transition:all .12s;color:var(--fd-ink);background:#fff} #view-agents .ag-fld textarea{resize:vertical;min-height:60px;font-family:inherit} #view-agents .ag-fld input:focus,#view-agents .ag-fld textarea:focus,#view-agents .ag-fld select:focus{border-color:var(--fd-coral);box-shadow:0 0 0 3px var(--fd-coral-veryfaint)} #view-agents .ag-fld input[disabled]{background:var(--fd-bg);color:var(--fd-ink-soft);cursor:not-allowed} #view-agents .ag-fld.ag-need input,#view-agents .ag-fld.ag-need textarea,#view-agents .ag-fld.ag-need select{border-color:#E5484D;background:#FEF3F2} #view-agents .ag-fld.ag-need input:focus,#view-agents .ag-fld.ag-need textarea:focus,#view-agents .ag-fld.ag-need select:focus{box-shadow:0 0 0 3px rgba(229,72,77,.15)} #view-agents .ag-fld.ag-need .ag-fld-lbl{color:#C4262E} #view-agents .ag-fld-hint{font-size:10px;color:var(--fd-ink-soft);margin-top:2px;font-style:italic} #view-agents .ag-sub-dd{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--fd-line);border-radius:9px;box-shadow:0 8px 24px rgba(15,23,42,.14);max-height:208px;overflow-y:auto;z-index:60;padding:4px} #view-agents .ag-sub-opt{padding:8px 11px;font-size:12.5px;color:var(--fd-ink);border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-agents .ag-sub-opt:hover{background:var(--fd-coral-soft)} #view-agents .ag-sub-new{color:#185FA5;font-weight:600;border-top:1px solid var(--fd-line-soft);margin-top:2px} /* Section subtitle inside modal */ #view-agents .ag-edit-subhd{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fd-coral-deep);padding-bottom:6px;border-bottom:1px dashed var(--fd-coral-soft);margin-top:8px} /* Program period editor row */ #view-agents .ag-pp-row{background:var(--fd-bg);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;position:relative} #view-agents .ag-pp-row-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px} #view-agents .ag-pp-route-pick{flex:1} #view-agents .ag-pp-row-rm{background:transparent;border:none;color:var(--fd-ink-soft);font-size:13px;cursor:pointer;padding:4px 6px;border-radius:6px} #view-agents .ag-pp-row-rm:hover{background:#FCEBEB;color:#A32D2D} #view-agents .ag-pp-dates{display:grid;grid-template-columns:1fr 1fr;gap:8px} #view-agents .ag-pp-period-block{display:flex;flex-direction:column;gap:4px} #view-agents .ag-pp-period-ttl{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-ink-soft);display:flex;align-items:center;gap:5px} #view-agents .ag-pp-period-ttl::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fd-ink-faint)} #view-agents .ag-pp-period-ttl.book::before{background:#185FA5} #view-agents .ag-pp-period-ttl.travel::before{background:var(--fd-coral)} #view-agents .ag-pp-period-inputs{display:grid;grid-template-columns:1fr 1fr;gap:6px} #view-agents .ag-pp-add{background:transparent;border:1px dashed var(--fd-line);border-radius:12px;padding:11px;color:var(--fd-ink-soft);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit} #view-agents .ag-pp-add:hover{border-color:var(--fd-coral);color:var(--fd-coral-deep)} /* ══════════ Pricing Tab — Sections (incl. Additional Services) ══════════ */ #view-agents .agp-sect{margin-bottom:24px} #view-agents .agp-sect:last-child{margin-bottom:0} #view-agents .agp-sect-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--fd-line-soft);gap:14px} #view-agents .agp-sect-ttl{font-size:13px;font-weight:700;color:var(--fd-ink);letter-spacing:0;display:flex;align-items:center;gap:8px} #view-agents .agp-sect-ttl::before{content:'';width:4px;height:14px;background:var(--fd-coral);border-radius:2px} #view-agents .agp-sect-cnt{font-size:10px;font-weight:600;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;margin-left:6px;letter-spacing:.02em} #view-agents .agp-sect-desc{font-size:11px;color:var(--fd-ink-soft);margin-top:2px;font-weight:400} #view-agents .agp-sect-act{font-size:11px;color:var(--fd-coral);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--fd-coral-soft);font-family:inherit;padding:5px 12px;border-radius:14px;transition:all .12s} #view-agents .agp-sect-act:hover{background:var(--fd-coral-veryfaint)} #view-agents .agp-sect-act svg{width:11px;height:11px} /* Add-on empty state */ #view-agents .agp-addon-empty{background:var(--fd-bg);border-radius:14px;padding:30px 18px;text-align:center} /* Add-on cards */ #view-agents .agp-addon-list{display:flex;flex-direction:column;gap:10px} #view-agents .agp-addon-card{background:#fff;border:1px solid var(--fd-line);border-radius:14px;overflow:hidden} #view-agents .agp-addon-card-hd{padding:12px 16px;display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--fd-line-soft)} #view-agents .agp-addon-card-info{display:flex;flex-direction:column;gap:1px;min-width:0} #view-agents .agp-addon-card-name{font-size:13px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.005em} #view-agents .agp-addon-card-meta{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums} #view-agents .agp-addon-card-body{padding:10px 16px 12px} #view-agents .agp-addon-variants{display:flex;flex-direction:column;gap:6px} #view-agents .agp-addon-variant{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:8px 12px;background:var(--fd-bg);border-radius:10px} #view-agents .agp-addon-variant-info{display:flex;flex-direction:column;gap:1px;min-width:0} #view-agents .agp-addon-variant-ttl{font-size:12px;font-weight:600;color:var(--fd-ink-mid)} #view-agents .agp-addon-variant-unit{font-size:9px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em} #view-agents .agp-addon-pcol{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:78px} #view-agents .agp-addon-plbl{font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fd-ink-soft)} #view-agents .agp-addon-pval{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;font-variant-numeric:tabular-nums;color:var(--fd-ink)} #view-agents .agp-addon-pval.net{color:#0F6E56} /* Service picker modal list */ #view-agents .agp-pick-list{display:flex;flex-direction:column;gap:8px;margin-top:4px} #view-agents .agp-pick-card{background:#fff;border:1px solid var(--fd-line);border-radius:14px;padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .12s} #view-agents .agp-pick-card:hover{border-color:var(--fd-coral);background:var(--fd-coral-veryfaint)} #view-agents .agp-pick-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} #view-agents .agp-pick-name{font-size:13px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.005em} #view-agents .agp-pick-meta{font-size:10px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums} /* Variant price editor modal */ #view-agents .agp-var-list{display:flex;flex-direction:column;gap:8px;margin-top:4px} #view-agents .agp-var-row{background:var(--fd-bg);border-radius:12px;padding:12px;display:grid;grid-template-columns:1fr 110px 110px;gap:10px;align-items:end} #view-agents .agp-var-info{display:flex;flex-direction:column;gap:2px;min-width:0;padding-bottom:8px} #view-agents .agp-var-ttl{font-size:12px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.005em} #view-agents .agp-var-unit{font-size:9px;color:var(--fd-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:uppercase;font-weight:600} #view-agents .agp-var-fld{display:flex;flex-direction:column;gap:3px} #view-agents .agp-var-fld label{font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fd-ink-soft)} #view-agents .agp-var-fld input{padding:7px 10px;font-size:12px;font-variant-numeric:tabular-nums;border:1px solid var(--fd-line);border-radius:8px;outline:none;color:var(--fd-ink);background:#fff;text-align:right} #view-agents .agp-var-fld input:focus{border-color:var(--fd-coral);box-shadow:0 0 0 3px var(--fd-coral-veryfaint)} /* Modal buttons */ #view-agents .agp-btn-ghost{background:#fff;color:var(--fd-ink);border:1px solid var(--fd-line);font-family:inherit;font-size:12px;font-weight:600;padding:8px 16px;border-radius:18px;cursor:pointer} #view-agents .agp-btn-ghost:hover{background:var(--fd-bg)} #view-agents .agp-btn-primary{background:var(--fd-coral);color:#fff;border:none;font-family:inherit;font-size:12px;font-weight:600;padding:8px 16px;border-radius:18px;cursor:pointer} #view-agents .agp-btn-primary:hover{background:var(--fd-coral-deep)} /* Re-use aos-svc-icon classes for icons */ #view-agents .aos-svc-icon{display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;width:36px;height:36px} #view-agents .aos-svc-icon svg{width:16px;height:16px} #view-agents .aos-svc-icon.boat{background:#E6F1FB;color:#185FA5} #view-agents .aos-svc-icon.van{background:#FAEEDA;color:#854F0B} #view-agents .aos-svc-icon.guide{background:var(--fd-coral-soft);color:var(--fd-coral-deep)} #view-agents .aos-svc-icon.other{background:#E1F5EE;color:#0F6E56} #view-agents .aos-icon-btn{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--fd-line);color:var(--fd-ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s} #view-agents .aos-icon-btn:hover{background:var(--fd-bg);color:var(--fd-ink)} #view-agents .aos-icon-btn.danger:hover{background:#FCEBEB;color:#A32D2D;border-color:#FCEBEB} #view-agents .aos-icon-btn svg{width:11px;height:11px} /* Filter button + popover */ #view-agents .ag-filter-btn{ display:inline-flex;align-items:center;justify-content:center;gap:5px; width:28px;height:24px;padding:0 6px; background:#fff;border:1px solid var(--fd-line);border-radius:7px; color:var(--fd-ink-mid);cursor:pointer;transition:all .12s; font-variant-numeric:tabular-nums;font-size:9px;font-weight:600; position:relative; } #view-agents .ag-filter-btn:hover{border-color:var(--fd-ink-soft);color:var(--fd-ink)} #view-agents .ag-filter-btn.has-filter{background:var(--fd-coral);border-color:var(--fd-coral);color:#fff} #view-agents .ag-filter-btn svg{width:11px;height:11px} #view-agents .ag-filter-btn span{font-size:9px;font-weight:700;line-height:1} #view-agents .ag-filter-btn span:empty{display:none} /* Popover */ #view-agents .ag-filter-pop{ position:absolute;top:calc(100% + 8px);right:0;z-index:50; background:#fff;border:1px solid var(--fd-line); border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04); padding:14px;width:320px; display:flex;flex-direction:column;gap:10px; } #view-agents .ag-filter-pop-hd{ display:flex;align-items:center;justify-content:space-between; padding-bottom:8px;border-bottom:1px solid var(--fd-line-soft); margin-bottom:2px; } #view-agents .ag-filter-pop-ttl{ font-size:12px;font-weight:700;color:var(--fd-ink);letter-spacing:-0.005em; } #view-agents .ag-filter-pop-clear{ background:transparent;border:none;color:var(--fd-coral);cursor:pointer; font-size:11px;font-weight:600;font-family:inherit;padding:2px 6px; } #view-agents .ag-filter-pop-clear:hover{text-decoration:underline} /* Filter rows inside popover */ #view-agents .ag-filter-pop .ag-filter-row{ display:flex;flex-direction:column;gap:6px;align-items:stretch; background:transparent;border:none;border-radius:0;padding:0; } #view-agents .ag-filter-pop .ag-filter-lbl{ font-size:10px;font-weight:700;color:var(--fd-ink-soft); min-width:auto;text-transform:uppercase;letter-spacing:.06em; padding:0;border:none;margin:0; } #view-agents .ag-filter-pop .filter-pills{display:flex;gap:4px;flex-wrap:wrap} /* Chips inside popover — smaller, same C1 style */ #view-agents .ag-filter-pop .fp{ padding:4px 10px 4px 6px;border-radius:14px; font-size:10.5px;color:var(--fd-ink-mid);background:transparent; border:none;font-weight:500;display:inline-flex;align-items:center;gap:6px; cursor:pointer;transition:all .12s; } #view-agents .ag-filter-pop .fp:hover{background:var(--fd-bg)} #view-agents .ag-filter-pop .fp.on{font-weight:700;color:var(--fd-ink);background:#eeece6} #view-agents .ag-filter-pop .fp-cnt{font-size:9px;font-variant-numeric:tabular-nums;color:var(--fd-ink-soft);font-weight:600} #view-agents .ag-filter-pop .fp.on .fp-cnt{display:none} #view-agents .ag-filter-pop .fp > span:first-child{display:inline-flex;align-items:center;justify-content:center;width:9px;height:9px;border-radius:50%;flex-shrink:0;color:transparent;font-size:0;transition:all .15s} /* Agent List */ .sb-wrap{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:flex-start} .sb-side{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:80px;max-height:calc(100vh - 100px);display:flex;flex-direction:column} .sb-side-hd{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--sand-mid)} .sb-side-hd-ttl{font-size:11px;font-weight:600;color:var(--ink)} .sb-side-body{overflow-y:auto;flex:1} .sb-mkt-group{border-bottom:1px solid var(--border)} .sb-mkt-hd{padding:8px 14px;background:var(--sand);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mid);cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none} .sb-mkt-hd:hover{background:var(--sand-dark)} .sb-mkt-chev{transition:transform .15s;display:inline-block;font-size:9px;color:var(--ink-soft)} .sb-mkt-group.collapsed .sb-mkt-chev{transform:rotate(-90deg)} .sb-mkt-group.collapsed .sb-mkt-list{display:none} .sb-mkt-count{margin-left:auto;font-size:10px;color:var(--ink-soft);background:rgba(0,0,0,.04);padding:1px 6px;border-radius:8px;font-family:'DM Mono',monospace} .sb-mkt-list{padding:4px 0} .sb-ag-row:hover{background:var(--sand);color:var(--ink)} .sb-ag-row.sel{background:var(--sb-pink-light);border-left-color:var(--sb-pink);color:var(--sb-pink-dark);font-weight:500} .sb-ag-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);flex-shrink:0} .sb-ag-row.sel .sb-ag-dot{background:var(--sb-pink)} .sb-ag-sub{margin-left:auto;font-size:9px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em} .sb-main{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;min-height:400px} .sb-main-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .sb-main-ttl{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px} .sb-main-sub{font-size:11px;color:var(--ink-soft);margin-top:2px} .sb-main-body{padding:18px} .sb-empty{padding:50px 20px;text-align:center;color:var(--ink-soft);font-size:12px} .sb-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 18px;background:#fff} .sb-tab{padding:10px 16px;font-size:12px;font-weight:500;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;transition:all .12s;display:flex;align-items:center;gap:6px} .sb-tab:hover{color:var(--ink)} .sb-tab.on{color:var(--sb-pink-dark);border-bottom-color:var(--sb-pink)} .sb-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:16px} .sb-meta-card{background:var(--sand);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px} .sb-meta-lbl{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px} .sb-meta-val{font-size:13px;color:var(--ink);font-weight:500} .sb-meta-val.mono{font-family:'DM Mono',monospace;font-size:12px} .sb-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:500;background:var(--sand-dark);color:var(--ink-mid)} .sb-chip.pink{background:var(--sb-pink-light);color:var(--sb-pink-dark)} .sb-chip.blue{background:var(--ocean-50);color:var(--ocean)} .sb-chip.green{background:var(--green-light);color:var(--green-dark)} .sb-chip.amber{background:var(--amber-light);color:#7a4a00} /* Price Matrix */ .sb-price-tbl{width:100%;border-collapse:collapse;font-size:11px} .sb-price-tbl th{padding:8px 10px;text-align:left;font-size:10px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;background:var(--sand);border-bottom:1px solid var(--border)} .sb-price-tbl th.num,.sb-price-tbl td.num{text-align:right;font-family:'DM Mono',monospace} .sb-price-tbl td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--ink)} .sb-price-tbl tr:hover td{background:var(--sand)} .sb-price-tbl tr.prog-row td{background:var(--sand-mid);font-weight:500} .sb-price-tbl .prog-name{font-size:12px;font-weight:500;color:var(--ink)} .sb-price-tbl .prog-pier{font-size:9px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em} .sb-price-tbl .pax-cell{display:flex;flex-direction:column;gap:2px} .sb-price-tbl .pax-thai{color:var(--ink)} .sb-price-tbl .pax-foreigner{color:var(--ocean)} .sb-price-tbl .pax-lbl{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-right:4px} .sb-price-tbl input.price-in{width:70px;padding:3px 5px;font-size:11px;font-family:'DM Mono',monospace;text-align:right;border:1px solid var(--border);border-radius:3px;background:transparent} .sb-price-tbl input.price-in:focus{border-color:var(--sb-pink);outline:none} /* Booking entry */ .bk-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);background:#fff;border-radius:var(--r) var(--r) 0 0;overflow:hidden} .bk-tab{flex:1;padding:14px 20px;font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer;border-bottom:3px solid transparent;text-align:center;transition:all .12s;background:var(--sand)} .bk-tab.on{background:#fff;color:var(--sb-pink-dark);border-bottom-color:var(--sb-pink)} .bk-tab svg{width:14px;height:14px;display:inline-block;vertical-align:middle;margin-right:6px} .bk-form{background:#fff;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);padding:20px;box-shadow:var(--shadow)} .bk-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .bk-fld{display:flex;flex-direction:column;gap:5px} .bk-fld-lbl{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)} .bk-fld-lbl .req{color:var(--coral);margin-left:2px} .bk-fld input,.bk-fld select,.bk-fld textarea{padding:8px 10px;font-size:12px;font-family:'DM Sans',sans-serif;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;color:var(--ink);outline:none;transition:all .12s} .bk-fld input:focus,.bk-fld select:focus,.bk-fld textarea:focus{border-color:var(--sb-pink);box-shadow:0 0 0 3px var(--sb-pink-light)} .bk-fld textarea{resize:vertical;min-height:60px;font-family:'DM Sans',sans-serif} .bk-pax-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .bk-pax-card{background:var(--sand);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px;display:flex;flex-direction:column;gap:4px;text-align:center} .bk-pax-card .lbl{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)} .bk-pax-card input{padding:6px;font-size:18px;font-weight:600;text-align:center;border:1px solid var(--border);border-radius:var(--r-sm);font-family:'DM Mono',monospace;color:var(--ink);background:#fff} .bk-pax-card .price{font-size:10px;color:var(--ink-soft);font-family:'DM Mono',monospace} .bk-summary{background:linear-gradient(135deg,var(--sb-pink-light) 0%,#fff 100%);border:1px solid var(--sb-pink-light);border-radius:var(--r);padding:14px 16px;margin-top:14px} .bk-summary-row{display:flex;justify-content:space-between;padding:5px 0;font-size:12px} .bk-summary-row .lbl{color:var(--ink-soft)} .bk-summary-row .val{font-family:'DM Mono',monospace;color:var(--ink);font-weight:500} .bk-summary-row.total{border-top:1px solid rgba(212,74,127,.2);margin-top:6px;padding-top:10px} .bk-summary-row.total .lbl{font-weight:600;color:var(--sb-pink-dark)} .bk-summary-row.total .val{font-size:18px;font-weight:600;color:var(--sb-pink-dark)} .bk-section-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)} .bk-section-divider::before,.bk-section-divider::after{content:'';flex:1;height:1px;background:var(--border)} .bk-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} .btn-pink{background:var(--sb-pink);border-color:var(--sb-pink);color:#fff} .btn-pink:hover{background:var(--sb-pink-dark)} /* Recent bookings strip */ .bk-recent{margin-top:18px;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .bk-recent-hd{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--sand-mid)} .bk-recent-hd-ttl{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mid)} .bk-recent-tbl{width:100%;border-collapse:collapse;font-size:11px} .bk-recent-tbl th{padding:9px 12px;text-align:left;font-size:9px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;background:#fff;border-bottom:1px solid var(--border)} .bk-recent-tbl th.num,.bk-recent-tbl td.num{text-align:right;font-family:'DM Mono',monospace} .bk-recent-tbl td{padding:9px 12px;border-bottom:0.5px solid var(--border);color:var(--ink)} .bk-recent-tbl tr:hover td{background:var(--sand)} .bk-recent-tbl .bk-id{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft)} /* B2C channels - card style */ .b2c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .b2c-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);transition:all .15s;cursor:pointer;position:relative;overflow:hidden} .b2c-card:hover{border-color:var(--sb-pink);transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,74,127,.08)} .b2c-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sb-pink)} .b2c-card.campaign::before{background:var(--coral)} .b2c-card-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px} .b2c-card-icon{width:36px;height:36px;border-radius:8px;background:var(--sb-pink-light);display:flex;align-items:center;justify-content:center;color:var(--sb-pink-dark)} .b2c-card.campaign .b2c-card-icon{background:var(--coral-light);color:var(--coral)} .b2c-card-icon svg{width:18px;height:18px} .b2c-card-name{font-size:13px;font-weight:600;color:var(--ink)} .b2c-card-type{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-top:1px} .b2c-card-stats{display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--border);margin-top:8px} .b2c-card-stat{flex:1} .b2c-card-stat-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)} .b2c-card-stat-val{font-size:16px;font-weight:600;color:var(--ink);font-family:'DM Mono',monospace;line-height:1.2;margin-top:2px} .b2c-card-note{font-size:10px;color:var(--ink-soft);margin-top:6px;line-height:1.4} /* KPI cards adapted for sales */ .sb-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px} .sb-kpi{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden} .sb-kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--sb-pink)} .sb-kpi.k-blue::after{background:var(--ocean-mid)} .sb-kpi.k-green::after{background:var(--green)} .sb-kpi.k-amber::after{background:var(--amber)} .sb-kpi-lbl{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)} .sb-kpi-val{font-size:22px;font-weight:600;color:var(--ink);font-family:'DM Sans',sans-serif;margin-top:3px;line-height:1} .sb-kpi-sub{font-size:10px;color:var(--ink-soft);margin-top:3px;font-family:'DM Mono',monospace} /* §localDemo · "Local Demo" corner ribbon (markup at the top of ). display:none is the safe default: it only becomes visible when js/03-topbar-nav.js decides the page is being served locally and puts .la-local on . Production never gets the class, so this costs a deployed page one hidden div. pointer-events:none throughout — the ribbon sits over the top-right of the topbar, and a banner that ate clicks on the tools button would be a real bug. */ #la-demo-banner{position:fixed;top:0;right:0;width:190px;height:190px;overflow:hidden; pointer-events:none;z-index:99999;display:none} .la-local #la-demo-banner{display:block} #la-demo-banner span{position:absolute;display:block;width:280px;right:-66px;top:46px; padding:11px 0;transform:rotate(45deg);text-align:center; background:linear-gradient(180deg,#E24B3A,#C0392B);color:#fff; font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:700;line-height:1; letter-spacing:.18em;text-transform:uppercase; box-shadow:0 6px 20px rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.35); border-bottom:1px solid rgba(0,0,0,.15)} @media (max-width:820px){ #la-demo-banner{width:140px;height:140px} #la-demo-banner span{width:210px;right:-52px;top:34px;padding:8px 0;font-size:12px} } /* ══ §btOther · แถบโปรแกรมที่ไม่ใช้เรือ ท้ายหน้า By trip · date ตัวตารางใช้ .t2-mtbl ของหน้านี้เอง ที่นี่จึงมีแค่กรอบกับหัวบล็อก */ #view-booking .bto-wrap{margin:14px 0 8px;border:1px solid #E3D7F2;border-radius:12px;background:#fff;overflow:hidden} #view-booking .bto-hd{display:flex;align-items:center;gap:10px;padding:9px 13px;background:#F6F0FC;border-bottom:1px solid #E3D7F2;flex-wrap:wrap} #view-booking .bto-ttl{font-size:11px;font-weight:800;letter-spacing:.06em;color:#5B289A} #view-booking .bto-sub{font-size:10.5px;color:#6B5B7E;font-variant-numeric:tabular-nums} #view-booking .bto-sub b{font-family:'DM Mono',ui-monospace,monospace;color:#5B289A} #view-booking .bto-tg{margin-left:auto;border:1px solid #D7B5F0;background:#fff;color:#5B289A;border-radius:6px;padding:3px 10px;font:700 10px inherit;font-family:inherit;cursor:pointer} #view-booking .bto-tg:hover{background:#F3EAFB} #view-booking .bto-blk{border-top:1px solid #F0EAF7} #view-booking .bto-blk:first-of-type{border-top:0} #view-booking .bto-blkhd{display:flex;align-items:center;gap:8px;padding:7px 13px;background:#FCFAFE} #view-booking .bto-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} #view-booking .bto-rt{font-size:11.5px;font-weight:700;color:var(--ink)} #view-booking .bto-tm{font-family:'DM Mono',ui-monospace,monospace;font-size:10px;color:#8a8f98} #view-booking .bto-cap{margin-left:auto;font-family:'DM Mono',ui-monospace,monospace;font-size:10px;color:#5A5A52} #view-booking .bto-cap-nolim{color:#5B289A} #view-booking .bto-px{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;font-weight:700;color:var(--ink);min-width:52px;text-align:right} /* ตารางนี้แคบกว่าฝั่งเรือ ไม่ต้องกว้าง 1180px ตามค่าตั้งต้นของ .t2-mtbl */ #view-booking table.bto-tbl{min-width:940px} #view-booking .bto-veh{display:inline-block;background:#F3EAFB;color:#5B289A;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600} #view-booking .bto-sreq{font-size:10px;color:#6b7280;margin-top:2px;line-height:1.3} #view-booking .bto-hid{padding:5px 13px;font-size:10px;color:#8a8f98;font-style:italic;background:#FCFCFD;border-top:1px dashed #EFEAF5} /* ══ §agSheet · แท็บ Information ของ Agent · โหมดตาราง ════════════════════════ ของเดิมเป็นการ์ดมุมมนซ้อนกันเป็นชั้น ๆ ทุกอย่างมีพื้นหลังและขอบของตัวเอง อ่านทีละใบได้ แต่ไล่สายตาข้ามบรรทัดไม่ได้ · และกินความสูงมาก ข้อมูลหน้านี้เป็นตารางโดยธรรมชาติอยู่แล้ว — โปรแกรม × ช่วงจอง × ช่วงเดินทาง จึงทำให้เป็นตารางจริง ๆ · แถวเตี้ย เส้นคั่นบาง คอลัมน์ตรงกัน ตัวเลขเรียงหลัก แก้ที่ CSS ชั้นเดียว ไม่แตะ HTML และไม่แตะตรรกะเลย กฎมือถือใน 02-skins.css ใช้ !important อยู่แล้ว จึงยังชนะบล็อกนี้ตามเดิม ไม่ชอบเมื่อไหร่ลบทั้งบล็อกนี้ทิ้ง หน้าก็กลับไปเป็นการ์ดเหมือนเดิมเป๊ะ ═══════════════════════════════════════════════════════════════════════════ */ #view-agents .agi-sect{margin-bottom:18px} #view-agents .agi-sect-hd{margin-bottom:7px;padding-bottom:6px} #view-agents .agi-sect-ttl{font-size:12px} #view-agents .agi-sect-ttl::before{height:12px;width:3px} #view-agents .agi-sect-desc{font-size:10.5px;margin-top:1px} /* ── คนดูแล · บรรทัดเดียว ไม่ใช่การ์ด ── */ #view-agents .agi-sales-card{background:transparent;border:1px solid var(--fd-line); border-radius:8px;padding:7px 11px;gap:10px} #view-agents .agi-sales-av{width:26px;height:26px;font-size:9.5px;border-radius:6px} #view-agents .agi-sales-info{flex-direction:row;align-items:baseline;gap:9px;flex-wrap:wrap} #view-agents .agi-sales-lbl{font-size:9px;flex:none} #view-agents .agi-sales-name{font-size:12.5px} #view-agents .agi-sales-meta{font-size:10.5px} #view-agents .agi-icon-btn{width:26px;height:26px;border-radius:6px} /* ── แถบสรุป · แบนราบ ไม่ใช่กล่อง ── */ #view-agents .agi-prog-summary{background:transparent;border-top:1px solid var(--fd-line-soft); border-bottom:1px solid var(--fd-line-soft);border-radius:0;padding:7px 2px;margin-bottom:0;gap:14px} #view-agents .agi-prog-sum-item{flex-direction:row;align-items:baseline;gap:7px} #view-agents .agi-prog-sum-lbl{font-size:8.5px;flex:none} #view-agents .agi-prog-sum-val{font-size:11.5px;font-weight:600} #view-agents .agi-prog-sum-val.mono{font-size:11.5px} /* ── หัวตาราง · แบบชีต ── */ #view-agents .agi-prog-header{background:var(--fd-bg);border-bottom:1px solid var(--fd-line); padding:5px 12px;font-size:8.5px;gap:12px;margin-top:8px} /* ── แถว · เตี้ย ติดกัน คั่นด้วยเส้นบาง ── */ #view-agents .agi-prog-list{gap:0} #view-agents .agi-prog-row{border:none;border-bottom:1px solid var(--fd-line-soft);border-radius:0; padding:6px 12px;gap:12px;transition:background .1s} #view-agents .agi-prog-row:hover{background:var(--fd-coral-veryfaint);border-color:var(--fd-line-soft)} #view-agents .agi-prog-dot{width:8px;height:8px;border-radius:2px} /* ชื่อโปรแกรมกับท่าเรืออยู่บรรทัดเดียวกัน · สองบรรทัดทำให้แถวสูงเป็นเท่าตัวโดยไม่ได้ข้อมูลเพิ่ม */ #view-agents .agi-prog-name-wrap{flex-direction:row;align-items:baseline;gap:8px} #view-agents .agi-prog-name{font-size:12px;font-weight:600} #view-agents .agi-prog-pier{font-size:8.5px;flex:none;white-space:nowrap} /* คำว่า Booking / Travel ซ้ำทุกแถว ทั้งที่หัวคอลัมน์บอกไปแล้ว · ซ่อนคำ เก็บชิป ↳RT / orphan ไว้ (ชิปมี font-size ของตัวเองแบบ inline จึงไม่โดน font-size:0 ของแม่) */ #view-agents .agi-period-col{flex-direction:row-reverse;justify-content:flex-end; align-items:baseline;gap:6px} #view-agents .agi-period-lbl{font-size:0;gap:0} #view-agents .agi-period-lbl::before{display:none} #view-agents .agi-period-val{font-size:11.5px;font-weight:500;font-family:'DM Mono',ui-monospace,monospace} #view-agents .agi-prog-actions{gap:3px} #view-agents .agi-prog-act-btn{width:22px;height:22px;border-radius:5px} #view-agents .agi-prog-act-btn svg{width:10px;height:10px} #view-agents .agi-prog-add{border:none;border-bottom:1px dashed var(--fd-line);border-radius:0; padding:7px 12px;font-size:11px;justify-content:flex-start;margin-top:0} #view-agents .agi-prog-add:hover{background:var(--fd-coral-veryfaint)} /* ── หมายเหตุ · บรรทัดเดียว ไม่ต้องมีกรอบ ── */ #view-agents .agi-note{background:transparent;border:none;border-radius:0;padding:6px 2px 0; font-size:10.5px;margin-top:4px;color:var(--fd-ink-soft)} #view-agents .agi-note svg{width:11px;height:11px} /* ── ช่องข้อมูล · ป้ายบน ค่าล่าง คั่นด้วยเส้น ไม่ใช่กล่องสีมุมมน ── */ #view-agents .agi-grid{gap:0 18px} #view-agents .agi-info-card{background:transparent;border-radius:0; border-bottom:1px solid var(--fd-line-soft);padding:6px 2px;gap:1px} #view-agents .agi-info-card.coral{background:transparent} #view-agents .agi-info-lbl{font-size:8.5px;margin-bottom:0} #view-agents .agi-info-val{font-size:12.5px;font-weight:600;line-height:1.3} /* §agSheet · แถบสรุปเป็น flex แถวเดียวที่ไม่เคยยุบ · กฎมือถือใน 02-skins.css คุมแต่ grid ไม่ถึงตัวนี้ พอจับป้ายกับค่ามาอยู่บรรทัดเดียวกัน แต่ละช่องกว้างขึ้น แถบเลยดันจอแคบจนล้น (วัดได้ 390px ล้น 88px) ให้มันขึ้นบรรทัดใหม่ได้ · จอแคบตัดเส้นคั่นทิ้งแล้วเรียงลงเป็นแถว ๆ */ #view-agents .agi-prog-summary{flex-wrap:wrap} @media (max-width:820px){ #view-agents .agi-prog-summary{gap:3px 12px;padding:7px 2px} #view-agents .agi-prog-sum-divider{display:none} #view-agents .agi-prog-sum-item{flex:1 1 100%} } /* ══ §agHd · แถบหัวหน้า Agent List + แผงของเอเย่นต์รายคน ═══════════════════════ แถบหัวยกมาจากหน้า Dashboard (.dv-hd) ทั้งชุด — สีเดียวกัน ทรงเดียวกัน ที่เดียวกัน ต่างกันแค่ของที่อยู่ซ้ายสุด: Dashboard เป็นวันที่ หน้านี้เป็นจำนวนเอเย่นต์ ทำไมต้องเป็นแถบเดียวกัน · คนทำงานสลับสองหน้านี้ทั้งวัน ถ้าหัวคนละแบบ ต้องมองหาปุ่มใหม่ทุกครั้งที่สลับ · เหมือนกันแล้วมือจำที่ได้เอง ═══════════════════════════════════════════════════════════════════════════ */ /* ตรึงไว้บนสุดเหมือน .dv-hd ของ Dashboard · เลื่อนอ่านข้อมูลยาว ๆ แล้วแถบยังอยู่ sidebar เป็น fixed อยู่แล้ว · แถบนี้ sticky จึงอยู่คู่กันตลอด ไม่หายไปทีละอัน top:-1px กันเส้นขาวบาง ๆ ที่โผล่ระหว่างขอบบนกับแถบตอนเลื่อน (sub-pixel) */ #view-agents .ag-hd{position:sticky;top:-1px;z-index:30;padding:6px 96px 9px 8px;border-radius:14px;margin-bottom:11px; background:linear-gradient(160deg, rgba(22,38,92,.96), rgba(12,24,62,.94)); box-shadow:0 8px 26px rgba(2,10,30,.34), inset 0 1px 0 rgba(255,255,255,.18)} #view-agents .ag-hd-top{position:relative;display:flex;align-items:center;gap:13px} /* เลขใหญ่ mono · ตรึงความกว้างขั้นต่ำเหมือน .dv-dnum เพื่อไม่ให้ของข้าง ๆ ขยับตามจำนวนหลัก */ #view-agents .ag-hd-n{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;color:#fff; font-family:'DM Mono',ui-monospace,monospace;display:inline-block;min-width:52px;text-align:center} #view-agents .ag-hd-g{display:inline-block;min-width:108px} #view-agents .ag-hd-g b{display:block;font-size:14px;font-weight:800;line-height:1.05;color:#fff} #view-agents .ag-hd-g i{display:block;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.13em; color:#A8BAD8;text-transform:uppercase} /* ชื่อหน้ากลางแถบ · หน้าตาเหมือน .dv-brand ของ Dashboard แต่ "ไม่" ใช้ absolute ของ Dashboard วางแบบ absolute แล้วต้องมีกฎซ่อนที่ 1600 กันทับชิป — วัดเอาไว้ตายตัว หน้านี้มีปุ่มงานมากกว่านั้น (Card · Table · Excel form · Import · New Agent) ความกว้างฝั่งขวาจึงเปลี่ยนตามสิทธิ์ผู้ใช้ด้วย · ตัวเลขตายตัวเชื่อไม่ได้ ให้มันอยู่ในแถวจริง ๆ แล้วดันด้วย margin auto สองข้าง · ชนไม่ได้โดยโครงสร้าง */ #view-agents .ag-hd-brand{flex:0 0 auto;margin:0 auto;font-size:16px; font-weight:800;letter-spacing:.30em;padding-left:.30em;color:#fff;white-space:nowrap; pointer-events:none} /* จอแคบ ตัวเลขสำคัญกว่าของประดับ · ซ่อนชื่อหน้าไปเลย ไม่ต้องแย่งที่กัน (ตัวเลข 1700 มาจากการวัด: ต่ำกว่านี้ปุ่ม + New Agent จะถูกดันลงบรรทัดสอง) */ @media (max-width:1699px){ #view-agents .ag-hd-brand{display:none} } #view-agents .ag-hd-kpi{display:flex;align-items:center;gap:7px;flex-wrap:wrap; justify-content:flex-end} #view-agents .ag-chip{font-size:11px;font-weight:600;color:#D6E2F5;background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:4px 11px;white-space:nowrap} #view-agents .ag-chip b{font-family:'DM Mono',ui-monospace,monospace;font-weight:800;color:#fff;font-size:12.5px} #view-agents .ag-chip.warn{background:rgba(232,74,63,.24);border-color:rgba(255,150,140,.42); color:#FFC9C3;cursor:pointer} #view-agents .ag-chip.warn b{color:#FFD9D4} #view-agents .ag-seg{display:inline-flex;gap:5px} #view-agents .ag-seg b{font-size:10.5px;font-weight:700;color:#C9D6EC;background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap} #view-agents .ag-seg b.on{background:#fff;color:#16265C;border-color:#fff;box-shadow:0 2px 10px rgba(2,10,30,.30)} #view-agents .ag-hd-btn{font-family:inherit;font-size:10.5px;font-weight:700;color:#D6E2F5; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:999px; padding:5px 12px;cursor:pointer;white-space:nowrap} #view-agents .ag-hd-btn:hover{background:rgba(255,255,255,.18)} #view-agents .ag-hd-add{background:#fff;color:#16265C;border:none;border-radius:999px;padding:5px 13px; font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap; box-shadow:0 2px 10px rgba(2,10,30,.30)} /* ป๊อปแจงรายการ · ทรงเดียวกับ .dv-pop ของ Dashboard · ต้องอ่านออกแม้ลอยทับการ์ดขาว */ #view-agents .ag-hd-pop{display:none;position:absolute;top:44px;right:0;width:344px;z-index:80; border-radius:15px;padding:11px 13px 12px;text-align:left; background:linear-gradient(160deg, rgba(20,36,88,.98), rgba(12,24,62,.96)); border:1px solid rgba(255,255,255,.26);box-shadow:0 16px 40px rgba(2,10,30,.46)} #view-agents .ag-hd-pop.on{display:block} #view-agents .ag-hd-pop .ph{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:#8FA6CC;margin-bottom:7px} #view-agents .ag-hd-pr{display:flex;align-items:center;gap:9px;padding:6px 2px; border-top:1px solid rgba(255,255,255,.10)} #view-agents .ag-hd-pr .t{flex:1;min-width:0} #view-agents .ag-hd-pr .t b{display:block;font-size:11.5px;font-weight:700;color:#EAF0FA} #view-agents .ag-hd-pr .t i{display:block;font-style:normal;font-size:9.5px;color:#93A6C8;margin-top:1px} #view-agents .ag-hd-pr .n{font-family:'DM Mono',ui-monospace,monospace;font-size:14px;font-weight:800;color:#FFD9D4} #view-agents .ag-hd-pr.dim{border-top:1px solid rgba(255,255,255,.22);margin-top:5px;padding-top:8px} #view-agents .ag-hd-pr.dim .t b{color:#9FB2D4;font-weight:700} /* ══ §agStd · แผงของเอเย่นต์ · ชุดมาตรฐาน ════════════════════════════════════ ของเดิมใช้สีหกชุดทำงานสามหน้าที่พร้อมกัน — แบ่งกลุ่ม · บอกสถานะ · ตกแต่ง พอสีทำสามอย่าง ตาก็แยกไม่ออกว่าสีไหนกำลังเตือน สีไหนแค่คั่นกลุ่ม ชุดนี้เหลือกติกาเดียว: โครงสร้างทั้งหมดเป็นเทา-ขาว · สีใช้บอกสถานะอย่างเดียว อีกสองเรื่องที่ทำให้ของเดิมดูไม่เป็นมาตรฐาน · กล่องเรียงแบบ auto-fit · ความกว้างจึงไม่ลงตัว ขอบกล่องแต่ละแถวไม่ตรงกัน → กริด 12 คอลัมน์ · ป้ายกำกับแถวกว้างไม่เท่ากันในแต่ละกล่อง ค่าเลยไม่เรียงเป็นคอลัมน์ → ตรึง 104px ทั้งหน้า ═══════════════════════════════════════════════════════════════════════════ */ /* โทเคนทั้งชุดผูกไว้กับ #view-agents · ไม่รั่วไปหน้าอื่นที่ยังใช้ชุด --fd-* เดิม */ #view-agents{--ag-ink:#101828;--ag-ink2:#475467;--ag-ink3:#667085;--ag-ink4:#98A2B3; --ag-line:#E4E7EC;--ag-line2:#F2F4F7;--ag-soft:#F9FAFB;--ag-navy:#16265C; --ag-red:#B42318;--ag-red-bg:#FEF3F2;--ag-red-bd:#FECDCA; --ag-amb:#B54708;--ag-amb-bg:#FFFAEB;--ag-amb-bd:#FEDF89; --ag-blu:#175CD3;--ag-blu-bg:#EFF8FF;--ag-blu-bd:#B2DDFF; --ag-grn:#067647;--ag-grn-bg:#ECFDF3;--ag-grn-bd:#ABEFC6} /* ── หัวข้อ · ป้ายเรียบ + เส้นคั่น · ไม่มีแถบสี ไม่มีเลขในวงกลม ── หัวข้อไม่ใช่ "ของ" ในหน้า · หน้าที่มันคือคั่นกลุ่มแล้วหลบไป ของเดิมเป็นแถบไล่สีมีเลขกำกับ เด่นกว่าเนื้อที่มันคั่นเสียเอง */ #view-agents .ag-band{display:flex;align-items:center;gap:12px;margin:18px 0 8px; background:none;border:0;border-radius:0;padding:0} #view-agents .ag-band .ttl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ag-ink2);white-space:nowrap} #view-agents .ag-band .rule{flex:1;min-width:10px;height:1px;background:var(--ag-line)} #view-agents .ag-band .note{font-size:11.5px;color:var(--ag-ink4);white-space:nowrap} #view-agents .ag-band .act{font-family:inherit;font-size:12px;font-weight:600;color:var(--ag-navy); background:none;border:0;border-radius:0;padding:2px 0;cursor:pointer;white-space:nowrap} #view-agents .ag-band .act:hover{background:none;text-decoration:underline} #view-agents .ag-band.alert .ttl{color:var(--ag-red)} /* ── รายการที่ต้องจัดการ · ตารางเดียว แถวไม่ย้อมสี ── ย้อมพื้นทั้งแถวทำให้ห้าเรื่องดูด่วนเท่ากันหมด · ความด่วนอยู่ที่คอลัมน์ซ้ายคอลัมน์เดียว เรียงจากด่วนสุดลงมา อ่านเป็นลิสต์งานได้ตั้งแต่บรรทัดแรก */ #view-agents .ag-als{background:#fff;border:1px solid var(--ag-line);border-radius:8px;overflow:hidden} #view-agents .ag-al{display:flex;align-items:center;gap:12px;padding:9px 13px;font-size:13px; border:0;border-top:1px solid var(--ag-line2);color:var(--ag-ink)} #view-agents .ag-al:first-child{border-top:0} #view-agents .ag-al:hover{background:var(--ag-soft)} #view-agents .ag-al .sev{flex:0 0 96px;display:flex;align-items:center;gap:7px; font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase} #view-agents .ag-al .sev i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} #view-agents .ag-al.red .sev{color:var(--ag-red)} #view-agents .ag-al.amb .sev{color:var(--ag-amb)} #view-agents .ag-al.blu .sev{color:var(--ag-blu)} #view-agents .ag-al .t{flex:0 0 168px;min-width:0;font-size:13px;font-weight:600;color:var(--ag-ink)} #view-agents .ag-al .d{flex:1;min-width:0;font-size:12.5px;color:var(--ag-ink2)} #view-agents .ag-al .d b{font-weight:600;color:var(--ag-ink)} #view-agents .ag-al .go{flex:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--ag-navy); background:none;border:0;border-radius:0;padding:4px 2px;cursor:pointer;white-space:nowrap} #view-agents .ag-al .go:hover{background:none;text-decoration:underline} #view-agents .ag-ok{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--ag-line); border-radius:8px;padding:10px 13px;font-size:12.5px;color:var(--ag-ink3);font-weight:500} /* ── กริด 12 คอลัมน์ · ทุกการ์ดเกาะเส้นเดียวกัน ── ที่ต้องระวัง: แผงนี้ไม่ได้กว้างเท่าจอ · ลิสต์เอเย่นต์ฝั่งซ้ายกินไปราว 390px จอ 1440 จึงเหลือเนื้อที่ราว 740px — สามใบต่อแถวได้ใบละ 233px ซึ่งแคบเกินกว่าที่ค่าจะไม่ห่อ ค่าเริ่มต้นจึงเป็นสองใบต่อแถว แล้วค่อยขยับเป็นสามใบเมื่อจอกว้างจริง (วัดที่ 1500) */ /* ไม่ใส่ align-items:start · ปล่อยให้เป็น stretch ตามค่าเริ่มต้นของกริด การ์ดในแถวเดียวกันจึงสูงเท่ากัน ขอบล่างตรงกันทั้งแถว — แบบที่วางไว้เป็นแบบนั้น ใส่ start เมื่อไหร่ ขอบล่างจะหยักตามเนื้อในแต่ละใบทันที */ #view-agents .ag-grp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px} /* ── การ์ด · ขาว ขอบเส้นเดียว ไม่มีเงา ไม่มีไล่สี · สถานะบอกด้วยป้ายบนหัว ไม่ใช่ย้อมกรอบ ── */ #view-agents .ag-box{grid-column:span 6;min-width:0;background:#fff;display:flex;flex-direction:column; border:1px solid var(--ag-line);border-radius:8px;box-shadow:none;padding:0 0 4px} #view-agents .ag-box.c3,#view-agents .ag-box.c4,#view-agents .ag-box.c5{grid-column:span 6} #view-agents .ag-box.c8,#view-agents .ag-box.wide{grid-column:1/-1} @media (min-width:1500px){ #view-agents .ag-box{grid-column:span 4} #view-agents .ag-box.c3{grid-column:span 3} #view-agents .ag-box.c4{grid-column:span 4} #view-agents .ag-box.c5{grid-column:span 5} #view-agents .ag-box.c8{grid-column:span 8} } #view-agents .ag-box .bh{display:flex;align-items:center;gap:8px;margin:0;padding:9px 13px; background:none;border-bottom:1px solid var(--ag-line2);border-radius:0; font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ag-ink3)} #view-agents .ag-box .bh em{font-style:normal;margin-left:auto;font-size:11.5px;font-weight:400; letter-spacing:0;text-transform:none;color:var(--ag-ink4)} #view-agents .ag-box .ag-sh{padding:2px 13px 0} #view-agents .ag-box .ag-sh .r:last-child{border-bottom:none} /* ── ป้ายสถานะ · ที่เดียวในหน้าที่มีสีพื้น ── */ #view-agents .ag-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500; border-radius:6px;padding:2px 8px;white-space:nowrap;letter-spacing:0;text-transform:none; border:1px solid var(--ag-line);background:var(--ag-soft);color:var(--ag-ink2)} #view-agents .ag-tag.red{background:var(--ag-red-bg);border-color:var(--ag-red-bd);color:var(--ag-red)} #view-agents .ag-tag.amb{background:var(--ag-amb-bg);border-color:var(--ag-amb-bd);color:var(--ag-amb)} #view-agents .ag-tag.blu{background:var(--ag-blu-bg);border-color:var(--ag-blu-bd);color:var(--ag-blu)} #view-agents .ag-tag.grn{background:var(--ag-grn-bg);border-color:var(--ag-grn-bd);color:var(--ag-grn)} /* ── แถว label/value · ป้ายกว้าง 104px เท่ากันทุกการ์ด ค่าจึงเรียงเป็นคอลัมน์เดียวทั้งหน้า ── */ #view-agents .ag-sh{display:grid;grid-template-columns:minmax(0,1fr);gap:0} #view-agents .ag-sh .r{display:flex;gap:12px;align-items:baseline;padding:6px 0;min-width:0; border-bottom:1px solid var(--ag-line2)} #view-agents .ag-sh .r .k{flex:0 0 104px;font-size:11.5px;font-weight:400;letter-spacing:0; text-transform:none;color:var(--ag-ink3);line-height:1.45} /* break-word ไม่ใช่ anywhere · anywhere ทำให้เบราว์เซอร์คิดความกว้างขั้นต่ำเป็นตัวอักษรเดียว แล้วตัดกลางคำทั้งที่ยังมีที่เหลือ ("2 add-ons" กลายเป็น "2 add - ons") */ #view-agents .ag-sh .r .v{flex:1;min-width:0;font-size:13px;font-weight:500;line-height:1.45; color:var(--ag-ink);overflow-wrap:break-word} #view-agents .ag-sh .r .v .sub{display:block;font-size:11.5px;color:var(--ag-ink3);font-weight:400; line-height:1.45;margin-top:2px} #view-agents .ag-bar{display:block;height:6px;border-radius:3px;background:var(--ag-line2);overflow:hidden; margin-top:6px;max-width:220px} #view-agents .ag-bar i{display:block;height:100%} /* ── ตัวเลขตัวอย่าง · สามช่องคั่นด้วยเส้น ไม่ใช่สามการ์ดซ้อนในการ์ด ── */ #view-agents .ag-stats{display:flex} #view-agents .ag-stat{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 13px; border-right:1px solid var(--ag-line2)} #view-agents .ag-stat:last-child{border-right:none} #view-agents .ag-stat .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ag-ink3)} #view-agents .ag-stat .v{font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums; font-size:19px;font-weight:500;color:var(--ag-ink);letter-spacing:-.01em} #view-agents .ag-stat .s{font-size:11.5px;color:var(--ag-ink3);overflow-wrap:anywhere} /* จอกลาง · สามการ์ดต่อแถวเริ่มบีบจนค่าห่อบรรทัด · ลดเหลือสองแถวละสองใบ (ยังเป็นกริด 12 อยู่ · ขอบจึงยังตรงกันเหมือนเดิม) */ /* ── ตารางโปรแกรม · อยู่ในกรอบการ์ดเดียวกับที่เหลือ ── §agStd · ของเดิมลอยอยู่กลางหน้าไม่มีกรอบ · ชนกับการ์ดข้างบนที่มีกรอบ เลยดูคนละชุดกัน สีที่เคยใช้ hover (coral) ถูกถอด — สีในหน้านี้สงวนไว้บอกสถานะอย่างเดียว */ #view-agents .agi-prog-wrap{background:#fff;border:1px solid var(--ag-line);border-radius:8px;overflow:hidden} /* คอลัมน์วันเป็นตัวเลข mono ความกว้างคงที่ · ตรึงเท่ากันสองคอลัมน์ ระยะห่างจึงเท่ากันทั้งแถว max-content ทำให้คอลัมน์หดชิดกันไปกองขวา ระยะไม่เท่ากันอย่างที่วางไว้ เลขพวกนี้มาจากการวัด: เนื้อที่จริงในกรอบ 696px (แผง 722 หักขอบใน 26) ช่องวันต้องการ 155px พอดีข้อความ · สถานะ 88 · ปุ่ม 40 · ช่องไฟ 4×8 เหลือให้ชื่อเส้นทาง 310px ซึ่งกว้างกว่าชื่อที่ยาวที่สุดที่ใช้จริง (216px) */ #view-agents .agi-prog-header,#view-agents .agi-prog-row{ grid-template-columns:minmax(0,1fr) 155px 88px 40px;gap:8px} /* ── จอต่ำกว่า 1440 · ช่วงรับจองซ่อนตัวเอง ──────────────────────────────── ที่ต่ำกว่านั้นแผงเหลือไม่ถึง 700px · ห้าคอลัมน์เบียดกันจนชื่อเส้นทางเหลือศูนย์ ตัดคอลัมน์ที่ให้ข้อมูลน้อยที่สุดออกก่อน · ช่วงรับจองเป็นช่วงของสัญญา ทุกแถวมักเป็นค่าเดียวกัน และหัวข้อด้านบนบอกไว้แล้ว ("contract 01 Oct 25 → 15 May 27") ส่วนช่วงเดินทางกับสถานะต่างกันรายเส้นทาง จึงต้องอยู่เสมอ */ @media (max-width:1439px){ #view-agents .agi-col-bk{display:none} } /* ── จอต่ำกว่า 1200 · แถวพับเป็นสองบรรทัด ───────────────────────────────── แผงเหลือไม่ถึง 500px · ต่อให้ตัดคอลัมน์ช่วงรับจองไปแล้ว ชื่อเส้นทางก็ยังไม่เหลือที่ วัดแล้วชื่อจะเริ่มพอที่ตอนจอ ~1241 ขึ้นไป (แผง 523 หักคอลัมน์ที่เหลือ 307 = 216 พอดีชื่อยาวสุด) ต่ำกว่านั้นชื่อหดจนหายไปทั้งแถบโดยที่หน้าไม่ล้มให้เห็น · ปัดเป็น 1280 พับชื่อขึ้นบรรทัดของตัวเอง แล้วให้ช่วงเดินทาง/สถานะ/ปุ่ม อยู่บรรทัดล่าง (กติกาเดียวกับจอโทรศัพท์ · ที่นั่นกฎใน 02-skins.css คุมอยู่แล้วด้วย !important) */ @media (max-width:1279px){ #view-agents .agi-prog-header{display:none} #view-agents .agi-prog-row{grid-template-columns:minmax(0,1fr) auto auto;gap:3px 10px;align-items:center} #view-agents .agi-prog-name-wrap{grid-column:1/-1} #view-agents .agi-prog-name{white-space:normal;overflow:visible;text-overflow:clip} } /* จอกว้าง · ตรึงความกว้างตายตัวแล้วคอลัมน์จะไปกองชิดขวา ที่ว่างทั้งหมดตกเป็นของชื่อเส้นทางคนเดียว ให้ช่องวันโตตามไปด้วยเป็นสัดส่วน · ระยะห่างจึงยังเท่ากันเหมือนตอนจอแคบ ขั้นต่ำที่ใส่ไว้คือตัวเลขที่วัดมา (ชื่อยาวสุด 226 · ช่วงวัน 155) รวมทั้งแถวได้ 696px แผงกว้างเท่าจอลบ 718 เสมอ · 696 จึงต้องการจออย่างน้อย 1414 · ตั้งไว้ที่ 1440 ต่ำกว่านั้นกลับไปใช้กฎข้างบน ซึ่งยอมให้ชื่อหดได้ (ตั้งไว้ต่ำกว่านี้ไม่ได้ · ขั้นต่ำรวมกันเกินกรอบเมื่อไหร่ overflow:hidden ของกรอบจะกินคอลัมน์ Status กับปุ่มหายไปเงียบ ๆ โดยหน้าไม่ล้น — ตรวจด้วยตาไม่เจอ) */ @media (min-width:1440px){ #view-agents .agi-prog-header,#view-agents .agi-prog-row{ grid-template-columns:minmax(226px,2fr) minmax(155px,1.1fr) minmax(155px,1.1fr) 88px 40px} } /* ── ท่าเรือ · คอลัมน์ของตัวเอง ─────────────────────────────────────────── ซ่อนไว้ก่อน · display:none ทำให้มันหลุดจากกริดไปเลย ไม่ใช่แค่มองไม่เห็น จำนวนคอลัมน์จึงยังเป็นห้าช่องเท่าเดิมโดยไม่ต้องมีกฎอะไรเพิ่ม กางออกเมื่อจอกว้างพอจริง · แผงนี้กว้างเท่าจอลบ 718px เสมอ (ลิสต์เอเย่นต์ + ขอบ) หกคอลัมน์ต้องการราว 806px จึงต้องมีจออย่างน้อย ~1524 · ตั้งไว้ที่ 1540 เผื่อไว้ ต่ำกว่านั้นท่าเรือไปอยู่ใน title ของชื่อเส้นทาง (ชี้แล้วเห็น "ชื่อเส้นทาง · ท่าเรือ") */ #view-agents .agi-prog-pier-col{display:none} @media (min-width:1540px){ #view-agents .agi-prog-pier-col{display:flex;align-items:center;min-width:0; font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--ag-ink4); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-agents .agi-prog-header .agi-prog-pier-col{color:var(--ag-ink3);font-size:10.5px; font-weight:700;letter-spacing:.06em} #view-agents .agi-prog-header,#view-agents .agi-prog-row{ grid-template-columns:minmax(200px,2fr) 88px minmax(155px,1.1fr) minmax(155px,1.1fr) 88px 40px} } #view-agents .agi-prog-header{margin-top:0;padding:8px 13px;background:var(--ag-soft); border-bottom:1px solid var(--ag-line);font-size:10.5px;font-weight:700;letter-spacing:.06em; color:var(--ag-ink3)} #view-agents .agi-prog-row{padding:9px 13px;border-bottom:1px solid var(--ag-line2)} #view-agents .agi-prog-row:hover{background:var(--ag-soft);border-color:var(--ag-line2)} #view-agents .agi-prog-name{font-size:12.5px;font-weight:500;color:var(--ag-ink)} #view-agents .agi-prog-pier{font-size:11px;font-weight:400;color:var(--ag-ink4)} #view-agents .agi-period-val{font-size:12px;font-weight:400;color:var(--ag-ink2)} #view-agents .agi-prog-st{display:flex;align-items:center;min-width:0} /* แถวแท็บ · ห้ามหักคำกลางป้าย ("Pricing Matrix" เคยตกบรรทัดสองตอนแท็บมีตัวเลขกำกับ) แคบเมื่อไหร่ให้เลื่อนแนวนอนแทน · กติกาเดียวกับจอโทรศัพท์ */ #view-agents .sb-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} #view-agents .sb-tabs::-webkit-scrollbar{display:none} #view-agents .sb-tab{flex:none;white-space:nowrap} /* ชิป "↳ RT" · เคยระบายสีตามเรท · สีในหน้านี้สงวนไว้บอกสถานะ ชิปนี้บอกที่มาของวัน ไม่ใช่สถานะ */ #view-agents .agi-rtchip{margin-left:5px;font-size:10px;font-weight:600;letter-spacing:.04em; color:var(--ag-ink4);text-transform:uppercase;white-space:nowrap} #view-agents .agi-prog-act-btn{border-color:var(--ag-line);color:var(--ag-ink4)} #view-agents .agi-prog-act-btn:hover{background:var(--ag-soft);color:var(--ag-navy)} #view-agents .agi-prog-add{padding:9px 13px;border:0;border-top:1px solid var(--ag-line2); font-size:12px;color:var(--ag-ink3)} #view-agents .agi-prog-add:hover{background:var(--ag-soft);border-color:var(--ag-line2);color:var(--ag-navy)} #view-agents .agi-note{padding:8px 2px 0;font-size:11.5px;color:var(--ag-ink4)} /* ── ปุ่มยุบ/กางลิสต์ · มีเฉพาะจอโทรศัพท์ ── */ #view-agents .ag-side-tgl{display:none;font-family:inherit;font-size:10.5px;font-weight:700;color:#16265C; background:#EEF2F9;border:1px solid #D7DEEB;border-radius:999px;padding:4px 11px;cursor:pointer;white-space:nowrap} /* ══ §agPhone · จอโทรศัพท์ ══════════════════════════════════════════════════ สามอย่างที่พังบนจอแคบถ้าไม่ทำอะไร · ลิสต์ 800 รายชื่อดันเนื้อหาหลุดจอ · แถวแท็บห่อสามบรรทัด · แถว Sheet สองคอลัมน์บีบจนค่าห่อมั่ว ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ /* บนจอโทรศัพท์แถบหัวห่อเป็นสามแถว · ตรึงไว้จะกินจอไปครึ่งหนึ่งตอนเลื่อนอ่าน จอสั้นให้เนื้อหาสำคัญกว่า · เลิกตรึงเฉพาะจอนี้ */ #view-agents .ag-hd{position:static;padding:8px 10px 10px} #view-agents .ag-hd-top{flex-wrap:wrap;gap:9px} #view-agents .ag-hd-kpi{margin-left:0;flex:1 1 100%;justify-content:flex-start} #view-agents .ag-hd-g{min-width:0} #view-agents .ag-hd-pop{right:auto;left:0;width:auto;max-width:100%} #view-agents .ag-side-tgl{display:block} #view-agents .sb-side-hd-ttl{white-space:nowrap} #view-agents #ag-search{width:82px} /* ลิสต์ยุบไว้ก่อน · กด Browse จึงกาง · เลือกแล้วยุบเอง (ดู agSelect) */ #view-agents .sb-side .sb-side-body{display:none;max-height:56vh;overflow:auto} #view-agents .sb-side.open .sb-side-body{display:block} /* แถวแท็บ · เลื่อนแนวนอนแถวเดียว ไม่ห่อสองสามบรรทัดจนดันเนื้อหาลงไป */ #view-agents .sb-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} #view-agents .sb-tabs::-webkit-scrollbar{display:none} #view-agents .sb-tab{flex:none} /* หัวข้อ · เส้นคั่นไม่มีที่พอบนจอแคบ · ตัดเส้นทิ้ง ให้ข้อความประกอบลงบรรทัดใหม่แทน */ /* ชื่อหัวข้อขึ้นบรรทัดของตัวเอง · ปุ่มงานจึงอยู่ด้วยกันบรรทัดเดียว ไม่กระจายคนละบรรทัด */ #view-agents .ag-band{flex-wrap:wrap;gap:6px 14px;margin:18px 0 8px} #view-agents .ag-band .rule{display:none} #view-agents .ag-band .ttl{flex:1 1 100%} #view-agents .ag-band .note{flex:1 1 100%;order:5;white-space:normal;text-align:left} /* แถวเตือน · บรรทัดแรก ความด่วน + เรื่อง + ปุ่ม · บรรทัดสอง รายละเอียด ถ้าปล่อยตามลำดับ DOM ปุ่มจะตกไปอยู่บรรทัดสามเดี่ยว ๆ แถวสูงขึ้นเปล่า ๆ */ #view-agents .ag-al{flex-wrap:wrap;align-items:flex-start;gap:4px 12px} #view-agents .ag-al .sev{flex:0 0 auto} #view-agents .ag-al .t{flex:1 1 auto} #view-agents .ag-al .go{order:3;margin-left:auto;padding:0 2px} #view-agents .ag-al .d{order:5;flex:1 1 100%} #view-agents .ag-grp{grid-template-columns:minmax(0,1fr);gap:10px} #view-agents .ag-box,#view-agents .ag-box.c3,#view-agents .ag-box.c5, #view-agents .ag-box.c6,#view-agents .ag-box.c8{grid-column:1/-1} #view-agents .ag-sh{grid-template-columns:minmax(0,1fr)} #view-agents .ag-sh .r{flex-direction:column;gap:1px;padding:7px 0} #view-agents .ag-sh .r .k{flex:none} #view-agents .ag-stats{flex-direction:column} #view-agents .ag-stat{border-right:none;border-bottom:1px solid var(--ag-line2)} #view-agents .ag-stat:last-child{border-bottom:none} /* แถวโปรแกรม · จากตารางห้าคอลัมน์ เป็นการ์ดต่อแถว ชื่อ+ช่วงวันอยู่คนละบรรทัด */ #view-agents .agi-prog-header{display:none} #view-agents .agi-prog-row{flex-wrap:wrap;gap:2px 10px;padding:8px 6px} #view-agents .agi-prog-name-wrap{flex:1 1 100%} #view-agents .agi-period-col{flex:0 0 auto} #view-agents .agi-prog-actions{margin-left:auto} } /* ══ §ctV2 (2026-10-14) · หน้าต้นทุน & จุดคุ้มทุน · ดีไซน์ใหม่ (แบบแรก + หัวขาว ที่เจ้าของเลือก) ══════════ owner: "ปรับดีไซน์หน้าต้นทุน ในทุกหน้า" → "ใช้แบบแรกที่เสนอมา แต่ Header ขอเป็นสีขาว" → "ทำเลย" ทับ §ctSkin (ส้ม/ครีม) ด้วยชั้นนี้ชั้นเดียว · ตัวแปรสีเดิมถูกตั้งใหม่เป็นโทนกรมท่า/เทาฟ้า ตรรกะ ปุ่ม ช่องกรอก ทุกตัวเป็นของเดิม · ลบบล็อกนี้ทิ้ง = กลับเป็นหน้าตาเดิมทันที */ #view-costing{ --b50:#EEF3FB; --b100:#E3EAF8; --b200:#C9D6F0; --b300:#9DB2E0; --b500:#0B1E5B; --b600:#13286E; --cr50:#F7F8FB; --cr200:#E2E6EE; --sd50:#FAFBFD; --sd100:#F2F4F8; --sd200:#E2E6EE; --sd300:#CDD3DF; --sd400:#A9B2C4; --es700:#3E4A6B; --es800:#26324F; --es900:#0F1B3D; --es950:#0B1E5B; --mt50:#E8F6EF; --mt100:#D3EEE1; --mt500:#12A26B; --mt700:#0B6142; color:#0F1B3D; } #view-costing .ct-k-v,#view-costing .ct-in,#view-costing td,#view-costing .ct-rt-sub{font-variant-numeric:tabular-nums} /* หัวหน้า · การ์ดขาว + แท็บกรมท่า + แถบสิ่งที่ค้าง */ #view-costing .ct-head{background:#fff;border:1px solid #E2E6EE;border-radius:16px;box-shadow:0 1px 2px rgba(11,30,91,.05); padding:12px 16px 0;margin-bottom:14px;align-items:center;gap:12px 16px;overflow:hidden} #view-costing .ct-logo{width:38px;height:38px;border-radius:10px;background:#0B1E5B;box-shadow:none} #view-costing .ct-h1 h1{font-size:18px;color:#0B1E5B;letter-spacing:0} #view-costing .ct-pill{display:none} #view-costing .ct-h2{font-size:12px;color:#5F6880} #view-costing #ct-tabs{background:#F2F4F8;border:0;border-radius:12px;padding:4px;gap:4px} #view-costing .ct-tab{color:#3E4A6B;font-size:13px;font-weight:600;border-radius:9px;padding:8px 14px} #view-costing .ct-tab:hover{color:#0B1E5B;background:#E8ECF3} #view-costing .ct-tab.on{background:#0B1E5B;color:#fff;box-shadow:none} #view-costing .ct-tab.on svg{color:#00B4E0} #view-costing .ct-tab .ct-tb{font-size:11px;font-weight:700;border-radius:8px;padding:0 6px;line-height:17px;background:#FFF0D6;color:#9A4A06;margin-left:2px} #view-costing .ct-tab.on .ct-tb{background:#F5C77E;color:#3D2300} #view-costing .ct-todo{flex:1 1 100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 -16px;padding:8px 16px; background:#F8F9FC;border-top:1px solid #EDF0F5;font-size:12.5px} #view-costing .ct-todo > b{color:#9A4A06;font-weight:700;margin-right:2px} #view-costing .ct-todo .t{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:8px;background:#fff; border:1px solid #E2E6EE;color:#0F1B3D;font:inherit;cursor:pointer;white-space:nowrap} #view-costing .ct-todo .t:hover{border-color:#B9C4DA} #view-costing .ct-todo .t i{width:7px;height:7px;border-radius:4px;background:#E8940C} #view-costing .ct-todo .t.r i{background:#D9534A} #view-costing .ct-todo .ok{display:inline-flex;align-items:center;gap:7px;color:#0B6142} #view-costing .ct-todo .ok i{width:7px;height:7px;border-radius:4px;background:#12A26B} #view-costing .ct-todo .nt{margin-left:auto;color:#5F6880;font-size:12px} /* การ์ด · มุมเล็กลง ขอบเทาฟ้า */ #view-costing .ct-card{border-radius:14px;border-color:#E2E6EE;box-shadow:none} #view-costing .ct-card-h{border-bottom-color:#EDF0F5;color:#0B1E5B} #view-costing .ct-card-h b{font-size:13.5px;letter-spacing:0;color:#0B1E5B} #view-costing .ct-card-h .ct-sub{font-size:12px;color:#5F6880} #view-costing .ct-card-h.split{background:#FAFBFD} #view-costing .ct-hint{color:#5F6880} /* แผนคำนวณ · การ์ดสรุปขึ้นไปอยู่ใต้ชื่อแผน ก่อนช่องกรอก */ #view-costing .ct-main > .ct-namebar{order:-3} #view-costing .ct-main > .ct-kpis{order:-2} #view-costing .ct-main{gap:14px} #view-costing .ct-wrap{gap:14px} /* แถบซ้าย · รายการแผน */ #view-costing .ct-side-h{font-size:13.5px;font-weight:700;color:#0B1E5B;letter-spacing:0} #view-costing .ct-rt{border-radius:12px;border-color:#E2E6EE;background:#fff;box-shadow:none} #view-costing .ct-rt.on{background:#EEF3FB;border-color:#0B1E5B;box-shadow:inset 3px 0 0 #0B1E5B;color:#0B1E5B} #view-costing .ct-rt.on .ct-rt-nm,#view-costing .ct-rt.on .ct-rt-sub{color:#0B1E5B} #view-costing .ct-rt-nm{font-size:13.5px;color:#0B1E5B} #view-costing .ct-rt-sub{font-size:12px;color:#5F6880} #view-costing .ct-rt-ic{background:#F2F4F8;color:#3E4A6B} #view-costing .ct-rt.on .ct-rt-ic{background:#0B1E5B;color:#fff} #view-costing .ct-rt-badge{font-size:11.5px;background:#E3F5EC;color:#0B6142} #view-costing .ct-rt-badge.warn{background:#FDECEA;color:#B42318} #view-costing .ct-addrt{border-color:#C9D0DD;color:#3E4A6B;border-radius:12px} /* การ์ดตัวเลข */ #view-costing .ct-k{border-radius:14px} #view-costing .ct-k-lb{font-size:12px;letter-spacing:.03em} #view-costing .ct-k-v{font-size:30px} #view-costing .ct-k-note{font-size:12.5px;color:#5F6880} #view-costing .ct-k.brand .ct-k-v{color:#0B1E5B} #view-costing .ct-k.brand .ct-k-v.neg{color:#B42318} /* ช่องกรอก ปุ่ม */ #view-costing .ct-in,#view-costing .ct-sel{border-color:#DCE1EA;border-radius:9px;color:#0F1B3D} #view-costing .ct-in:focus,#view-costing .ct-sel:focus{border-color:#0B1E5B;box-shadow:0 0 0 3px rgba(11,30,91,.12);outline:0} #view-costing .ct-btn{background:#0B1E5B;border-color:#0B1E5B;color:#fff;border-radius:9px;box-shadow:none} #view-costing .ct-btn:hover{background:#13286E} #view-costing .ct-btn.ghost{background:#fff;color:#3E4A6B;border:1px solid #DCE1EA} #view-costing .ct-mini{border-radius:7px} /* ตาราง */ #view-costing table th,#view-costing .ct-tbl th{color:#5F6880;background:#F7F8FB} #view-costing .ct-pierh td{background:#F4F6FA;color:#0B1E5B;font-weight:800;letter-spacing:.05em} #view-costing .ct-cath{background:#FAFBFD;border-bottom-color:#EDF0F5} #view-costing .ct-cath span:first-child{color:#0B1E5B} #view-costing .ct-cnt{color:#5F6880} #view-costing .ct-bar2 b{font-size:16px;color:#0B1E5B} #view-costing .ct-bar2 .ct-sub{font-size:12.5px;color:#5F6880} #view-costing .ct-warn{border-radius:12px} /* หัว · ชื่อหน้ายืดได้ คำอธิบายตัดท้าย แท็บไม่ล้นขอบ */ #view-costing .ct-brand{flex:1 1 320px;min-width:0} #view-costing .ct-brand>div{min-width:0} #view-costing .ct-h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-costing #ct-tabs{flex-wrap:wrap} /* รายการแผน · กระชับขึ้น ป้ายบนแผนที่เลือกอ่านออก */ #view-costing .ct-rt{padding:10px 12px;gap:10px} #view-costing .ct-rt-badge{margin-top:5px;border:0} #view-costing .ct-rt.on .ct-rt-badge{background:#E3F5EC;color:#0B6142} #view-costing .ct-rt.on .ct-rt-badge.warn{background:#FDECEA;color:#B42318} #view-costing .ct-rt.on .ct-dot{background:#0B1E5B} /* ช่องกรอก · ชื่อช่องอยู่บน ช่องเต็มความกว้าง เรียง 6 คอลัมน์ */ #view-costing .ct-grid8{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px;padding:14px 18px} #view-costing .ct-grid8 .ct-f{display:flex;flex-direction:column;gap:5px} #view-costing .ct-grid8 .ct-f>span{font-size:12px;font-weight:600;color:#5F6880;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-costing .ct-grid8 .ct-f.hot>span{color:#9A4A06} #view-costing .ct-grid8 .ct-in{width:100%!important;height:36px;font-size:14px;text-align:right} #view-costing .ct-grid8 select.ct-in{text-align:left} #view-costing .ct-in.hot{border-color:#F0B66A;background:#FFF8EC} #view-costing .ct-grid8 .ct-f{text-align:left} /* การ์ดจุดคุ้มทุน · ถ้า "ไม่ถึง" เป็นโทนแดง (เดิมเขียวตลอด) */ #view-costing .ct-k.mint:has(.ct-k-v>span){background:#FDF1EF;border-color:#F6D3CD} #view-costing .ct-k.mint:has(.ct-k-v>span) .ct-k-lb,#view-costing .ct-k.mint:has(.ct-k-v>span) .ct-k-v,#view-costing .ct-k.mint:has(.ct-k-v>span) .ct-k-row{color:#B42318} #view-costing .ct-k.mint:has(.ct-k-v>span) .ct-k-ic{background:#F9DCD7;color:#B42318} /* ปรับ / ปิด รายแผน · ตัวตารางพื้นขาว · ไฮไลต์แถว/คอลัมน์เป็นฟ้าอ่อน (เดิมครีม/ส้ม) */ #view-costing .ct-otbl th{background:#F7F8FB} #view-costing .ct-otbl td.ct-pcol:not(.ct-colon):not(.ct-rowon):not(.ct-cellon){background:#fff !important} #view-costing .ct-grow td{background:#F4F6FA} #view-costing .ct-sheet .ct-otbl .ct-grow td.ct-stick{background:#F4F6FA} #view-costing .ct-otbl tbody tr:not(.ct-grow):hover td{background:#F7F9FC} #view-costing .ct-otbl td.ct-colon,#view-costing .ct-otbl td.ct-rowon,#view-costing .ct-sheet .ct-otbl td.ct-stick.ct-rowon{background:#EEF3FB !important} #view-costing .ct-sheet .ct-otbl thead th{background:#F7F8FB} #view-costing .ct-otbl td,#view-costing .ct-otbl th{border-color:#EDF0F5} /* §ctV2 · จับคู่เส้นทาง · ตัวเลขสรุป + ค้นหา/ตัวกรอง */ #view-costing .ct-mtiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:14px;margin-bottom:14px} #view-costing .ct-mt{padding:14px 18px;display:flex;flex-direction:column;gap:2px} #view-costing .ct-mt small{font-size:12px;font-weight:700;color:#5F6880} #view-costing .ct-mt b{font:600 28px/1.15 "DM Mono",monospace;color:#0B6142} #view-costing .ct-mt b span{font-size:14px;color:#5F6880} #view-costing .ct-mt em{font-style:normal;font-size:12px;color:#5F6880;line-height:1.4} #view-costing .ct-mt.warn{background:#FFF6E8;border-color:#F3DDB6} #view-costing .ct-mt.warn small,#view-costing .ct-mt.warn b{color:#9A4A06} #view-costing .ct-mt.fl{flex-direction:row;align-items:center;gap:12px} #view-costing .ct-msrch{flex:1;display:flex;align-items:center;gap:8px;height:40px;border:1px solid #DCE1EA;border-radius:10px;padding:0 12px;color:#5F6880;background:#fff} #view-costing .ct-msrch input{border:0;outline:0;flex:1;font:inherit;font-size:13.5px;color:#0F1B3D;background:transparent;min-width:0} #view-costing .ct-seg{display:inline-flex;gap:2px;background:#F2F4F8;border-radius:10px;padding:3px;flex:none} #view-costing .ct-seg button{border:0;background:transparent;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;color:#3E4A6B;cursor:pointer;white-space:nowrap} #view-costing .ct-seg button.on{background:#0B1E5B;color:#fff} #view-costing .ct-mrow .ct-sug{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin-top:5px} #view-costing .ct-mrow .ct-sug .ct-mini{margin:0!important;display:inline-flex} #view-costing .ct-mrow .ct-sug br{display:none} #view-costing .ct-tag{font-size:11.5px;border-radius:8px;padding:2px 9px} #view-costing .ct-tag.m{background:#E3F5EC;color:#0B6142;border-color:transparent} #view-costing .ct-tag.f{background:#FFF0D6;color:#9A4A06;border-color:transparent} #view-costing .ct-mrow td{padding-top:9px;padding-bottom:9px} /* §ctV2 · ราคาจริง · ทะเบียนร้าน | ร้านประจำเส้นทาง */ #view-costing .ct-rgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px} #view-costing .ct-rgrid>.ct-catcard{margin:0} #view-costing .ct-cath .ct-seg button{padding:4px 10px;font-size:12px} #view-costing .ct-rgrid .ct-mtbl{table-layout:fixed;width:100%;min-width:0} #view-costing .ct-rgrid .ct-scroll{overflow-x:auto} #view-costing .ct-rgrid .ct-sel{max-width:100%;min-width:0;width:100%} #view-costing .ct-rgrid td{padding-right:14px} #view-costing .ct-nm .ct-dot{margin-right:7px;vertical-align:1px} #view-costing .ct-catcard>.ct-hint{padding:10px 16px 12px;font-size:12px;line-height:1.6} /* §ctV2 · แถวรวมต่อทริป */ #view-costing .ct-otbl tr.ct-totrow td{background:#F7F8FB !important;border-top:2px solid #0B1E5B;padding:12px 14px;font-weight:700;color:#0B1E5B} #view-costing .ct-otbl tr.ct-totrow td.ct-tot b{display:block;text-align:right;font-size:15.5px;font-variant-numeric:tabular-nums} #view-costing .ct-otbl tr.ct-totrow td.ct-tot .ct-u{display:block;text-align:right;font-weight:500;font-size:11.5px} /* §ctV2 · สูตรกลาง · ชีทเดียว หมวดพับได้ */ #view-costing .ct-tsheet{overflow:hidden} #view-costing .ct-tsh{display:grid;grid-template-columns:250px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 16px;background:#F7F8FB;border-bottom:1px solid #E2E6EE;font-size:11.5px;font-weight:700;color:#5F6880} #view-costing .ct-tcat .ct-cath{cursor:pointer;background:#F4F6FA;border-bottom:1px solid #E2E6EE;padding:9px 16px;user-select:none} #view-costing .ct-tcat .ct-cath:hover{background:#ECF0F6} #view-costing .ct-tcat .ct-cath b{font-size:13.5px;color:#0B1E5B} #view-costing .ct-tchev{font-style:normal;display:inline-block;width:16px;color:#5F6880} #view-costing .ct-tcat.fold .ct-cath{background:#fff} #view-costing .ct-tcat .ct-mtbl td{padding-top:7px;padding-bottom:7px;border-bottom-color:#F0F2F6;vertical-align:top} #view-costing .ct-tcat .ct-part{gap:6px;margin-bottom:5px} #view-costing .ct-tcat .ct-lname{font-weight:600;color:#0B1E5B} /* ==== §bkActivity (2026-10-14) · All bookings · design A ==== */ /* owner: "ในหน้า All booking ขอปรับหน้าตาใหม่ · ขอให้ไล่เรียงแบบล่าสุด กรณีที่มีแก้ไขให้ขึ้นอัพเดทด้วย" KPI เตี้ยลงเป็นแถวเดียว · แถวรายการเตี้ยลง (ยอดคนแยกย้ายไปใต้ชื่อทริป) · เส้นสีสถานะซ้ายแถว กลุ่มวัน · ป้าย ใหม่/แก้ไข/ยกเลิก ใต้เลขใบ · คอลัมน์ Activity ท้ายตาราง */ #view-booking .bkv2-kpis .bkv2-kpi{display:flex;align-items:baseline;gap:10px;padding:9px 16px} #view-booking .bkv2-kpis .bkv2-kpi-lab{margin:0} #view-booking .bkv2-kpis .bkv2-kpi-foot{margin:0} #view-booking .bkv2-kpis .bkv2-kpi-val{margin-left:auto;font-size:20px;font-weight:700} #view-booking .bkv2-sortbar{display:flex;align-items:center;gap:8px;padding:9px 18px 0;flex-wrap:wrap} #view-booking .bkv2-sortbar .lb{font-size:11px;color:var(--ink-soft)} #view-booking .bkv2-seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--white)} #view-booking .bkv2-seg button{border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-soft);padding:5px 11px;cursor:pointer;white-space:nowrap} #view-booking .bkv2-seg button:hover{background:var(--sand-mid)} #view-booking .bkv2-seg button.on{background:var(--bk-navy);color:var(--white)} #view-booking .bkv2-sortbar .hint{font-size:11px;color:var(--ink-soft);opacity:.85} #view-booking .bkv2-tbl tbody td{padding:8px 14px} #view-booking .bkv2-tbl tr.bkv2-day{cursor:default} #view-booking .bkv2-tbl tr.bkv2-day td,#view-booking .bkv2-tbl tr.bkv2-day:hover td{padding:5px 14px;background:#FAFBFC;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)} #view-booking .bkv2-tbl tr.bkv2-day td i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;opacity:.8} #view-booking .bkv2-tbl tr.bkr td:first-child{box-shadow:inset 3px 0 0 var(--st,transparent)} #view-booking .bkv2-tbl tr.bkr.confirmed,#view-booking .bkv2-tbl tr.bkr.completed{--st:#1D9E75} #view-booking .bkv2-tbl tr.bkr.pending_foc,#view-booking .bkv2-tbl tr.bkr.pending,#view-booking .bkv2-tbl tr.bkr.pending_approval{--st:#E0A040} #view-booking .bkv2-tbl tr.bkr.quote,#view-booking .bkv2-tbl tr.bkr.cancelled,#view-booking .bkv2-tbl tr.bkr.cancelled_weather,#view-booking .bkv2-tbl tr.bkr.rejected{--st:#C9CDD6} #view-booking .bkv2-tbl tr.bkr.fresh td{background:#F5FAFF} #view-booking .bkv2-tbl tr.bkr.fresh:hover td{background:#EDF5FD} #view-booking .bkv2-tbl .bk-id{font-size:11.5px;font-weight:700;color:var(--ink)} #view-booking .bkv2-tbl .bk-sub{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:3px;display:flex;gap:4px;align-items:center;flex-wrap:wrap} #view-booking .bkv2-tag{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;border-radius:5px;padding:0 6px;line-height:16px;font-family:'DM Sans',sans-serif;white-space:nowrap} #view-booking .bkv2-tag.new{background:#DDEEFF;color:#0F5E93} #view-booking .bkv2-tag.upd{background:#FFF1D6;color:#8A4B00} #view-booking .bkv2-tag.cxl{background:#FCEBEB;color:#A32D2D} #view-booking .bkv2-tag.b2c{background:#E6F7F9;color:#0E7D8A} #view-booking .bkv2-tag.dup{background:#FBE9D6;color:#9A5B00;cursor:help} #view-booking .bkv2-tbl .trip-name{font-weight:700} #view-booking .bkv2-tbl .trip-pax{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:2px} #view-booking .bkv2-tbl .tv-date{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} #view-booking .bkv2-tbl .tv-date .dow{font-weight:500;color:var(--ink-soft);font-size:10.5px;margin-left:4px} #view-booking .bkv2-tbl .tv-date.soon{color:#B4530A} #view-booking .bkv2-tbl .tv-soon{font-size:10px;color:#B4530A;margin-top:1px} #view-booking .bkv2-tbl .pax-total{font-size:14px;font-weight:700} #view-booking .bkv2-tbl .price{font-weight:700} #view-booking .bkv2-tbl .price.zero{color:var(--ink-soft);font-weight:500} #view-booking .bkv2-tbl .act{font-size:11px;line-height:1.35;color:var(--ink-soft);max-width:240px} #view-booking .bkv2-tbl .act b{display:block;color:var(--ink);font-weight:700;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #view-booking .bkv2-tbl .act .by{opacity:.8} #view-booking .bkv2-tbl .act .ic{display:inline-block;width:16px;height:16px;border-radius:50%;text-align:center;line-height:16px;font-size:10px;margin-right:4px;vertical-align:-3px;font-family:'DM Sans',sans-serif} #view-booking .bkv2-tbl .act .ic.create{background:#DDEEFF;color:#0F5E93} #view-booking .bkv2-tbl .act .ic.edit{background:#FFF1D6;color:#8A4B00} #view-booking .bkv2-tbl .act .ic.cancel{background:#FCEBEB;color:#A32D2D} #view-booking .bkv2-tbl .act .ic.foc{background:#FAEEDA;color:#8A5410} #view-booking .bkv2-tbl .act .ic.notify,#view-booking .bkv2-tbl .act .ic.weather,#view-booking .bkv2-tbl .act .ic.reschedule{background:#E8F0FB;color:#2F5FA8} #view-booking .bkv2-tbl .act .ic.extra,#view-booking .bkv2-tbl .act .ic.note,#view-booking .bkv2-tbl .act .ic.b2c{background:#EEF1F6;color:#6B7280} /* ==== §swA (2026-10-14) · Staff & Welfare · design A ==== */ /* owner: "ปรับดีไซน์หน้านี้หน่อย" · ทะเบียนจัดกลุ่มตามแผนก · แถบโควต้า · ghost input · สวิตช์ active */ #staff-host .sw-page{padding:22px 24px 60px;font-family:'DM Sans','Sarabun',sans-serif;color:#1E2433;display:flex;flex-direction:column;gap:14px} #staff-host .sw-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap} #staff-host .sw-title{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 360px} #staff-host .sw-title h1{margin:0;font-size:22px;font-weight:800;color:#1E2433} #staff-host .sw-title span{font-size:12px;color:#6B7280} #staff-host .sw-tabs{display:inline-flex;gap:2px;background:#E9EBF0;border-radius:10px;padding:3px;margin-left:12px} #staff-host .sw-tabs button{height:32px;padding:0 14px;border-radius:8px;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:#6B7280;cursor:pointer;white-space:nowrap} #staff-host .sw-tabs button i{font-style:normal;font-family:'DM Mono',monospace;font-weight:500;opacity:.7;margin-left:3px} #staff-host .sw-tabs button.on{background:#1E2433;color:#fff} #staff-host .sw-tabs button.on.gold{background:#B8860B} #staff-host .sw-year{margin-left:auto;display:inline-flex;align-items:center;gap:6px} #staff-host .sw-year button{width:30px;height:30px;border-radius:8px;border:1px solid #E6E8EE;background:#fff;font:inherit;font-size:15px;color:#6B7280;cursor:pointer;line-height:1} #staff-host .sw-year b{font-family:'DM Mono',monospace;font-size:15px;font-weight:700;min-width:52px;text-align:center} #staff-host .sw-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} #staff-host .sw-kpi{background:#fff;border:1px solid #E6E8EE;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:4px} #staff-host .sw-kpi .lab{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#6B7280} #staff-host .sw-kpi .val{font-family:'DM Mono',monospace;font-size:24px;font-weight:700;line-height:1} #staff-host .sw-kpi .val i{font-style:normal;font-size:12px;color:#9AA3B2;font-weight:500;margin-left:4px} #staff-host .sw-kpi .foot{font-size:11px;color:#9AA3B2} #staff-host .sw-kpi .trk{height:6px;border-radius:3px;background:#EEF1F6;overflow:hidden;margin-top:4px} #staff-host .sw-kpi .trk .u{height:100%} #staff-host .sw-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #staff-host .sw-filters .sep{width:1px;height:18px;background:#E0E3EA;margin:0 4px} #staff-host .sw-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid #E6E8EE;background:#fff;font:inherit;font-size:11.5px;font-weight:600;color:#6B7280;cursor:pointer;white-space:nowrap} #staff-host .sw-chip:hover{border-color:#B8C4D6} #staff-host .sw-chip.on{background:#1683C7;border-color:#1683C7;color:#fff} #staff-host .sw-chip i{font-style:normal;font-family:'DM Mono',monospace;opacity:.65} #staff-host .sw-search{margin-left:auto;height:30px;width:240px;border:1px solid #E6E8EE;border-radius:9px;padding:0 11px;font:inherit;font-size:12px;background:#fff;outline:none} #staff-host .sw-search:focus{border-color:#1683C7} #staff-host .sw-add{height:32px;padding:0 14px;border-radius:9px;border:0;background:#1683C7;color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer} #staff-host .sw-card{background:#fff;border:1px solid #E6E8EE;border-radius:14px;overflow:hidden} #staff-host .sw-tbl{width:100%;border-collapse:collapse} #staff-host .sw-tbl thead th{height:34px;background:#F6F7F9;border-bottom:1px solid #E6E8EE;font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#6B7280;text-align:left;padding:0 10px;font-weight:600} #staff-host .sw-tbl th.num,#staff-host .sw-tbl td.num{text-align:right} #staff-host .sw-tbl td{padding:4px 10px;border-bottom:1px solid #F0F2F5;vertical-align:middle;font-size:13px;height:50px;box-sizing:border-box} #staff-host .sw-tbl tr.sw-row:hover td{background:#F8FAFD} #staff-host .sw-tbl tr.sw-row.off td{opacity:.55} #staff-host .sw-tbl tr.sw-grp td{height:36px;background:#FAFBFC;border-top:1px solid #E6E8EE;border-bottom:1px solid #E6E8EE;font-size:11.5px;font-weight:700;color:#1E2433} #staff-host .sw-tbl tr.sw-grp td .n{font-family:'DM Mono',monospace;font-weight:500;color:#6B7280;margin-left:6px} #staff-host .sw-tbl tr.sw-grp td.sum{font-family:'DM Mono',monospace;font-size:11px;color:#6B7280;font-weight:500} #staff-host .sw-tbl tr.sw-grp td.sum.neg{color:#A32D2D} #staff-host .sw-tbl td.sw-empty{text-align:center;color:#9AA3B2;padding:36px 10px;height:auto} #staff-host .sw-av{width:30px;height:30px;border-radius:50%;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.02em} #staff-host .sw-ghost{border:1px solid transparent;background:transparent;border-radius:6px;padding:3px 6px;margin-left:-6px;font:inherit;font-size:13px;color:#1E2433;width:100%;box-sizing:border-box;outline:none} #staff-host .sw-ghost:hover{border-color:#E6E8EE;background:#fff} #staff-host .sw-ghost:focus{border-color:#1683C7;background:#fff} #staff-host .sw-ghost.mono{font-family:'DM Mono',monospace;font-size:11.5px;font-weight:700;width:96px} #staff-host .sw-ghost.name{font-weight:700} #staff-host .sw-ghost.dept{font-size:11.5px;font-weight:600;width:150px} #staff-host .sw-ghost::placeholder{color:#C9CDD6;font-weight:500} #staff-host .sw-codewrap{display:flex;align-items:center;gap:4px} #staff-host .sw-warn{display:inline-flex;font-size:10px;font-weight:700;color:#A32D2D;background:#FCEBEB;border-radius:5px;padding:1px 6px;white-space:nowrap;cursor:help} #staff-host .sw-sub{font-size:10.5px;color:#9AA3B2;margin-top:-1px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #staff-host .sw-deptwrap{display:flex;align-items:center;gap:6px} #staff-host .sw-deptwrap .dot{width:7px;height:7px;border-radius:50%;flex:none} #staff-host .sw-bar{display:flex;align-items:center;gap:10px} #staff-host .sw-bar .trk{flex:1;height:8px;border-radius:4px;background:#EEF1F6;overflow:hidden;display:flex} #staff-host .sw-bar .u{background:#1683C7;height:100%} #staff-host .sw-bar .o{background:#E05A3A;height:100%} #staff-host .sw-bar .t{font-family:'DM Mono',monospace;font-size:11.5px;font-weight:700;white-space:nowrap;min-width:40px;text-align:right} #staff-host .sw-bar .t i{font-style:normal;font-weight:500;color:#9AA3B2} #staff-host .sw-bar .t.over{color:#A32D2D} #staff-host .sw-qin{width:56px;height:28px;border:1px solid #E6E8EE;border-radius:7px;text-align:center;font:inherit;font-family:'DM Mono',monospace;font-size:13px;font-weight:700;background:#fff;outline:none} #staff-host .sw-qin:focus{border-color:#1683C7} #staff-host .sw-num{font-family:'DM Mono',monospace;font-size:13px;font-weight:700} #staff-host .sw-num.u{color:#854F0B} #staff-host .sw-num.rem{color:#0F6E56} #staff-host .sw-num.rem.neg{color:#A32D2D} #staff-host .sw-num.zero{color:#C9CDD6;font-weight:500} #staff-host .sw-act{display:flex;align-items:center;gap:8px} #staff-host .sw-sw{position:relative;width:34px;height:20px;border-radius:999px;background:#C9CDD6;cursor:pointer;flex:none;display:inline-block} #staff-host .sw-sw.on{background:#1D9E75} #staff-host .sw-sw input{position:absolute;opacity:0;width:0;height:0} #staff-host .sw-sw span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .12s} #staff-host .sw-sw.on span{left:16px} #staff-host .sw-del{height:26px;padding:0 9px;border-radius:7px;border:1px solid transparent;background:transparent;color:#A32D2D;font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;opacity:0} #staff-host tr.sw-row:hover .sw-del{opacity:1;border-color:#FCEBEB;background:#fff} #staff-host .sw-note{font-size:11px;color:#9AA3B2;line-height:1.6} /* §swA2 · แผนกเป็นช่องแรกของตาราง (rowspan) · ชื่อพนักงานช่องถัดไป */ #staff-host .sw-tbl td.sw-dcell{vertical-align:top;background:#FAFBFC;border-right:1px solid #E6E8EE;border-bottom:1px solid #E6E8EE;padding:10px 12px} #staff-host .sw-tbl tr.sw-row:hover td.sw-dcell{background:#FAFBFC} #staff-host .sw-tbl tr.sw-row.off td.sw-dcell{opacity:1} #staff-host .sw-tbl tr.sw-row.first td{border-top:1px solid #E6E8EE} #staff-host .sw-dname{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#1E2433} #staff-host .sw-dname .dot{width:8px;height:8px;border-radius:50%;flex:none} #staff-host .sw-dn{font-family:'DM Mono',monospace;font-size:11px;color:#6B7280;margin-top:2px} #staff-host .sw-dsum{font-size:11px;color:#9AA3B2;margin-top:6px;line-height:1.5} #staff-host .sw-dsum b{font-family:'DM Mono',monospace;color:#1E2433} #staff-host .sw-dsum b.u{color:#854F0B} #staff-host .sw-dsum b.rem{color:#0F6E56} #staff-host .sw-dsum b.neg{color:#A32D2D} #staff-host .sw-namewrap{display:flex;align-items:center;gap:10px} #staff-host .sw-namecol{flex:1;min-width:0} #staff-host .sw-namewrap .sw-deptwrap{opacity:0;width:130px;flex:none} #staff-host tr.sw-row:hover .sw-namewrap .sw-deptwrap,#staff-host .sw-namewrap .sw-deptwrap:focus-within{opacity:1} #staff-host .sw-ghost.dept{width:130px;font-size:11px;color:#6B7280}