/* ==== bkv2-buildaxis-skin ==== */ /* ===== Booking · BuildAxis re-skin (color / font / card) · scoped to #view-booking ===== */ #view-booking{ font-family:'Inter',system-ui,sans-serif; font-variant-numeric:tabular-nums; background:#F6F7F9; /* accent ramp · navy -> bright blue */ --bk-navy-deep:#2952C8; --bk-navy:#3A6FF7; --bk-navy-mid:#7DA0E8; --bk-navy-soft:#AFC4F0; --bk-navy-light:#D6E2FB; --bk-navy-50:#EEF3FF; /* neutrals */ --ink:#1F2A44; --ink-mid:#475569; --ink-soft:#64748B; --border:#E5E7EB; --sand:#F6F7F9; --sand-mid:#F1F5F9; --sand-dark:#E5E7EB; /* card geometry + shadow */ --r:16px; --r-sm:11px; --r-lg:18px; --shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06); /* vars consumed by the t2 manifest (By trip date) */ --coral:#3A6FF7; --coral-light:#EEF3FF; --coral-soft:#EEF3FF; --bg:#F6F7F9; --ink-faint:#94A3B8; --border-2:#EEF0F3; --white:#ffffff; } #view-booking *{font-family:inherit} /* soft shadow on inner cards that previously had border only */ #view-booking .bkv2-stat, #view-booking .bkv2-route-card, #view-booking .bkv2-rd-card, #view-booking .t2-tripcard, #view-booking .t2-listcard, #view-booking .t2-famcard, #view-booking .t2-side{box-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06)} #view-booking .t2-tripcard,#view-booking .t2-listcard,#view-booking .t2-famcard{border-radius:16px} /* cream cards -> clean white / pale blue */ #view-booking .bkv2-route-card{background:#fff;border-color:#E5E7EB} #view-booking .bkv2-week-summary{background:#EEF3FF;border-color:#D6E2FB} /* calendar day chips -> cooler neutral fill */ #view-booking .bkv2-cal-chip{background:#F1F5F9} /* heavier navy headings */ #view-booking .bkv2-stat .s-val, #view-booking .bkv2-selday-ttl, #view-booking .t2-tnm, #view-booking .bkv2-week-summary .ws-total{font-weight:800;letter-spacing:-.3px} /* primary tab active -> filled blue */ #view-booking .bkv2-tab.on{background:var(--bk-navy);color:#fff;box-shadow:none} /* ===== Topbar · Option A (underline tabs) · separate card ===== */ #view-booking .bkv2-topcard{margin-bottom:12px;overflow:visible;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important} #view-booking .bkv2-topbar2{display:flex;align-items:center;gap:10px;padding:4px 2px;flex-wrap:wrap;background:transparent} /* floating liquid-glass islands */ #view-booking .bkv2-utabs,#view-booking .bkv2-meta2,#view-booking .bkv2-vseg,#view-booking .bkv2-datechip{backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 6px 18px rgba(31,42,68,.13);border:1px solid rgba(255,255,255,.75)} #view-booking .bkv2-utabs{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.72);border-radius:999px;padding:4px} #view-booking .bkv2-utab{font-size:12.5px;font-weight:500;color:#64748B;padding:6px 15px;border:none;background:none;border-radius:999px;cursor:pointer;font-family:inherit;line-height:1.2;white-space:nowrap;transition:background .12s,color .12s} #view-booking .bkv2-utab:hover{color:#3A6FF7;background:rgba(58,111,247,.12)} #view-booking .bkv2-utab:active{background:rgba(58,111,247,.22);transform:scale(.97)} #view-booking .bkv2-utab.on{color:#fff;font-weight:600;background:#3A6FF7;box-shadow:0 2px 6px rgba(58,111,247,.32)} #view-booking .bkv2-topdiv{width:1px;height:22px;background:#E5E7EB} #view-booking .bkv2-vseg{display:inline-flex;background:rgba(255,255,255,.72);border-radius:999px;padding:3px;gap:2px} #view-booking .bkv2-vsegbtn{width:30px;height:26px;border:none;background:transparent;border-radius:6px;color:#64748B;cursor:pointer;font-size:14px;font-family:inherit;display:flex;align-items:center;justify-content:center} #view-booking .bkv2-vsegbtn.on{background:#fff;color:#3A6FF7;box-shadow:0 1px 2px rgba(15,23,42,.08)} #view-booking .bkv2-datechip{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.72);border-radius:999px;padding:4px 6px} #view-booking .bkv2-dcbtn{width:24px;height:24px;border:none;background:transparent;color:#94A3B8;cursor:pointer;font-size:15px;border-radius:6px;font-family:inherit;display:flex;align-items:center;justify-content:center} #view-booking .bkv2-dcbtn:hover{background:#F1F5F9;color:#3A6FF7} #view-booking .bkv2-dclbl{font-size:13px;font-weight:700;color:#1F2A44;min-width:80px;text-align:center;font-variant-numeric:tabular-nums} #view-booking .bkv2-todaylink{font-size:12px;font-weight:700;color:#3A6FF7;background:none;border:none;cursor:pointer;font-family:inherit;padding:4px} #view-booking .bkv2-topspacer{margin-left:auto} #view-booking .bkv2-meta2{font-size:12px;color:#5A6478;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.7);border-radius:999px;padding:8px 14px} #view-booking .bkv2-newbtn2{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#fff;background:#1F2A44;border:none;border-radius:999px;padding:8px 15px;cursor:pointer;font-family:inherit} #view-booking .bkv2-newbtn2:hover{background:#2952C8} #view-booking .bkv2-kbd2{background:rgba(255,255,255,.2);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:600} /* ===== Calendar · locked-seats indicator ===== */ #view-booking .bkv2-cal-lock{margin-top:auto;align-self:flex-start;font-size:9px;font-weight:700;color:#C0392B;background:#FBEAE6;border-radius:5px;padding:1px 6px;font-family:'DM Mono',monospace} /* ===== Seat Locks tab · RED tone (differentiate from blue views) ===== */ #view-booking .bkv2-locks .bkv2-stat.hero{background:#C0392B;border-color:#9A2D1E} #view-booking .bkv2-locks .bkv2-newbtn2{background:#C0392B} #view-booking .bkv2-locks .bkv2-newbtn2:hover{background:#9A2D1E} #view-booking .bkv2-locks .bkv2-nb-sec-h::first-letter{color:#C0392B} #view-booking .bkv2-locks .bkv2-nb-input:focus{border-color:#C0392B} /* ===== Matrix · empty (open · available) cells -> soft green · clickable ===== */ #view-booking .bkv2-mx td.cell.empty{background:#E9F7EF;color:#3E9B6E;font-weight:500;cursor:pointer} #view-booking .bkv2-mx td.cell.empty:hover{background:#D6F0E1;color:#2E8159} #view-booking .bkv2-mx td.cell.empty.sel{outline:2px solid #3A6FF7;outline-offset:-1px} /* day-of-month header · clickable to select that date */ #view-booking .bkv2-mx th.dh{cursor:pointer} #view-booking .bkv2-mx th.dh:hover{background:#EEF3FF;border-radius:3px} #view-booking .bkv2-mx th.dh:hover .dnum{color:#3A6FF7} /* ===== Today vs Selected · make them clearly different ===== Today = soft tint + blue ring (a marker, not a pick) Select = solid filled blue (the active click) */ /* Matrix · day header */ #view-booking .bkv2-mx th.dh.today{background:#EAF1FE;color:#2952C8;border-radius:3px;box-shadow:inset 0 -2px 0 #9DBFF6} #view-booking .bkv2-mx th.dh.today .dnum{color:#2952C8} #view-booking .bkv2-mx th.dh.sel{background:#3A6FF7;color:#fff;border-radius:3px;box-shadow:none} #view-booking .bkv2-mx th.dh.sel .dnum{color:#fff} #view-booking .bkv2-mx tr.tot td.today{background:#EAF1FE;color:#2952C8} /* Matrix · selected data/empty cell = filled (not just outline) */ #view-booking .bkv2-mx td.cell.sel{outline:none;box-shadow:inset 0 0 0 2px #3A6FF7;background:#3A6FF7;color:#fff} #view-booking .bkv2-mx td.cell.empty.sel{background:#3A6FF7;color:#fff} /* ===== §mxRead · Matrix อ่านง่ายขึ้น ===== */ /* คอลัมน์รวมเดือน */ #view-booking .bkv2-mx col.sumcol{width:86px} #view-booking .bkv2-mx th.rowh.sumh{text-align:right;padding-right:9px} #view-booking .bkv2-mx td.sum{background:#F1F2F5;text-align:right;padding:4px 9px;border-radius:4px;white-space:nowrap;font-family:'DM Mono',monospace} #view-booking .bkv2-mx td.sum b{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums} #view-booking .bkv2-mx td.sum i{font-style:normal;font-size:9px;color:#98A2AD;display:block;margin-top:1px} /* §mxBrk2 · คอลัมน์ AD / CHD / INF / FOC */ #view-booking .bkv2-mx col.pxcol{width:40px} #view-booking .bkv2-mx th.pxh{background:#EFF1F5;color:#6B7280;font-size:9px;font-weight:700;text-align:right;padding:5px 7px 5px 0;border-bottom:1px solid #E7E4DC;white-space:nowrap} #view-booking .bkv2-mx td.px{background:#F7F8FA;text-align:right;padding:4px 7px;font-family:'DM Mono',monospace;font-size:10px;font-weight:700;color:#5B6670;font-variant-numeric:tabular-nums} #view-booking .bkv2-mx td.px.z{color:#C8CDD4;font-weight:500} #view-booking .bkv2-mx tr.tot td.px{background:#161E31;color:#DCE4F0;font-size:10.5px} #view-booking .bkv2-mx tr.tot td.px.z{color:#5A6880} /* §mxBrk2 · แผงขวาพับแล้ว · เหลือแถบบางให้กดกางกลับ */ #view-booking .bkv2-split.nopanel{grid-template-columns:1fr 30px} #view-booking .bkv2-selrail{background:var(--white);border-left:1px solid var(--border);border-radius:0 var(--r-sm) var(--r-sm) 0; min-height:280px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-start; gap:10px;padding:12px 0;cursor:pointer;color:#8B96A0} #view-booking .bkv2-selrail:hover{background:#F7FAFE;color:#2952C8} #view-booking .bkv2-selrail .ar{font-size:15px;font-weight:800;line-height:1} #view-booking .bkv2-selrail .tx{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.05em; writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap} #view-booking .bkv2-selday-lab{display:flex;align-items:center;justify-content:space-between;gap:8px} #view-booking .bkv2-selhide{border:none;background:transparent;color:#98A2AD;font-family:inherit;font-size:13px; font-weight:800;cursor:pointer;padding:0 2px;line-height:1} #view-booking .bkv2-selhide:hover{color:#2952C8} /* เสาร์-อาทิตย์ · แรเงาทั้งคอลัมน์ให้เห็นรอบสัปดาห์ */ #view-booking .bkv2-mx td.cell.wk{box-shadow:inset 0 0 0 99px rgba(31,42,68,.035)} #view-booking .bkv2-mx th.dh.weekend{background:#F5F6F8;border-radius:3px} /* ตัวเลขในช่อง · หนาขึ้นและเป็นตัวเลขความกว้างเท่ากัน */ #view-booking .bkv2-mx td.cell{font-weight:700;font-size:11px;font-variant-numeric:tabular-nums} #view-booking .bkv2-mx tr.sub td.cell{font-weight:600;font-size:10.5px;color:inherit} /* แถวย่อยเดิมโดนสั่งให้พื้นหลังโปร่ง · กางออกมาสีหายเกลี้ยง */ #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:inherit} /* กางกลุ่มออก · แถวแม่ปล่อยว่าง ไม่ให้อ่านเลขซ้ำกับแถวลูก */ #view-booking .bkv2-mx td.cell.blank{background:#F1F4F9;cursor:default} #view-booking .bkv2-mx tr.fam.expanded td.rowh{background:#F1F4F9} /* variant ที่ไม่มีคนทั้งเดือน */ #view-booking .bkv2-mx td.rowh.mxmore{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;color:#5B6670;background:#FAFBFC;padding:6px 9px 6px 28px;cursor:pointer;border-left:2px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none} #view-booking .bkv2-mx td.rowh.mxmore u{text-decoration:none;color:#2952C8;font-weight:700} #view-booking .bkv2-mx td.rowh.mxmore .mxmore-n{color:#A6AEB6;font-size:10px;margin-left:6px} /* แถวรวมทั้งวัน · เดิมเทาบนเทา ทั้งที่ต้องอ่านที่สุด */ #view-booking .bkv2-mx tr.tot td{background:#1F2A44;color:#fff;text-align:center;padding:5px 0 7px;vertical-align:top;border-radius:0} #view-booking .bkv2-mx tr.tot td.rowh{text-align:left;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#B9C4D4;padding:7px 8px;border-left:0} #view-booking .bkv2-mx tr.tot .tn{font-family:'DM Mono',monospace;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1} #view-booking .bkv2-mx tr.tot .ttrack{height:4px;border-radius:2px;background:rgba(255,255,255,.16);margin:4px 4px 0} #view-booking .bkv2-mx tr.tot .tbar{height:4px;border-radius:2px;background:#7FA6E8} #view-booking .bkv2-mx tr.tot td.today .tbar{background:#fff} #view-booking .bkv2-mx tr.tot td.today{background:#2952C8;color:#fff} #view-booking .bkv2-mx tr.tot td.sum{background:#0F1626;text-align:right;padding:6px 9px} #view-booking .bkv2-mx tr.tot td.sum b{font-size:13px;color:#fff} #view-booking .bkv2-mx tr.tot td.sum i{color:#8494AC} /* ป้ายสีท้ายตาราง */ #view-booking .bkv2-foot-hints .sw.mxlo{background:#F2D9D5} #view-booking .bkv2-foot-hints .sw.mxhi{background:#C0392B} #view-booking .bkv2-foot-hints .sw.mxempty{background:#E9F7EF} #view-booking .bkv2-foot-hints .sw.mxclosed{background:repeating-linear-gradient(45deg,#f0ebe0,#f0ebe0 3px,transparent 3px,transparent 6px)} /* การ์ดสถิติ · ใบที่ยังไม่ยืนยัน */ #view-booking .bkv2-stat.alert{background:#FFF6F5;border-color:#F2D2CC} #view-booking .bkv2-stat.alert .s-val{color:#A32D2D} #view-booking .bkv2-stat.alert .s-foot b{color:#A32D2D;font-weight:800} /* Calendar · day cell · Today = ring on white · Selected = filled */ #view-booking .bkv2-cal-cell.today{background:#fff;border:2px solid #9DBFF6} #view-booking .bkv2-cal-cell.weekend.today{background:#fff} #view-booking .bkv2-cal-cell.today .bkv2-cal-daynum{color:#3A6FF7;font-weight:700} #view-booking .bkv2-cal-cell.sel{background:#E4ECFC;border:2px solid #3A6FF7;box-shadow:0 2px 8px rgba(58,111,247,.18)} #view-booking .bkv2-cal-cell.sel .bkv2-cal-daynum{color:#1F2A44;font-weight:700} /* ==== softui-ocean-skin ==== */ :root{ --fd-coral:#1683C7; --fd-coral-soft:#E1F0FA; --fd-coral-veryfaint:#F1F8FD; --fd-coral-deep:#0E6AA8; --aos-coral:#1683C7; --aos-coral-soft:#E1F0FA; --aos-coral-veryfaint:#F1F8FD; --aos-coral-deep:#0E6AA8; --coral:#1683C7; --coral-light:#E1F0FA; } .topbar{background:#E8EBF1 !important;border-bottom:none !important;box-shadow:0 6px 14px -8px #c5cad6} .topbar-brand{color:#3F4654 !important} .topbar-sub{color:#9AA0AE !important} .topbar-sep{background:#D4D8E2 !important} .topbar-date{color:#8B91A0 !important} .brand-icon{background:#E8EBF1 !important;box-shadow:3px 3px 6px #c5cad6,-3px -3px 6px #ffffff} .brand-icon svg{stroke:#1683C7 !important} .topbar-btn{background:#E8EBF1 !important;border:none !important;color:#6B7180 !important;box-shadow:3px 3px 7px #c5cad6,-3px -3px 7px #ffffff;border-radius:11px} .topbar-btn:hover{background:#E8EBF1 !important;box-shadow:2px 2px 5px #c5cad6,-2px -2px 5px #ffffff} .topbar-btn:active{box-shadow:inset 3px 3px 6px #c5cad6,inset -3px -3px 6px #ffffff} .topbar-btn[onclick*="Backup"]{color:#1683C7 !important} .topbar-btn[onclick*="reset"]{color:#CC3B3B !important} .sidebar{background:#E8EBF1 !important;border-right:none !important} .nav-section{color:#A3A9B8 !important} .nav-item{color:#6B7180 !important;border-left-color:transparent !important;border-color:transparent !important} .nav-item svg{opacity:.7} .nav-item:hover{background:rgba(15,31,46,.04) !important;color:#3F4654 !important} .nav-item.active{background:#E8EBF1 !important;color:#1683C7 !important;font-weight:500;border:none !important;box-shadow:inset 4px 4px 8px #c5cad6,inset -4px -4px 8px #ffffff} .nav-item.active svg{opacity:1;color:#1683C7} .sidebar-footer{color:#9AA0AE !important;border-top-color:#D4D8E2 !important} /* ==== md-glass-skin ==== */ #view-marketdata{position:relative;background:linear-gradient(135deg,#EEF3FA 0%,#F6F8FC 45%,#EAF2F7 100%);border-radius:18px;padding:10px 12px 20px;overflow:hidden} #view-marketdata::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:#FBC79A;filter:blur(74px);opacity:.62;top:-60px;left:30%;pointer-events:none} #view-marketdata::after{content:'';position:absolute;width:280px;height:280px;border-radius:50%;background:#A8E0CF;filter:blur(74px);opacity:.55;top:300px;right:-40px;pointer-events:none} #view-marketdata .md-blob3{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:#F6A8C0;filter:blur(76px);opacity:.4;top:120px;left:-50px;pointer-events:none;z-index:0} #md-body .md-gp{position:relative;background:rgba(255,255,255,.18);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.55);border-radius:16px;box-shadow:0 12px 30px rgba(28,52,86,.10),inset 0 1px 0 rgba(255,255,255,.7)} #view-marketdata .md-import-glass{position:relative;flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:#0E6AA8;padding:9px 16px 9px 11px;border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(220,238,250,.34));backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 2px rgba(22,131,199,.10),0 8px 22px rgba(22,131,199,.18);transition:transform .15s ease,box-shadow .15s ease} #view-marketdata .md-import-glass:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px rgba(22,131,199,.28)} #view-marketdata .md-import-glass:active{transform:translateY(0) scale(.98)} #view-marketdata .md-import-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#37A0E0,#1683C7);color:#fff;font-size:12px;box-shadow:0 2px 6px rgba(22,131,199,.4),inset 0 1px 0 rgba(255,255,255,.5)} #view-marketdata h1, #view-marketdata p{position:relative} #md-body{position:relative} #md-body .md-card{background:rgba(255,255,255,.58);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.72);border-radius:16px;box-shadow:0 8px 28px rgba(30,55,90,.09);padding:14px 16px;margin-bottom:16px} #md-body .md-kpi{background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.72);border-radius:14px;box-shadow:0 6px 22px rgba(30,55,90,.08);flex:1;min-width:150px;padding:13px 15px} #md-body .md-tile{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);border-radius:14px} #md-body .md-importer{background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.66)} #md-body .md-tab{background:transparent;color:var(--fd-ink-soft);border:none;font-family:inherit;font-size:12px;font-weight:600;padding:8px 14px;border-radius:8px 8px 0 0;cursor:pointer} #md-body .md-tab.on{background:#1683C7;color:#fff} /* ── Date-header band (liquid glass) ── */ #md-body .md-band{position:relative;z-index:1;background:rgba(255,255,255,.42);backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);border:1px solid rgba(255,255,255,.72);border-radius:18px;box-shadow:0 14px 34px rgba(28,52,86,.12),inset 0 1px 0 rgba(255,255,255,.92);padding:15px 18px;margin-bottom:16px} #md-body .mb-daterow{display:flex;align-items:center;gap:15px;flex-wrap:wrap} #md-body .mb-cal{width:50px;height:50px;border-radius:13px;background:linear-gradient(135deg,#1683C7,#0E6AA8);box-shadow:0 6px 16px rgba(22,131,199,.32),inset 0 1px 0 rgba(255,255,255,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;color:#fff} #md-body .mb-cal-top{font-size:9px;font-weight:700;letter-spacing:.1em;opacity:.85} #md-body .mb-cal-num{font-size:18px;font-weight:600;line-height:1;font-family:'DM Mono',monospace} #md-body .mb-dwrap{flex:1;min-width:200px} #md-body .mb-dbig{font-size:20px;font-weight:500;color:#161d28;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap} #md-body .mb-arrow{color:#1683C7} #md-body .mb-days{background:#1683C7;color:#fff;font-size:11px;font-weight:600;padding:3px 11px;border-radius:10px} #md-body .mb-dsub{font-size:11.5px;color:#6b7280;margin-top:4px} #md-body .mb-mono{font-family:'DM Mono',monospace;color:#5a6472} #md-body .mb-today{display:inline-flex;align-items:center;gap:10px;background:#fff;border:0.5px solid rgba(20,30,50,.12);border-radius:12px;padding:7px 14px 7px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);flex-shrink:0} #md-body .mb-today-cal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#F4762E;color:#fff;line-height:1;flex-shrink:0} #md-body .mb-today-cal-m{font-size:7.5px;font-weight:700;letter-spacing:.05em} #md-body .mb-today-cal-d{font-size:15px;font-weight:600;font-family:'DM Mono',monospace} #md-body .mb-today-txt{display:flex;flex-direction:column;line-height:1.25} #md-body .mb-today-lbl{font-size:9px;font-weight:700;color:#C2421F;text-transform:uppercase;letter-spacing:.09em} #md-body .mb-today-date{font-size:14px;font-weight:500;color:#161d28;font-family:'DM Mono',monospace} #md-body .mb-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:13px;background:rgba(255,255,255,.4);border:1px solid rgba(20,30,50,.08);border-radius:13px;padding:4px} #md-body .mb-tabs button{border:none;background:transparent;color:#4a5462;font-family:inherit;font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:10px;cursor:pointer} #md-body .mb-tabs button.on{background:#F4762E;color:#fff;box-shadow:0 3px 10px rgba(244,118,46,.32)} #view-marketdata.md-dark{background:linear-gradient(150deg,#43291F 0%,#5E3A2C 40%,#4E3128 72%,#2B1E1A 100%)} #view-marketdata.md-dark::before{background:#F2843A;opacity:.62;filter:blur(80px)} #view-marketdata.md-dark::after{background:#2FB39A;opacity:.4;filter:blur(80px)} #view-marketdata.md-dark h1,#view-marketdata.md-dark p{color:#fff} #view-marketdata.md-dark .md-importer{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)} #view-marketdata.md-dark .md-importer>div>div{color:#fff} #view-marketdata.md-dark .md-tab{color:rgba(255,255,255,.6)} #view-marketdata.md-dark .md-tab.on{background:#E8642A;color:#fff} #md-body .md-dk{position:relative;background:rgba(255,255,255,.1);backdrop-filter:blur(32px) saturate(170%);-webkit-backdrop-filter:blur(32px) saturate(170%);border:1px solid rgba(255,255,255,.22);border-radius:18px;box-shadow:0 12px 36px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.38);color:#fff;padding:14px 16px} /* ==== bkv2-liquid-skin ==== */ /* Booking calendar · liquid-card skin (Option A · material only · colors kept · reversible: delete this block) */ #view-booking .bkv2-stat, #view-booking .bkv2-route-card, #view-booking .bkv2-bodycard, #view-booking .bkv2-selday{ border-radius:18px !important; box-shadow:0 12px 30px rgba(20,40,80,.11), 0 2px 6px rgba(20,40,80,.05), inset 0 1px 0 rgba(255,255,255,.7) !important; } #view-booking .bkv2-selday{ border:1px solid rgba(20,40,80,.06) !important; } #view-booking .bkv2-stat, #view-booking .bkv2-route-card{ transition:box-shadow .16s ease, transform .16s ease; } #view-booking .bkv2-stat:hover, #view-booking .bkv2-route-card:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(20,40,80,.15), inset 0 1px 0 rgba(255,255,255,.8) !important; } #view-booking .bkv2-cal-cell{ border-radius:12px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.55) !important; } /* §bkCalPast · วันที่ผ่านมาแล้ว · ยังกดดูได้ แค่ไม่ดึงสายตา ยกเว้นวันนี้กับวันที่เลือกอยู่ — สองอันนั้นต้องเด่นตามเดิม */ #view-booking .bkv2-cal-cell.past:not(.sel):not(.today){ background:#F4F2ED !important; border-color:#E5E2DA !important; } /* §bkCalWeekend · เสาร์-อาทิตย์ที่ยังไม่ผ่าน = พื้นขาวเหมือนวันธรรมดา ไม่งั้นพื้นเบจของวันหยุดไปชนกับพื้นเทาของวันที่ผ่านมาแล้ว แยกไม่ออก ความเป็นวันหยุดยังดูได้จากหัวคอลัมน์ SUN/SAT ที่จางกว่า */ #view-booking .bkv2-cal-cell.weekend:not(.past){ background:var(--white) !important; } #view-booking .bkv2-cal-cell.past:not(.sel) .bkv2-cal-daynum{ color:#a8a59d; } #view-booking .bkv2-cal-cell.past:not(.sel) .bkv2-cal-chip:not(.orphan){ opacity:.5; filter:saturate(.6); transition:opacity .15s, filter .15s; } /* §bkCalOrphan · วันที่ผ่านมาแล้วแต่ยังค้าง คือตัวที่ต้องรีบที่สุด ห้ามหรี่ */ #view-booking .bkv2-cal-cell.past:not(.sel) .bkv2-cal-chip.orphan{ opacity:1; filter:none; } #view-booking .bkv2-cal-cell.past:not(.sel):hover .bkv2-cal-chip{ opacity:.92; filter:none; } #view-booking .bkv2-cal-cell.past:not(.sel) .bkv2-cal-daytot{ opacity:.55; } #view-booking .bkv2-cal-cell.past:not(.sel) .bkv2-cal-lock{ opacity:.5; } /* ==== cal-liquid-skin ==== */ /* Calendar · liquid-card skin (Option A · material only · colors untouched · reversible: delete this block) */ #view-calendar .cal-card{ border-radius:22px !important; border:1px solid rgba(255,255,255,.65) !important; box-shadow:0 14px 34px rgba(20,40,25,.16), 0 3px 8px rgba(20,40,25,.08), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.25) !important; transition:box-shadow .18s ease, transform .18s ease; } #view-calendar .cal-card:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(20,40,25,.2), 0 4px 10px rgba(20,40,25,.1), inset 0 1px 0 rgba(255,255,255,.9) !important; } /* ==== bop-dashboard-skin ==== */ /* Boat Operation · ใช้ภาษาการออกแบบชุดเดียวกับหน้า Dashboard เดิมบล็อกนี้เป็น liquid-glass ไล่เฉดเขียว-ส้ม-ฟ้า-ชมพู · เปลี่ยนเป็นพื้นน้ำเงิน การ์ดขาวทึบ ค่าเดียวกับ .dv-c ทุกใบ · revert = ลบทั้งบล็อก */ #view-operation{ background: radial-gradient(1100px 460px at 16% -10%, rgba(52,72,150,.55), transparent 62%), radial-gradient(880px 400px at 92% 0%, rgba(38,56,124,.5), transparent 58%), #16265C !important; } /* หัวเรื่องอยู่บนพื้นเข้ม */ #view-operation .bop2-hd h1{ color:#fff !important; } #view-operation .bop2-hd p{ color:#9aa8cf !important; } /* ป้ายเดือน · เขียนสีไว้ใน inline style ต้องใช้ !important ถึงจะทับได้ */ #view-operation .bop2-hd span{ color:#fff !important; } /* ปุ่มกรองท่า · เฉพาะตัวที่ยังไม่ถูกเลือก · ตัวที่เลือกอยู่ต้องคงพื้นเขียว */ #view-operation .bo-pier-pill:not(.on){ background:#fff !important; } /* ข้อความ Selected: ที่ลอยบนพื้นน้ำเงิน */ #view-operation .bo-selnote{ color:#9aa8cf !important; } #view-operation .bo-selnote b{ color:#fff !important; } /* การ์ดทึบ · ไม่มี backdrop-filter · ค่าเท่ากับ .dv-c ในหน้า Dashboard หมายเหตุ · backdrop-filter บนการ์ดใหญ่สร้าง stacking context ในไฟล์นี้เคยเจอปัญหานั้นมาแล้วที่ฟอร์มจอง (ขัง dropdown ไว้ข้างใน) */ #view-operation .bo-card, #view-operation .bo-tile{ background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:1px solid rgba(0,0,0,.09) !important; border-radius:12px !important; box-shadow:0 6px 22px rgba(2,10,30,.10) !important; } /* แสงสะท้อนหัวการ์ดของสกินเดิม · มุมฟิกซ์ 16px จะโผล่เกินขอบการ์ด 12px */ #view-operation .bo-tile::before{ content:none !important; } /* §bop3col · จอแคบลง ยุบทีละคอลัมน์ · ตารางต้องได้ที่กว้างที่สุดเสมอ */ @media (max-width:1500px){ #view-operation .bop2-3col{ grid-template-columns:250px minmax(0,1fr) !important; } #view-operation .bop2-3col > *:last-child{ grid-column:1/-1; } } @media (max-width:1000px){ #view-operation .bop2-3col{ grid-template-columns:minmax(0,1fr) !important; } #view-operation .bop2-3col > *{ grid-column:auto !important; } } /* การ์ดแจ้งเตือน · เก็บพื้นชมพูจาง ๆ ให้ยังสะดุดตา แต่ไม่ตะโกนทั้งใบ */ #view-operation .bo-tile:nth-child(4){ background:linear-gradient(100deg,#fdf4f3,#fff 62%) !important; } /* §bop3col · การ์ดเตือน · ในคอลัมน์แคบข้อความเดิมตัดคำเป็นสามบรรทัด วางป้ายบนสุด ตัวเลขใหญ่ แล้วรายละเอียดล่างสุด แทนการวางเรียงแนวนอน */ #view-operation .bop2-3col > div:first-child > .bo-tile:nth-child(4){ flex-direction:column !important; align-items:flex-start !important; gap:2px; } #view-operation .bop2-3col > div:first-child > .bo-tile:nth-child(4) > div:first-child > div:nth-child(2){ font-size:13px !important; line-height:1.3 !important; margin-top:3px !important; } #view-operation .bop2-3col > div:first-child > .bo-tile:nth-child(4) > div:last-child{ text-align:left !important; font-size:9px !important; } /* §bop3col · การ์ดสถิติอยู่ในคอลัมน์แคบแล้ว · วางป้ายกับตัวเลขเรียงแนวนอนให้เตี้ยลง */ #view-operation .bop2-3col > div:first-child > .bo-tile{ min-height:0 !important; padding:11px 14px !important; flex-direction:row !important; align-items:center !important; gap:10px; } #view-operation .bop2-3col > div:first-child > .bo-tile > div:first-child{ flex:1; min-width:0; } #view-operation .bop2-3col > div:first-child > .bo-tile .bo-tile-num{ margin-top:3px !important; } #view-operation .bop2-3col > div:first-child > .bo-tile > div:last-child{ text-align:right; flex-shrink:0; } /* ==== topbar-float-skin ==== */ /* Remove the top bar · content fills to top · right-side controls float top-right · revert = delete this block */ :root{--topbar:0px} .topbar{position:fixed !important;top:0;right:0;left:auto !important;width:auto !important;height:auto !important; background:transparent !important;border:none !important;box-shadow:none !important; padding:9px 14px !important;gap:8px;z-index:300;pointer-events:none} .topbar-brand,.topbar-sep{display:none !important} .topbar-right{pointer-events:auto;margin-left:0 !important;display:none !important} .topbar.tools-open .topbar-right{display:flex !important} .topbar-toggle{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:11px;cursor:pointer;background:#E8EBF1;color:#6B7180;box-shadow:3px 3px 7px #c5cad6,-3px -3px 7px #ffffff;transition:transform .12s} .topbar.tools-open .topbar-toggle{background:#1683C7;color:#fff;box-shadow:inset 2px 2px 5px rgba(0,0,0,.18)} .topbar-toggle:active{transform:scale(.95)} .app{margin-top:0 !important} .sidebar{top:0 !important} /* ==== bkv2-nb-glass-skin ==== */ /* New Booking form · liquid-glass cards (keeps field/label colors) · revert = delete this block */ #view-booking .bkv2-nb{ background: radial-gradient(560px 360px at 6% -4%, rgba(120,222,180,.22), transparent 60%), radial-gradient(520px 340px at 100% 2%, rgba(150,184,252,.20), transparent 60%), radial-gradient(560px 400px at 70% 110%, rgba(245,170,205,.16), transparent 60%), linear-gradient(135deg,#FBFFFE,#EEF5FB 55%,#FAFBFF) !important; } /* form-body cards hold typeahead dropdowns → NO backdrop-filter (it traps the dropdown in a stacking context = "ซ้อนกัน"). Translucent bg keeps the glass tint. */ #view-booking .bkv2-nb-sec, #view-booking .bkv2-nb-card{ background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.66)) !important; border:1px solid rgba(255,255,255,.85) !important; box-shadow:0 8px 26px rgba(30,60,90,.07), inset 0 1px 0 rgba(255,255,255,.9) !important; } /* topbar + right review panel have no dropdowns → safe to frost */ #view-booking .bkv2-nb-topbar, #view-booking .bkv2-review-sticky{ background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.44)) !important; backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35); border:1px solid rgba(255,255,255,.85) !important; box-shadow:0 8px 26px rgba(30,60,90,.08), inset 0 1px 0 rgba(255,255,255,.9) !important; } /* ==== sidebar-glass-skin ==== */ /* Light glass sidebar + collapse rail · revert = restore BACKUP/allotment_v2_20260705_pre_glass_sidebar.html */ .sidebar{ top:6px !important; left:14px !important; bottom:10px !important; height:auto !important; width:250px !important; border-radius:24px !important; background: radial-gradient(120% 46% at 50% -6%, rgba(255,255,255,.55), transparent 60%), rgba(255,255,255,.56) !important; -webkit-backdrop-filter:blur(26px) saturate(1.5) !important; backdrop-filter:blur(26px) saturate(1.5) !important; border:1px solid rgba(255,255,255,.62) !important; box-shadow:0 22px 52px -18px rgba(38,52,100,.5), inset 0 1.5px 0 rgba(255,255,255,.72) !important; padding:12px 10px 66px !important; transition:width .2s ease !important; } .main{ margin-left:274px !important; padding-left:14px !important; transition:margin-left .2s ease; } .sidebar .nav-section{ color:#7a8493 !important; font-size:10px !important; letter-spacing:.06em !important; padding:12px 10px 4px !important; } .sidebar .nav-item{ color:#3a4453 !important; border:1px solid transparent !important; border-radius:12px !important; margin-bottom:2px !important; padding:8px 11px !important; } .sidebar .nav-item svg{ opacity:1 !important; color:#66707e !important; width:17px !important; height:17px !important; } .sidebar .nav-item:hover{ background:rgba(255,255,255,.55) !important; color:#1e2633 !important; } .sidebar .nav-item:hover svg{ color:#3a4453 !important; } .sidebar .nav-item.active{ background:#1683C7 !important; color:#fff !important; font-weight:500 !important; border:none !important; box-shadow:0 8px 18px -4px rgba(22,131,199,.5) !important; } .sidebar .nav-item.active svg{ color:#fff !important; opacity:1 !important; } .sidebar .ct-nav-badge{ background:#E24B4A !important; color:#fff !important; border:none !important; } .sidebar .nav-item.po-sub{ padding-left:34px !important; font-size:11.5px !important; margin-bottom:1px !important; } .sidebar .nav-item.po-grp{ font-weight:600 !important; } .sidebar.sb-collapsed .nav-item.po-sub{ display:none !important; } .sidebar-footer{ color:#9aa3af !important; border-top:1px solid rgba(0,0,0,.06) !important; } /* profile header (injected) */ .sb-profile{ display:flex; align-items:center; gap:10px; padding:4px 6px 0; } .sb-avatar{ width:44px; height:44px; border-radius:50%; background:#1683C7; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; border:2.5px solid rgba(255,255,255,.85); flex:none; } .sb-greet{ font-size:11px; color:#5a6472; } .sb-name{ font-size:15px; font-weight:500; color:#1e2633; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-toggle{ width:26px; height:26px; flex:none; border:none; border-radius:8px; background:rgba(255,255,255,.72); color:#5a6472; cursor:pointer; display:flex; align-items:center; justify-content:center; } .sb-toggle:hover{ background:rgba(255,255,255,.95); } .sb-divider{ height:1px; background:rgba(255,255,255,.55); margin:12px 4px 4px; } /* ── collapsed rail ── */ .sidebar.sb-collapsed{ width:84px !important; } body.sb-collapsed .main{ margin-left:108px !important; } .sidebar.sb-collapsed .nav-section{ font-size:0 !important; padding:8px 0 2px !important; height:1px; background:rgba(0,0,0,.06); margin:6px 22px; overflow:hidden; } .sidebar.sb-collapsed .nav-item{ font-size:0 !important; justify-content:center !important; padding:11px 0 !important; gap:0 !important; position:relative; } .sidebar.sb-collapsed .nav-item svg{ width:20px !important; height:20px !important; } .sidebar.sb-collapsed .nav-item .ct-nav-badge{ font-size:9px !important; position:absolute !important; top:3px; right:14px; min-width:15px; height:15px; padding:0 3px !important; line-height:15px !important; } .sidebar.sb-collapsed .sb-profile{ flex-direction:column; gap:9px; padding:2px 0 0; } .sidebar.sb-collapsed .sb-greet, .sidebar.sb-collapsed .sb-name{ display:none !important; } /* user/logout box → glass footer pinned at the sidebar bottom */ #la-userbadge{ left:14px !important; right:auto !important; bottom:10px !important; width:250px !important; max-width:250px !important; box-sizing:border-box !important; background:rgba(255,255,255,.74) !important; -webkit-backdrop-filter:blur(20px) saturate(1.4) !important; backdrop-filter:blur(20px) saturate(1.4) !important; color:#3a4453 !important; border:none !important; border-top:1px solid rgba(0,0,0,.06) !important; border-radius:0 0 24px 24px !important; box-shadow:0 -8px 16px -10px rgba(40,60,110,.28) !important; padding:9px 12px !important; gap:7px !important; font-size:11px !important; } #la-userbadge b{ color:#1e2633 !important; } #la-userbadge > span{ flex:1 1 100% !important; } .la-ub-btn{ background:#EDEFF3 !important; color:#3a4453 !important; } .la-ub-btn:hover{ background:#E0E4EA !important; } body.sb-collapsed #la-userbadge{ width:84px !important; max-width:84px !important; flex-direction:column !important; align-items:stretch !important; gap:5px !important; padding:9px 8px !important; } body.sb-collapsed #la-userbadge > span{ display:none !important; } body.sb-collapsed .sidebar.sb-collapsed ~ #la-userbadge, body.sb-collapsed .la-ub-btn{ text-align:center !important; padding:5px 6px !important; font-size:10px !important; } .sidebar.sb-collapsed .sidebar-footer{ font-size:0 !important; padding:0 !important; margin:0 !important; border:none !important; } /* ==== bkv2-cal-filter-skin ==== */ /* Booking Calendar · program multi-select filter + per-day total badge */ #view-booking .bkv2-cal-filter{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:11px} #view-booking .bkv2-cal-filter-lab{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;margin-right:3px;font-family:'DM Sans',sans-serif} #view-booking .bkv2-cal-fpill{display:inline-flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--border);border-radius:999px;padding:4px 12px;cursor:pointer;transition:all .12s;line-height:1.2} #view-booking .bkv2-cal-fpill .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;opacity:.4} #view-booking .bkv2-cal-fpill:hover{border-color:var(--bk-navy-mid);color:var(--ink)} #view-booking .bkv2-cal-fpill.on{color:#fff;background:var(--fc,var(--bk-navy));border-color:var(--fc,var(--bk-navy))} #view-booking .bkv2-cal-fpill.on .dot{opacity:1;background:#fff !important} #view-booking .bkv2-cal-daytot{margin-left:auto;font-family:'DM Mono',monospace;font-weight:800;font-size:15px;color:var(--bk-navy-deep,#1F2A44);background:rgba(58,111,247,.14);border-radius:7px;padding:2px 8px;line-height:1.25;letter-spacing:-.03em} #view-booking .bkv2-cal-cell.today .bkv2-cal-daytot,#view-booking .bkv2-cal-cell.sel .bkv2-cal-daytot{background:rgba(58,111,247,.2)} #view-booking .bkv2-cal-foc + .bkv2-cal-daytot{margin-left:6px} /* ==== cost-v2-skin ==== */ /* §costV2 · ลิ้นชักรายละเอียดค่าใช้จ่าย · เปิดจากหน้า Cost Analytics */ #cost-dw-ov{position:fixed;inset:0;background:rgba(20,18,16,.4);opacity:0;pointer-events:none; transition:opacity .2s;z-index:9040} #cost-dw-ov.on{opacity:1;pointer-events:auto} #cost-dw{position:fixed;top:0;right:0;bottom:0;width:min(880px,96vw);background:#fff;z-index:9050; transform:translateX(102%);transition:transform .24s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column;box-shadow:-16px 0 44px rgba(0,0,0,.16); font-family:'Plus Jakarta Sans',system-ui,sans-serif} #cost-dw.on{transform:none} #cost-dw .cdh{padding:18px 22px;border-bottom:1px solid rgba(0,0,0,.06)} #cost-dw .cdh .x{float:right;border:none;background:#f3f3f1;width:30px;height:30px;border-radius:10px; cursor:pointer;font-size:16px;color:#666;font-family:inherit} #cost-dw .cdh h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#1A1A1A} #cost-dw .cdh .s{font-size:12px;color:#666;margin-top:4px} #cost-dw .cdk{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap} #cost-dw .cdk > div{border:1px solid rgba(0,0,0,.06);border-radius:11px;padding:8px 12px;min-width:116px} #cost-dw .cdk .k{font-size:10px;color:#999;font-weight:600} #cost-dw .cdk .v{font-size:16px;font-weight:700;font-family:'DM Mono',monospace;margin-top:2px} #cost-dw .cdt{display:flex;gap:5px;padding:12px 22px 0;flex-wrap:wrap} #cost-dw .cdt button{border:1px solid rgba(0,0,0,.06);background:#fff;border-radius:11px;padding:6px 13px; font:inherit;font-size:11.5px;font-weight:600;color:#666;cursor:pointer;display:inline-flex;gap:6px;align-items:center} #cost-dw .cdt button.on{background:#1A1A1A;color:#fff;border-color:#1A1A1A} #cost-dw .cdt button i{width:8px;height:8px;border-radius:3px;display:inline-block} #cost-dw .cdb{flex:1;overflow:auto;padding:14px 22px 26px} #cost-dw table{width:100%;border-collapse:collapse;font-size:12px} #cost-dw th{text-align:left;padding:0 8px 8px;font-size:9.5px;font-weight:700;color:#999;letter-spacing:.06em; text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;background:#fff} #cost-dw td{padding:9px 8px;border-bottom:.5px solid rgba(0,0,0,.05)} #cost-dw tbody tr{cursor:pointer} #cost-dw tbody tr:hover{background:#FCE5EC} #cost-dw td.n,#cost-dw th.n{text-align:right;font-family:'DM Mono',monospace} #cost-dw tfoot td{padding:11px 8px;border-top:2px solid #1A1A1A;font-weight:700;font-family:'DM Mono',monospace;border-bottom:none} #cost-dw .cpill{font-size:9px;font-weight:700;padding:1px 6px;border-radius:5px;display:inline-block} /* บนมือถือ ตารางแปดคอลัมน์ยัดลงจอ 390px ไม่ได้ · ให้เลื่อนแนวนอนในกล่องตัวเอง (#cost-dw อยู่นอก .main กฎเลื่อนตารางของ la-mobile จึงไม่ครอบมาถึง) */ @media (max-width:820px){ #cost-dw{width:100vw} #cost-dw .cdb{padding:12px 12px 20px;overflow-x:auto;overscroll-behavior-x:contain} #cost-dw table{min-width:660px} #cost-dw .cdk > div{flex:1 1 calc(50% - 5px);min-width:0} } /* ==== bkv2-vc-skin ==== */ /* ═══ §vcSkin · Booking Detail (VC) · ดีไซน์ชุดเดียวกับ Daily Report ═══ โครงเดิมทั้งหมด · เปลี่ยนเฉพาะการมองเห็น · scope ที่ .bkv2-vc เท่านั้น (หน้า New Booking ใช้ .bkv2-nb ร่วมกัน ถ้าไม่ scope จะโดนไปด้วย) ต้องอยู่หลัง #bkv2-nb-glass-skin ในลำดับไฟล์ · หลายบรรทัดต้องมี !important เพราะ glass skin ประกาศ background/border/box-shadow ไว้ด้วย !important */ #view-booking .bkv2-vc{ --dg:#f3f4f6;--di:#111827;--d2:#1f2937;--dm:#6b7280;--df:#9ca3af;--dl:#f3f4f6;--dl2:#e5e7eb; --dind:#4f46e5;--dblu:#2563eb;--dem7:#047857;--dam7:#b45309;--dro7:#be123c; background:var(--dg) !important;padding:22px !important;color:var(--d2);font-size:13px; /* กินขอบของ .main ออก (padding 22/22/22/14) ให้พื้นเทาเต็มความกว้างเหมือน Daily Report ไม่งั้นจะเห็นเป็นแผ่นเทาลอยอยู่บนพื้นครีม ซึ่งอ่านเป็นคนละหน้ากัน */ max-width:none !important;margin:-22px -22px 0 -14px !important} /* ...แต่ความกว้างของ "เนื้อหา" ยังคง 1320px กลางจอเท่าเดิม (ค่าเดิมของ .bkv2-nb) พื้นเทาเต็มขอบ · เนื้อหาไม่ยืดจนบรรทัดยาวเกินอ่าน · ลูกตรงนี้มีแค่ 3 ตัว คือแถบบน · ตั๋ว · กริด 2 คอลัมน์ (การ์ดเตือนอยู่ในคอลัมน์ซ้าย ไม่โดน) */ #view-booking .bkv2-vc > *{max-width:1320px;margin-left:auto !important;margin-right:auto !important} /* แถบบน · เหมือน .dr-bar ของ Daily Report */ #view-booking .bkv2-vc .bkv2-nb-topbar{background:#fff !important;border:none !important; border-radius:24px;padding:12px 14px;margin:0 0 18px;gap:9px;flex-wrap:wrap; box-shadow:0 1px 2px rgba(0,0,0,.04) !important; backdrop-filter:none;-webkit-backdrop-filter:none} #view-booking .bkv2-vc .bkv2-nb-title{font-family:'DM Mono',monospace;font-size:19px;font-weight:500; color:var(--di);letter-spacing:-.02em} /* ปุ่ม · เหมือน .dr-btn */ #view-booking .bkv2-vc .bkv2-nb-btn, #view-booking .bkv2-vc .bkv2-nb-back{background:#fff;border:1px solid #f3f4f6;border-radius:15px; padding:9px 14px;font-size:12px;font-weight:700;color:#374151; box-shadow:0 1px 2px rgba(0,0,0,.04);transition:.15s} #view-booking .bkv2-vc .bkv2-nb-btn:hover, #view-booking .bkv2-vc .bkv2-nb-back:hover{background:#f9fafb;border-color:#e5e7eb;color:var(--di)} /* การ์ด · เหมือน .eg (มุม 24 · ไร้เส้นขอบ · เงาฟุ้งสองชั้น · ยกขึ้นเมื่อชี้) */ #view-booking .bkv2-vc .bkv2-nb-card{border-radius:24px !important;padding:22px; box-shadow:0 10px 25px -5px rgba(0,0,0,.03),0 8px 10px -6px rgba(0,0,0,.02) !important; transition:box-shadow .3s} #view-booking .bkv2-vc .bkv2-nb-card:not([style*="background"]){background:#fff !important;border:none !important} #view-booking .bkv2-vc .bkv2-nb-card:hover{box-shadow:0 20px 30px -10px rgba(0,0,0,.06),0 10px 15px -5px rgba(0,0,0,.03) !important} /* การ์ดแจ้งเตือน 3 ใบ (FOC รออนุมัติ · FOC ตัดสินแล้ว · ยกเลิก) ตั้งสีไว้ใน style ตรง ๆ แต่ glass skin เขียนทับด้วย !important สีเลยหายไปตั้งแต่แรก · คืนสีให้ตรงนี้ */ #view-booking .bkv2-vc .bkv2-nb-card[style*="border-color:#F59E0B"]{background:#fffbeb !important;border:1px solid #fde68a !important} #view-booking .bkv2-vc .bkv2-nb-card[style*="border-color:#10B981"]{background:#ecfdf5 !important;border:1px solid #a7f3d0 !important} #view-booking .bkv2-vc .bkv2-nb-card[style*="border-color:#c43a2e"]{background:#fef2f2 !important;border:1px solid #fecaca !important} #view-booking .bkv2-vc .bkv2-nb-card[style*="border-color:#E89A92"]{background:#fef2f2 !important;border:1px solid #fecaca !important} /* หัวข้อการ์ด · เหมือน .dr-hd h2 · จุดนำหน้าเป็นสีครามพร้อมวงเรือง */ #view-booking .bkv2-vc .bkv2-nb-sec-hd{font-size:16px;font-weight:800;color:var(--di); letter-spacing:-.01em;margin-bottom:18px;gap:9px} #view-booking .bkv2-vc .bkv2-nb-sec-ttl{font-size:16px;font-weight:800;color:var(--di)} #view-booking .bkv2-vc .bkv2-nb-sec-dot{width:8px;height:8px;background:var(--dind); box-shadow:0 0 0 3px rgba(79,70,229,.15)} /* ป้ายช่อง + ค่า · ตัวป้ายเล็กลงและจางลง ให้ค่าที่อ่านจริงเด่นขึ้น */ /* §vcDoc · หัวเอกสาร · กระดาษขาวเต็มความกว้าง อ่านเหมือนใบ voucher จริง */ /* §vcSkin · Sarabun ทั้งใบ · Manrope ไม่มีตัวไทย ตัวไทยจึงตกไปใช้ฟอนต์ของเครื่อง ซึ่งแต่ละเครื่องไม่เหมือนกัน · Sarabun โหลดอยู่ใน อยู่แล้ว (300-800) ตัวเลขยังเป็น DM Mono เพราะเลขราคาหลายบรรทัดต้องเรียงหลักตรงกัน ขอบใบหนา 2px สีกรมท่า · ของเดิมเป็นเส้นจางจนแทบไม่เห็นว่าใบจบตรงไหน */ #view-booking .bkv2-vcdoc{background:#fff;border:2px solid #16265C;border-radius:26px; font-family:Sarabun,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; max-width:760px;padding:16px 18px 18px;margin-bottom:14px;box-shadow:0 8px 26px rgba(20,25,45,.11)} #view-booking .bkv2-vc .bkv2-dt-lab{font-size:9.5px;font-weight:700;color:var(--df); letter-spacing:.07em;margin-bottom:5px} #view-booking .bkv2-vc .bkv2-dt-val{font-size:13.5px;font-weight:700;color:var(--di);line-height:1.4} #view-booking .bkv2-vc .bkv2-dt-sub{font-size:11.5px;color:var(--dm);margin-top:4px} /* แถวตัวเลข (Payment / Total) · เส้นคั่นบาง ๆ แทนการอัดชิดกัน */ #view-booking .bkv2-vc .bkv2-dt-row{padding:7px 0;border-bottom:1px solid var(--dl); font-size:12px;color:var(--d2)} #view-booking .bkv2-vc .bkv2-dt-row:last-child{border-bottom:none} #view-booking .bkv2-vc .bkv2-dt-row > span:last-child{color:var(--di)} /* ป้ายสถานะ · ทรงเม็ดยาวเหมือน .dr-chip */ #view-booking .bkv2-vc .bkv2-chip{border-radius:999px;font-weight:700;padding:5px 12px} #view-booking .bkv2-vc .bkv2-foc-flag{border-radius:999px;padding:3px 10px;background:#fef3c7;color:var(--dam7)} /* ตั๋วด้านบน · มุมโค้งและเงาให้เข้าชุดกับการ์ด (โครงข้างในไม่แตะ) */ #view-booking .bkv2-vc > div[style*="border-radius:14px"][style*="display:flex"]{ border:none !important;border-radius:24px !important; box-shadow:0 10px 25px -5px rgba(0,0,0,.03),0 8px 10px -6px rgba(0,0,0,.02) !important; margin-bottom:18px !important} /* ระยะห่างกริด 2 คอลัมน์ · ให้หายใจเท่ากับ .dr-main */ #view-booking .bkv2-vc > div[style*="grid-template-columns:1fr 320px"]{gap:18px !important} #view-booking .bkv2-vc > div[style*="grid-template-columns:1fr 320px"] > div{gap:18px !important} /* บนมือถือ .main เหลือ padding แค่ 8-10px · margin ติดลบ -22/-14 จะเกินจอทันที */ @media (max-width:820px){ #view-booking .bkv2-vc{margin:0 !important;padding:10px !important} #view-booking .bkv2-vc .bkv2-nb-card{padding:16px;border-radius:20px !important} #view-booking .bkv2-vc .bkv2-nb-topbar{border-radius:18px;margin:0 0 12px} /* ตั๋วด้านบนวางรูปไว้ซ้ายกว้างตายตัว 200px · บนจอ 390px กินไปครึ่งใบ ข้อความฝั่งขวาเหลือ ~170px แล้วหักบรรทัดจนอ่านไม่ออก → วางบนล่างแทน */ #view-booking .bkv2-vc > div[style*="border-radius:14px"][style*="display:flex"]{flex-direction:column} #view-booking .bkv2-vc > div[style*="border-radius:14px"][style*="display:flex"] > div:first-child{ width:auto !important;min-height:112px !important} #view-booking .bkv2-vc > div[style*="border-radius:14px"][style*="display:flex"] > div:last-child{ border-left:none !important;border-top:2px dashed rgba(26,35,50,.18) !important;padding:14px !important} } /* ==== la-mobile ==== */ /* ═══ §mobile · ชั้นมือถือ · ไม่แตะเลย์เอาต์เดสก์ท็อป ═══ */ /* iOS ขยายฟอนต์เองตอนหมุนจอ · ปิดทิ้งทุกขนาดจอ ไม่งั้นตารางเพี้ยน */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* ปุ่มแฮมเบอร์เกอร์ · เดสก์ท็อปไม่ต้องมี */ .la-burger{display:none;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:12px; background:#E8EBF1;color:#39414E;cursor:pointer;flex:none;pointer-events:auto;-webkit-tap-highlight-color:transparent; box-shadow:3px 3px 7px #c5cad6,-3px -3px 7px #ffffff} .la-burger:active{transform:scale(.95)} body.la-nav-open .la-burger{background:#1683C7;color:#fff;box-shadow:inset 2px 2px 5px rgba(0,0,0,.18)} .la-navdim{display:none;position:fixed;inset:0;background:rgba(9,20,30,.5);z-index:150;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} @media (max-width:820px){ /* ── โครงหน้า ── สกิน topbar-float-skin เอาแถบบนออกไปแล้ว (--topbar:0px · ปุ่มลอยมุมขวาบน · .topbar ตั้ง pointer-events:none) → ปุ่มเมนูไปอยู่ในกลุ่มปุ่มลอยชุดเดียวกัน */ .la-burger{display:inline-flex} .topbar{padding:calc(9px + env(safe-area-inset-top)) 12px 9px !important;gap:8px} /* §mobBrand · topbar-float-skin ซ่อน .topbar-brand ทิ้งไปทั้งก้อน (ชื่อแบรนด์เดิมยาว ไม่พอที่ข้างปุ่มลอย) → เอากลับมาเป็นแถบบางลอยกลางบนจอ ไม่ชนปุ่มลอยมุมขวา (z-index ต่ำกว่า .topbar) revert = ลบบล็อกนี้ทิ้ง แล้วลด padding-top ของ .main/.sidebar กลับ */ body::before{content:'LOVE ANDAMAN';position:fixed;top:0;left:0;right:0; padding:calc(7px + env(safe-area-inset-top)) 90px 6px 14px; font:800 11px 'DM Sans',sans-serif;letter-spacing:.22em;text-align:center; color:#0f1f2e;background:rgba(250,249,245,.92); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-bottom:1px solid rgba(0,0,0,.06); z-index:120;pointer-events:none} /* §mobHead · ปุ่มลอยมุมขวาบน (เมนู + เครื่องมือ) กว้างราว 98px สูง 54px หัวหน้าที่ขึ้นไปชิดขอบบนจะถูกมันทับ · เว้นที่ให้เท่าที่วัดมาจริง ทำเฉพาะหัวที่วัดแล้วโดนทับ · ไม่ไปดันหน้าที่ปกติดีอยู่แล้ว */ .main .view .bkv2-utabs{padding-right:96px} .po-host .po-h .po-hl{padding-right:92px} .topbar-date{display:none} /* เครื่องมือชุดใหญ่กางเป็นแผงลอยใต้ปุ่ม ⋯ · ของเดิมเรียงแถวเดียวจนล้นจอ */ .topbar.tools-open .topbar-right{display:flex !important;position:absolute;top:100%;right:12px;left:auto; width:min(92vw,290px);background:#0f1f2e;border-radius:14px;padding:8px;gap:6px;flex-wrap:wrap; box-shadow:0 14px 30px rgba(0,0,0,.35)} .topbar.tools-open .topbar-right .topbar-btn{flex:1 1 44%;min-height:40px;text-align:center;justify-content:center} .app{margin-top:0 !important;min-height:0 !important} /* ── sidebar → ลิ้นชัก ── สกินกระจก (.sidebar ที่ลอยเป็นการ์ดมุมโค้ง) ใช้ !important ทุกบรรทัด ต้องเขียนทับด้วย !important เหมือนกัน ไม่งั้นบนมือถือจะเหลือการ์ดลอยบังจอ */ .sidebar{top:0 !important;left:0 !important;bottom:0 !important; height:auto !important;width:min(86vw,300px) !important;max-width:300px !important;z-index:200 !important; border-radius:0 20px 20px 0 !important;margin:0 !important; transform:translateX(-102%);transition:transform .22s ease !important;will-change:transform; padding:calc(30px + env(safe-area-inset-top)) 10px calc(66px + env(safe-area-inset-bottom)) !important; box-shadow:8px 0 30px rgba(20,30,50,.32) !important} .sidebar.sb-collapsed{width:min(86vw,300px) !important} /* โหมดรางแคบไม่ใช้บนมือถือ */ .sidebar.sb-collapsed .nav-item{font-size:13.5px !important;justify-content:flex-start !important;padding:11px 12px !important;gap:9px !important} .sidebar.sb-collapsed .nav-item svg{width:17px !important;height:17px !important} .sidebar.sb-collapsed .nav-section{font-size:10px !important;height:auto;background:none;margin:0;padding:12px 10px 4px !important} .sidebar.sb-collapsed .nav-item.po-sub:not(.po-hide){display:flex !important} /* §poNavMob · ลิ้นชักมือถือต้องเห็นรายการย่อยของท่า (กลุ่มที่พับไว้ยังซ่อนตาม .po-hide) */ .sidebar .nav-item.po-sub{padding-left:34px !important} body.la-nav-open .sidebar{transform:translateX(0)} body.la-nav-open .la-navdim{display:block} body.la-nav-open{overflow:hidden} .sidebar .nav-item{padding:11px 12px !important;font-size:13.5px !important} /* นิ้วแตะได้จริง */ .sidebar .nav-item svg{width:17px !important;height:17px !important} /* §mobile · .main เป็นตัวเลื่อนของแอป (app-shell) หน้านี้มีตารางที่ตั้ง min-width ไว้เป็นพัน px (เช็คอินรถ min-width:1420px) ถ้าปล่อยให้ body เลื่อน ทั้งหน้าจะกว้างตามตาราง แถบบน/ลิ้นชักหลุดจอไปด้วย → ขังการเลื่อนไว้ใน .main แทน แถบบนกับลิ้นชักอยู่กับที่เสมอ ตารางกว้างก็ปัดซ้าย-ขวาดูได้ตามที่ตกลงไว้ */ /* §pinchZoom · -webkit-overflow-scrolling:touch เคยสร้าง UIScrollView แยกให้ iOS Safari ก่อน iOS13 ตัวมันเองกินท่าทีสองนิ้ว (pinch) ไปเป็นการเลื่อนภายในกล่องแทนที่จะส่งให้เบราว์เซอร์ซูมทั้งจอ .main กินพื้นที่เต็มจอมือถือ ผลคือซูมด้วยสองนิ้วไม่ได้เลยทั้งแอป · iOS13+ มี momentum scroll ในตัว overflow:auto อยู่แล้วโดยไม่ต้องพึ่ง property นี้ · ตัดทิ้งได้ ไม่เสียความลื่นของการเลื่อน */ .main,body.sb-collapsed .main{margin-left:0 !important;padding:12px 10px !important;width:100% !important;max-width:100% !important; height:100vh;overflow:auto;overscroll-behavior:contain; padding-top:calc(30px + env(safe-area-inset-top)) !important} .app{min-height:0 !important} .view{padding-bottom:calc(72px + env(safe-area-inset-bottom))} /* ── ช่องกรอก · 16px กัน Safari ซูมเข้าแล้วไม่ซูมกลับ ── */ input,select,textarea{font-size:16px !important} input[type=checkbox],input[type=radio]{font-size:inherit !important;min-width:20px;min-height:20px} button,.btn,.nav-item,[onclick]{-webkit-tap-highlight-color:rgba(15,110,86,.12)} /* ── ตารางกว้าง · เลื่อนแนวนอนในกล่องตัวเอง ไม่ดันทั้งหน้า ── */ .la-xscroll{overflow-x:auto;max-width:100%} /* ── กริดหลายคอลัมน์ที่เขียนไว้ใน style ตรง ๆ · บีบเหลือคอลัมน์เดียว ── §oneCol · เดิมเหลือ 2 คอลัมน์ในช่วง 521–820px · บนมือถือ 2 คอลัมน์แปลว่า ช่องละ ~190px ซึ่งไม่พอกับตัวเลข+ป้ายของหน้านี้ · เรียงลงมาคอลัมน์เดียวทั้งแถบ ต้องใช้ !important เพราะเป็น inline style · ปฏิทิน 7 ช่องไม่โดน (ไล่ทีละแบบ) */ .main [style*="grid-template-columns:repeat(2"], .main [style*="grid-template-columns:repeat(3"], .main [style*="grid-template-columns:repeat(4"], .main [style*="grid-template-columns:repeat(5"], .main [style*="grid-template-columns:repeat(6"], .main [style*="grid-template-columns:1fr 1fr"], .main [style*="grid-template-columns:repeat(auto-fit"]{grid-template-columns:minmax(0,1fr) !important} .main [style*="grid-template-columns:1fr 310px"], .main [style*="grid-template-columns:2fr 1fr"], .main [style*="grid-template-columns:1fr 1fr 1fr 1.4fr"]{grid-template-columns:minmax(0,1fr) !important} /* ปฏิทินจริง ๆ ต้องคง 7 ช่อง · เลื่อนแนวนอนแทน */ .main .fc-grid,.main .mg,.main .cal2-grid,.main .bkv2-cal-grid{min-width:640px} .main .fc-grid,.main .bop2-grid{font-size:inherit} /* หน้าที่วางเป็น 2 คอลัมน์ด้วย flex · เรียงลงมาแทน */ #view-agents .sb-wrap,#view-rate-types .sb-wrap,#view-costing .ct-wrap{flex-direction:column} #view-agents .sb-side,#view-rate-types .sb-side,#view-costing .ct-side{width:100% !important;max-width:100%} /* โมดัล · เต็มจอ อ่านง่ายกว่ากล่องลอย */ .modal-box,.tm-modal,.aos-modal{max-width:100% !important;width:100% !important;max-height:88dvh} /* ป้ายมุมจอ · ยกให้พ้น home indicator */ #la-viewonly{bottom:calc(8px + env(safe-area-inset-bottom)) !important;font-size:10px !important} /* §laRefresh · บนจอเล็กเอาไว้ก้นจอเหมือนเดิม (นิ้วถึง) แต่เต็มความกว้าง ไม่ลอยทับมุมใดมุมหนึ่ง */ #la-refresh{top:auto !important;left:12px !important;right:12px !important;max-width:none !important; bottom:calc(8px + env(safe-area-inset-bottom)) !important} /* §mobUser · ป้ายผู้ใช้ย้ายเข้าไปอยู่ท้ายลิ้นชักแล้ว · เลิกลอย เลิกทับเนื้อหา และพ้นแถบเครื่องมือของเบราว์เซอร์ที่คาอยู่ก้นจอ ซึ่งเป็นเหตุที่กดปุ่มออกไม่โดน */ #la-userbadge.la-ub-inside{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; max-width:none !important; margin:14px 2px calc(6px + env(safe-area-inset-bottom)) !important; border-radius:14px !important; font-size:12px !important; padding:11px 12px !important; gap:9px !important; box-shadow:none !important; border:1px solid rgba(26,35,50,.09) !important; background:rgba(255,255,255,.82) !important; } #la-userbadge.la-ub-inside > span{ flex:1 1 100% !important; line-height:1.5 } /* ที่ว่างก้นลิ้นชัก 66px เดิมเผื่อไว้ให้กล่องลอยมาทับ · ตอนนี้ป้ายอยู่ในนี้แล้ว ไม่ต้องเผื่อ */ .sidebar{ padding-bottom:10px !important } /* นิ้วกดได้จริง · ของเดิมสูง 26px */ #la-userbadge.la-ub-inside .la-ub-btn{ flex:1 1 0; min-height:42px !important; font-size:12.5px !important; border-radius:11px !important; font-weight:600 } /* ปฏิทินเดือน · เลื่อนในการ์ดของตัวเอง ไม่ดันทั้งหน้าไปทางขวา หัววันต้องกว้างเท่าตัวตาราง ไม่งั้นเลื่อนแล้วหัวไม่ตรงช่อง */ .main .cal2-box{ overflow-x:auto !important; overscroll-behavior-x:contain; max-width:100% !important } .main .cal2-box .cal2-wd,.main .cal2-box .cal2-grid,.main .cal2-box .cal2-mb{ min-width:600px } .main .cal2-box .cal2-grid{ overflow:visible !important } /* แถบปุ่มสลับแท็บที่ยาวกว่าจอ · เลื่อนในแถบตัวเอง */ .main .dr-pills,.main .bkv2-utabs,.main .fl-tabs{ overflow-x:auto; max-width:100% } /* §tapSize · พื้นขั้นต่ำของทุกอย่างที่กดได้ · 40px คือขนาดที่กดโดนโดยไม่ต้องเล็ง ตั้งรวมทีเดียวแทนการไล่ทีละคลาส · ปุ่มที่เพิ่มมาทีหลังจะได้ตามไปเอง */ .main .view button, .main .view .btn, .main .view select, .main .view input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]){ min-height:40px } /* ปุ่มดินสอบนแถบโปรแกรม · วางแบบ absolute จึงต้องกำหนดทั้งกว้างและสูง */ .main .pj-pen{ width:36px !important; height:36px !important } /* ปฏิทินใน Booking · 7 ช่องกว้าง 600px ในกล่อง 372px ที่ overflow:hidden สามวันขวาสุดถูกตัดหายไปเลย · ให้กล่องเลื่อนได้เหมือนปฏิทินหน้าอื่น */ .main .bkv2-cal{ overflow-x:auto !important; overscroll-behavior-x:contain; max-width:100% } .main .bkv2-bodycard{ overflow-x:visible !important } /* การ์ดที่ถูกวางไว้คอลัมน์ที่ 5 ของกริด · พอกริดเหลือ 1–2 คอลัมน์ มันจะยื่นออกนอกจอ §spanRow · ยกเว้น 1/-1 · มันแปลว่า "เต็มแถวเท่าที่กริดมี" ซึ่งถูกเสมอไม่ว่ากี่คอลัมน์ รีเซ็ตทิ้งแล้วแถบหัวข้อจะหดเหลือช่องเดียว ดันช่องที่เหลือเลื่อนไปทั้งตาราง (heatmap เรือเป็นแบบนั้นมา) */ .main [style*="grid-column:"]:not([style*="grid-column:1/-1"]){grid-column:auto !important} /* แถบเต็มความกว้างที่ใช้ margin ติดลบเท่ากับ padding เดิม (22px / 16px) padding ของ .main เหลือ 10px แล้ว ถ้าไม่แก้จะล้นออกไปข้างละ ~12px */ .main [style*="margin:-22px"]{margin:-12px -10px 0 -10px !important} .main [style*="margin:14px -16px -16px"]{margin:14px -10px -12px !important} .main [style*="margin:0 -22px"]{margin:0 -10px !important} /* แถบแท็บ/ปุ่มยาว ๆ · ตัดขึ้นบรรทัดใหม่แทนที่จะดันจอ */ .main .bkv2-utabs,.main .page-hd,.main .bo-legend{flex-wrap:wrap} img,svg,video,canvas{max-width:100%} } /* §oneCol · ทุกอย่างเรียงลงมาคอลัมน์เดียว · ทั้งแถบมือถือ ไม่ใช่แค่จอจิ๋ว บล็อกนี้เคยเป็น max-width:520px · ผลคือช่วง 521–820px (มือถือแนวนอน · แท็บเล็ตเล็ก) กริดที่ประกาศเป็นคลาส 48 ตัว (.g2/.g3/.g4 · bkv2-stats · ct-trio · ts-kpis ...) ไม่ยุบเลยสักตัว และตารางกว้างก็ยังดันหน้าแทนที่จะเลื่อนในกล่องตัวเอง → ยกทั้งชั้นขึ้นมาที่ 820px ให้ตรงกับเส้นเดียวกับลิ้นชักเมนู (รายการกริดแบบ inline style ย้ายไปรวมกับบล็อก 820px ข้างบนแล้ว ไม่ต้องเขียนซ้ำ) */ @media (max-width:820px){ .page-hd{flex-direction:column;align-items:stretch;gap:8px} /* §mobile · แถวแนวนอนที่เขียน display:flex ไว้ใน style ตรง ๆ ให้ตัดขึ้นบรรทัดใหม่ (หัวหน้า · แถบปุ่ม · การ์ดคู่) ของเดิมเป็น nowrap หมด พอจอแคบเลยบีบกันจนอ่านไม่ออก กฎนี้ทำงานเฉพาะตอนของไม่พอวางในบรรทัดเดียว · บรรทัดที่พอดีอยู่แล้วไม่เปลี่ยน */ .main .view [style*="display:flex"]:not([style*="flex-direction:column"]):not(.la-nowrap){flex-wrap:wrap} .main .view > [style*="display:flex"] > *{min-width:0} /* §mobile · กริดหลายคอลัมน์ที่ประกาศไว้เป็น class (ไม่ใช่ inline style) ไล่ยุบเหลือคอลัมน์เดียว · ที่ยังคงไว้ 2 คอลัมน์คือช่องกรอกคู่ที่สั้นพอ */ .g2,.g3,.g4,.form-2,.form-3,.st-picker,.loc-grid,.cal-detail-body, .da-layout,.boats-layout,.settings-layout,.fl-split,.sb-wrap,.sb-kpi-row,.sb-meta-grid, #view-agents .sb-wrap,#view-rate-types .sb-wrap,#view-rate-types .sb-wrap.three-col, #view-agents .sb-kpi-row,#view-agents .sb-meta-grid,#view-agents .agi-grid-3,#view-agents .agi-grid-4, #view-agents .ct-period-row,#view-agents .ct-versions,#view-agents .ag-fld-row,#view-agents .ag-fld-row-3, #view-agents .ag-pp-dates,#view-agents .ag-pp-period-inputs,#view-agents .agp-var-row, #view-rate-types .rt-agg-grid,#view-addonsvc .aos-fld-row, #view-booking .bkv2-stats,#view-booking .bkv2-split,#view-booking .bkv2-kpis,#view-booking .bkv2-nb-row, #view-costing .ct-trio,#view-costing .ct-pair,#view-costing .ct-duo, .bk-form-grid{grid-template-columns:minmax(0,1fr) !important} /* ช่องนับ pax 4 ช่อง · เหลือ 2 แถวยังกรอกง่ายกว่ายืดเป็นแถวเดียว */ #view-booking .bkv2-nb-pax-row,.bk-pax-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important} /* §mobile2 · ตารางกว้างเลื่อนในกล่องของตัวเอง ไม่ดันหน้าหลัก ทำที่ "กล่องที่ห่อตาราง" ไม่ใช่ตัวตาราง — ตารางหลายตัวตั้ง min-width ไว้เป็นพัน px (ck-tbl 1420px) ซึ่ง min-width ชนะ max-width เสมอ ตัวตารางเลยกว้างเท่าเดิมอยู่ดี :has(> table) ให้กล่องแม่เป็นตัวเลื่อนแทน · ตารางข้างในคงความกว้างไว้ครบ */ /* !important จำเป็น · การ์ดพวกนี้ถูกตั้ง overflow ไว้ด้วย selector ที่มี id (#vancheckin-host .ck-card) ซึ่งชนะ selector ที่มีแต่ class เสมอ */ /* §pinchZoom · -webkit-overflow-scrolling:touch ตัดทิ้ง · นี่คือกล่องที่ห่อ "ทุกตารางกว้าง" ในแอป รวม .t2-tblscroll ที่ห่อ table.t2-mtbl · property นี้เคยกินท่าทีสองนิ้ว (pinch) ไปเป็นการ เลื่อนในกล่องแทนที่จะส่งให้เบราว์เซอร์ซูมทั้งจอ → ตารางซูมด้วยสองนิ้วไม่ได้เลย */ .main .view *:has(> table){max-width:100% !important;overflow-x:auto !important;overscroll-behavior-x:contain} /* เบราว์เซอร์เก่าที่ยังไม่รองรับ :has() · อย่างน้อยอย่าให้ตารางที่ไม่ได้ตั้ง min-width ดันจอ */ .main .view table:not([style*="min-width"]){max-width:100%} /* การ์ดที่ห่อปฏิทิน/heatmap/ตาราง · ให้เลื่อนในการ์ด ไม่ลากทั้งหน้า */ .main .bo-card,.main .cal2-card,.main .ts-card,.main .ck-card, .main .fl-card,.main .bkv2-card,.main .card{overflow-x:auto !important;max-width:100% !important} /* ปฏิทิน 7 ช่องบนจอแคบ · 600px คือเส้นต่ำสุดที่ยังอ่านชื่อเรือออก */ .main .fc-grid,.main .cal2-grid,.main .bkv2-cal-grid{min-width:600px} /* §mobile2 · กริดที่เขียน grid-template-columns ไว้ใน style ตรง ๆ ยุบเหลือคอลัมน์เดียวทั้งหมด รอบก่อนไล่ทีละแพตเทิร์นแล้วหลุด (เช่น "1fr 1.7fr 1fr" ของ Dashboard) ยกเว้นปฏิทิน/heatmap ที่ต้องคงจำนวนช่องไว้แล้วเลื่อนแนวนอนแทน */ .main .view [style*="grid-template-columns"]:not([style*="repeat(7"]):not(.bop2-grid):not(.fc-grid):not(.cal2-grid):not(.bkv2-cal-grid){grid-template-columns:minmax(0,1fr) !important} /* ลูกของ grid/flex มี min-width:auto ตามค่าเริ่มต้น · ของยาวข้างในเลยดันกล่องแม่จนล้น */ .main .view [style*="display:grid"] > *,.main .view [style*="display:flex"] > *, .main .view [class*="grid"] > *{min-width:0} /* ของที่ตั้งความกว้างตายตัวไว้ในสไตล์ · อย่าให้เกินจอ */ .main .view [style*="width:"]:not([style*="min-width"]):not(table):not(svg){max-width:100%} .main .view [style*="flex-shrink:0"]{flex-shrink:1} /* กล่อง host ของหน้าที่ render ด้วย JS ตั้ง margin ติดลบ 22px ไว้เพื่อกินขอบให้เต็มความกว้าง (ล้อกับ padding 22px ของ .main บนเดสก์ท็อป) · บนมือถือ padding เหลือ 8–10px margin ติดลบเลยเกินไปข้างละ ~12px แล้วดันทั้งหน้า → คืนเป็น 0 บนจอเล็ก */ .main .view > [id$="-host"]{margin-left:0 !important;margin-right:0 !important;max-width:100%} /* §mobile3 · กริดหลายคอลัมน์ที่ประกาศเป็น class (รวมที่ JS ฉีดเข้ามาตอน render) */ #acct-modal .go-2,#acct-modal .go-gs,#acct-modal .pckp-g2,#dr-mail-host .dr-mb,#view-addonsvc .aos-fld-row, #view-addonsvc .aos-variant-row,#view-agents .ag-fld-row,#view-agents .ag-fld-row-3, #view-agents .ag-pp-dates,#view-agents .ag-pp-period-inputs,#view-agents .agi-grid-3, #view-agents .agi-grid-4,#view-agents .agi-prog-header,#view-agents .agi-prog-row, #view-agents .agp-addon-variant,#view-agents .agp-var-row,#view-agents .ct-arch-addon-row, #view-agents .ct-arch-prog-row,#view-agents .ct-period-row,#view-agents .ct-versions, #view-agents .sb-kpi-row,#view-agents .sb-meta-grid,#view-agents .sb-wrap,#view-booking .bkv2-detail-row, #view-booking .bkv2-kpis,#view-booking .bkv2-nb-pax-row,#view-booking .bkv2-nb-row, #view-booking .bkv2-routes-grid,#view-booking .bkv2-split,#view-booking .bkv2-stats,#view-costing .ct-duo, #view-costing .ct-grid8,#view-costing .ct-kpis,#view-costing .ct-pair,#view-costing .ct-trio, #view-pickup-setup .psu-kpi,#view-rate-types .rt-agg-grid,#view-rate-types .sb-wrap, #view-rate-types .sb-wrap.three-col,.bk-form-grid,.bk-pax-grid,.boats-layout,.cal-detail-body,.cards, .da-layout,.dr-duo,.dr-kpis,.dr-main,.dr-rts,.fl-bc-body,.fl-split,.form-2,.form-3,.g2,.g3,.g4,.grid.four, .grid.many,.head-fields,.header,.loc-grid,.sb-kpi-row,.sb-meta-grid,.sb-wrap,.sc,.settings-layout,.sgrid, .sig-grid,.st-picker,.t2-bgrid,.t2-famvgrid,.ts-kpis,.ts-mbar,.ts-pay,.ts-pay5,.ts-sign, .dv-grid{grid-template-columns:minmax(0,1fr) !important} /* §oneCol · Dashboard · .dv-grid ไล่ 3 → 2 คอลัมน์ที่ 1500px แล้วหยุด · ไม่เคยเหลือ 1 เลย คอลัมน์ที่ 3 ยังถูกสั่งเป็น flex แถวนอนจากกฎ 1500px ด้วย · ต้องคลายทั้งคู่ และปลดความสูงตายตัว (100vh − 118px) ที่ทำให้ทุกการ์ดโดนบีบอยู่ในจอเดียว */ .dv-grid{height:auto !important} .dv-col:nth-child(3){flex-direction:column !important} .dv-col:nth-child(3)>*{flex:0 0 auto !important} .dv-lvlist{max-height:70vh} } /* จอจิ๋ว · บีบขอบเข้ามาอีกนิด · เขียนเฉพาะซ้าย-ขวา (ถ้าใช้ padding ย่อจะทับ padding-top ของบล็อก 820px ที่เผื่อ safe-area บนไว้) */ @media (max-width:520px){ .main{padding-left:8px !important;padding-right:8px !important} } /* iOS · 100vh นับรวมแถบ URL ทำให้ท้ายจอโดนบัง · ใช้ dvh ถ้ารองรับ */ @supports (height:100dvh){ @media (max-width:820px){ /* iOS · 100vh นับรวมแถบ URL ทำให้ท้ายจอโดนบัง · dvh วัดจากที่เห็นจริง */ .main,body.sb-collapsed .main{height:100dvh} .la-navdim{height:100dvh} } } /* ==== mob-unstick ==== */ /* §mobUnstick · บนมือถือ ของที่ "ตรึงไว้" กินจอจนไม่เหลือที่ให้อ่านข้อมูล วัดจริงที่ 375x812 ไล่ครบ 67 หน้า · พัง 7 หน้า อาการเดียวกันหมด: piercheckin .pkh 745px -> เหลือพื้นที่ว่าง -32% (ตรึงเกินความสูงจอ) vancheckin .ck-hd+.ck-unitbar 488px -> 4% agents .sb-side 752px -> 7% rate-types .sb-side 728px -> 10% contract-tmpl คอลัมน์ขวา 754px -> 10% reconfirm .rc-chrome+.rc-agh 367px -> 37% settings #prog-detail-mount 402px -> 50% ต้นเหตุเดียวกัน: ของพวกนี้ออกแบบเป็น "คอลัมน์ข้าง/แถบหัว" ของจอกว้าง พอจอแคบ layout ยุบเป็นคอลัมน์เดียว มันไปกองอยู่บนสุดแล้วยัง sticky อยู่ เลยตรึงเต็มจอ ส่วนรายการข้างล่างเลื่อนลอดอยู่ข้างหลัง = เลื่อนเท่าไหร่ก็ไม่เห็น แก้ที่จอแคบอย่างเดียว จอกว้างไม่แตะ (ที่นั่นมันเป็นคอลัมน์ข้างจริง ๆ และทำงานถูก) ⚠ หัวตาราง th / แถวกลุ่ม tr.ck-ghd (32-43px) ยัง sticky เหมือนเดิม อันนั้นมีประโยชน์จริง ⚠ td.pcs-nm / td.pcs-vch เป็น sticky แนวนอน (ตรึงคอลัมน์ซ้าย) ห้ามแตะ */ @media (max-width:820px){ /* คอลัมน์ข้างที่กลายเป็นบล็อกบนสุด */ .sb-side, #view-agents .sb-side, #view-rate-types .sb-side, #view-settings #prog-detail-mount, #cttv-wrap > div > div{ position:static !important; max-height:none !important; } /* แถบหัวเรื่องสูง ๆ ที่ตรึงไว้ */ #piercheckin-host .pkh, #vancheckin-host .ck-hd, #vancheckin-host .ck-unitbar, #reconfirm-host .rc-chrome, #reconfirm-host .rc-agh, #fl-inv-pink-wrap > div{ position:static !important; } } /* ==== ios-dvh-modal ==== */ /* §iosDvhModal · ต่อจากเลเยอร์ iOS ด้านบนที่ยิงผิดตัว ของเดิมสั่ง max-height:88dvh ให้ .modal-box (ค้นทั้งหน้าไม่มีอยู่จริงสักตัว · selector ตาย) กับ .tm-modal / .aos-modal ซึ่งเป็น "ฉากหลัง" ไม่ใช่ตัวที่ถูกจำกัดความสูง ตัวที่คุมความสูงจริงคือการ์ดข้างใน (.tm-modal-card / .aos-modal-card) ซึ่งยังเป็น vh อยู่ บน iOS Safari 100vh = ความสูงตอนแถบ URL ยุบ ซึ่งสูงกว่าที่ตาเห็นจริงราว 60-90px โมดัลจึงสูงเกินจอ และสิ่งที่ตกอยู่ใต้ขอบล่างคือ "แถวปุ่ม" = กดบันทึก/ยืนยันไม่ได้ dvh วัดจากพื้นที่ที่เห็นจริง · บนเดสก์ท็อป dvh เท่ากับ vh เป๊ะ จอใหญ่จึงไม่ขยับสักพิกเซล ⚠ ตั้งใจไม่แตะ body{min-height:100vh} กับ .app{min-height:calc(100vh - var(--topbar))} min-height ที่เป็น dvh จะคำนวณใหม่ตลอดตอนแถบ URL ยุบ-ขยาย ทำให้หน้ากระตุกระหว่างเลื่อน สองตัวนั้นสูงเกินไปเฉย ๆ (เลื่อนเกินนิดหน่อย) ไม่ได้บังอะไร จึงไม่คุ้มแลกกับอาการกระตุก */ @supports (height:100dvh){ .modal{max-height:88dvh} .tm-modal-card, #view-addonsvc .aos-modal-card, #view-agents .ag-edit-card{max-height:90dvh} #view-agents .ct-wiz-card{max-height:92dvh} .ct-doc-card{height:92dvh} } /* ==== sb-theme-skin ==== */ /* §sbTheme · โหมดมืดของ sidebar · ใช้ภาษาดีไซน์เดียวกับ Dashboard/Calendar ⚠ ชั้นนี้เป็น "ชั้นทับ" ล้วน · ลบทั้งบล็อกนี้ = เหลือแต่โหมดสว่างเดิม (sidebar-glass-skin) ไม่ได้แก้กฎของ sidebar-glass-skin สักบรรทัด ⚠ ทุกกฎกำกับด้วย html[data-sb-theme="dark"] · ไม่มี attribute = สว่าง = ของเดิมเป๊ะ js/02-sidebar.js เป็นคนติด attribute ให้ตั้งแต่สคริปต์เริ่มรัน ⚠ sidebar-glass-skin เขียน !important ไว้แทบทุกบรรทัด · ชั้นนี้จึงต้อง !important ตามไปด้วย ถึงจะทับได้ (น้ำหนักเท่ากัน อยู่ทีหลัง = ชนะ) สีเน้นยังเป็น Ocean #1683C7 ทั้งสองโหมด · สลับธีมแล้วสีแบรนด์ไม่ขยับ */ /* §sbCi · พื้นและสีเน้นของ sidebar อิง --ci-navy/--ci-cyan ที่ประกาศไว้ใน :root วัดด้วย ΔE2000 · navy ที่ใช้อยู่เดิม (#16265C) ห่าง ci-navy 7.0 = คนละเฉด ฮิวตรงกันแทบเป๊ะ (226° vs 228°) ต่างที่ความอิ่ม/ความสว่าง · จึงเลื่อนมาใช้ตัวจริงได้เลย ไล่สีสร้างจากฮิว 228° S100 ตัวเดียวกัน เปลี่ยนแค่ L ทุกขั้นจึงอยู่ในตระกูล ci-navy L22 #001670 · L15 #000F4C = ci-navy · L11 #000B38 · L8 #000829 ⚠ แตะเฉพาะ sidebar · Dashboard/Calendar ยังเป็น #16265C เหมือนเดิม */ html[data-sb-theme="dark"] .sidebar{ background: radial-gradient(120% 26% at 50% 0%, rgba(0,188,223,.20), transparent 62%), linear-gradient(180deg, rgba(0,22,112,.94), rgba(0,15,76,.93)) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 22px 52px -18px rgba(0,4,24,.66), inset 0 1.5px 0 rgba(255,255,255,.16) !important; } html[data-sb-theme="dark"] .sidebar .nav-section{ color:rgba(214,226,245,.66) !important; } html[data-sb-theme="dark"] .sidebar .nav-item{ color:#C3D2EC !important; } html[data-sb-theme="dark"] .sidebar .nav-item svg{ color:#8FA6CC !important; } html[data-sb-theme="dark"] .sidebar .nav-item:hover{ background:rgba(255,255,255,.10) !important; color:#fff !important; } html[data-sb-theme="dark"] .sidebar .nav-item:hover svg{ color:#fff !important; } /* ตัวที่เปิดอยู่ · ใช้ ci-cyan ⚠ ตัวหนังสือบน ci-cyan ต้องเป็น ci-navy ห้ามเป็นขาว · ขาวได้แค่ 2.27:1 (:root §ciColour เขียนเตือนข้อนี้ไว้แล้ว) · navy บนฟ้าได้ 7.90:1 ของเดิม Ocean #1683C7 + ตัวหนังสือขาว วัดได้ 4.11:1 ไม่ผ่านเกณฑ์อยู่แล้ว และตัวพิลกับพื้นแถบห่างกันแค่ 3.83:1 · เปลี่ยนแล้วขึ้นเป็น 6.95:1 */ html[data-sb-theme="dark"] .sb-avatar{ background:var(--ci-cyan) !important; color:var(--ci-navy) !important; } /* หัวโปรไฟล์ · ค่าเดิมเป็นหมึกเข้ม (#1e2633/#5a6472) ซึ่งบนพื้น navy คืออ่านไม่ออก */ html[data-sb-theme="dark"] .sb-greet{ color:rgba(214,226,245,.62) !important; } html[data-sb-theme="dark"] .sb-name{ color:#fff !important; } html[data-sb-theme="dark"] .sb-avatar{ border-color:rgba(255,255,255,.30) !important; } html[data-sb-theme="dark"] .sb-divider{ background:rgba(255,255,255,.14) !important; } html[data-sb-theme="dark"] .sidebar-footer{ color:rgba(214,226,245,.66) !important; border-top:1px solid rgba(255,255,255,.10) !important; } /* กล่องผู้ใช้/ออกจากระบบ · ปักอยู่ก้น sidebar จึงต้องเปลี่ยนตามกัน */ html[data-sb-theme="dark"] #la-userbadge{ background:rgba(12,24,62,.72) !important; color:#C3D2EC !important; border-top:1px solid rgba(255,255,255,.10) !important; } html[data-sb-theme="dark"] #la-userbadge b{ color:#fff !important; } html[data-sb-theme="dark"] .la-ub-btn{ background:rgba(255,255,255,.12) !important; color:#E2EAF7 !important; } html[data-sb-theme="dark"] .la-ub-btn:hover{ background:rgba(255,255,255,.22) !important; } /* รางแบบย่อ · เส้นคั่นที่แทนหัวข้อกลุ่มเป็นสีดำจาง มองไม่เห็นบนพื้นเข้ม */ html[data-sb-theme="dark"] .sidebar.sb-collapsed .nav-section{ background:rgba(255,255,255,.13) !important; } /* ── ปุ่มสลับธีม · มีทั้งสองโหมด จึงอยู่นอกวงเล็บ dark ── */ .sb-theme{ width:26px; height:26px; flex:none; border:none; border-radius:8px; background:rgba(255,255,255,.72); color:#5a6472; cursor:pointer; display:flex; align-items:center; justify-content:center; } .sb-theme:hover{ background:rgba(255,255,255,.95); } html[data-sb-theme="dark"] .sb-theme{ background:rgba(255,255,255,.12); color:#D6E2F5; } html[data-sb-theme="dark"] .sb-theme:hover{ background:rgba(255,255,255,.24); } html[data-sb-theme="dark"] .sb-toggle{ background:rgba(255,255,255,.12) !important; color:#D6E2F5 !important; } html[data-sb-theme="dark"] .sb-toggle:hover{ background:rgba(255,255,255,.24) !important; } /* ย่อแล้วเหลือที่แนวนอนไม่พอทั้งสองปุ่ม · ปุ่มธีมซ่อน กดกางก่อนค่อยสลับ */ .sidebar.sb-collapsed .sb-theme{ display:none; } /* ── §i18n · ปุ่มสลับภาษา · ทรงเดียวกับปุ่มธีมแต่เป็นตัวหนังสือ TH/EN ── */ /* §i18n · หัวแถบมีปุ่มเพิ่มมาอีกตัว · พื้นที่ฝั่งชื่อแคบลง บังคับบรรทัดทักทายไม่ให้ตกบรรทัด แล้วปล่อยให้ชื่อยาวตัดท้ายด้วยจุดสามจุดแทน */ .sb-greet{ white-space:nowrap; } /* กว้างเท่าปุ่มอื่น 26px พอดี · กว้างกว่านั้นชื่อผู้ใช้บนหัวแถบถูกบีบจนตกบรรทัด */ .sb-lang{ height:26px; width:26px; flex:none; border:none; border-radius:8px; background:rgba(255,255,255,.72); color:#5a6472; cursor:pointer; font-family:'DM Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700; letter-spacing:0; display:flex; align-items:center; justify-content:center; padding:0; } .sb-lang:hover{ background:rgba(255,255,255,.95); } html[data-sb-theme="dark"] .sb-lang{ background:rgba(255,255,255,.12); color:#D6E2F5; } html[data-sb-theme="dark"] .sb-lang:hover{ background:rgba(255,255,255,.24); } .sidebar.sb-collapsed .sb-lang{ display:none; } /* พื้นหลังรอบ sidebar · ช่องซ้าย 14px บน 6px ล่าง 10px และร่อง 10px ก่อนถึงเนื้อหา เป็นพื้นของ body (ครีม #f5f2ed) · โหมดมืดจึงเห็นแผงกรมท่าลอยอยู่บนกรอบครีม ⚠ ไม่แตะ body{background} · นั่นคือพื้นของทั้งแอปทุกหน้า จะกลายเป็นดาร์กโหมดทั้งระบบ ทาเฉพาะแถบกว้างเท่าคอลัมน์ sidebar (274px = 14 + 250 + 10) ด้วย body::after แทน ⚠ z-index ต้องเป็น -1 · ::after เป็นลูกตัวท้ายของ body ถ้าเป็น 0 จะทับ .sidebar (ลำดับใน DOM ตัดสินเมื่อ z-index เท่ากัน) · -1 ลงไปอยู่หลังเนื้อหาแต่ยังอยู่หน้าพื้น body ⚠ body::before ถูก la-mobile skin ใช้ไปแล้ว (แถบ LOVE ANDAMAN บนจอแคบ) · ตัวนี้จึงใช้ ::after */ html[data-sb-theme="dark"] body::after{ content:'';position:fixed;left:0;top:0;bottom:0;width:274px;z-index:-1;pointer-events:none; background:linear-gradient(180deg, #000B38 0%, #000829 100%); /* ci-navy L11 → L8 */ } /* ย่อรางแล้วคอลัมน์แคบลง · 14 + 84 + 10 */ html[data-sb-theme="dark"] body.sb-collapsed::after{ width:108px; } /* ⚠ บนจอแคบ sidebar กลายเป็นลิ้นชักที่เลื่อนออกไปนอกจอ (la-mobile skin) แถบนี้เป็น fixed จะค้างอยู่กับที่ = แถบมืดกว้าง 274px คาหน้าจอ 390px ตลอดเวลา ทั้งที่ยังไม่ได้เปิดลิ้นชักด้วยซ้ำ · ปิดทิ้งใต้ 820px ให้ตรงกับจุดที่ la-mobile เริ่มทำงาน */ @media (max-width:820px){ html[data-sb-theme="dark"] body::after, html[data-sb-theme="dark"] body.sb-collapsed::after{ display:none } } /* ══════════ §sbCiLight · โหมดสว่างใช้สี CI เหมือนกัน ══════════════════════════ ⚠ ก้อนนี้เปลี่ยนหน้าตาโหมดสว่างจากของเดิมจริง ๆ (ไม่ใช่แค่เพิ่มโหมดมืดแล้ว) ของเดิมเป็นกระจกขาวล้วน หมึกเทา (#3a4453/#7a8493) สีเน้น Ocean #1683C7 วัดแล้วมีสามจุดไม่ผ่านเกณฑ์ 4.5 อยู่ก่อนหน้านี้แล้ว nav-section 3.60 · sidebar-footer 2.43 · ตัวหนังสือในพิล 4.11 ชั้นนี้ย้ายหมึกมาเป็นตระกูล ci-navy ซึ่งแก้ทั้งสามจุดไปในตัว ⚠ กำกับด้วย [data-sb-theme="light"] ไม่ใช่ :not([dark]) · ถ้า js ไม่ทำงาน จะไม่มี attribute เลย แล้วหน้าตาย้อนกลับไปเป็น sidebar-glass-skin เดิมทั้งดุ้น ⚠ ลบตั้งแต่ §sbCiLight ถึงท้ายไฟล์ = โหมดสว่างกลับไปเป็นของเดิม */ html[data-sb-theme="light"] body::after{ content:'';position:fixed;left:0;top:0;bottom:0;width:274px;z-index:-1;pointer-events:none; background:linear-gradient(180deg, var(--ci-navy-soft) 0%, var(--ci-cyan-soft) 100%); } html[data-sb-theme="light"] body.sb-collapsed::after{ width:108px; } @media (max-width:820px){ html[data-sb-theme="light"] body::after{ display:none } } html[data-sb-theme="light"] .sidebar{ background: radial-gradient(120% 40% at 50% -4%, rgba(0,188,223,.16), transparent 62%), rgba(255,255,255,.80) !important; border:1px solid rgba(0,15,76,.10) !important; box-shadow:0 22px 52px -18px rgba(0,15,76,.26), inset 0 1.5px 0 rgba(255,255,255,.9) !important; } html[data-sb-theme="light"] .sidebar .nav-section{ color:#5A6685 !important; } html[data-sb-theme="light"] .sidebar .nav-item{ color:#233055 !important; } html[data-sb-theme="light"] .sidebar .nav-item svg{ color:var(--ci-cyan-ink) !important; } html[data-sb-theme="light"] .sidebar .nav-item:hover{ background:rgba(0,188,223,.13) !important; color:var(--ci-navy) !important; } html[data-sb-theme="light"] .sidebar .nav-item:hover svg{ color:var(--ci-navy) !important; } html[data-sb-theme="light"] .sb-avatar{ background:var(--ci-cyan) !important; color:var(--ci-navy) !important; border-color:rgba(255,255,255,.9) !important; } html[data-sb-theme="light"] .sb-greet{ color:#5A6685 !important; } html[data-sb-theme="light"] .sb-name{ color:var(--ci-navy) !important; } html[data-sb-theme="light"] .sb-divider{ background:rgba(0,15,76,.12) !important; } html[data-sb-theme="light"] .sidebar-footer{ color:#5A6685 !important; border-top:1px solid rgba(0,15,76,.10) !important; } html[data-sb-theme="light"] .sb-theme, html[data-sb-theme="light"] .sb-lang, html[data-sb-theme="light"] .sb-pill, html[data-sb-theme="light"] .sb-toggle{ background:rgba(0,15,76,.07) !important; color:var(--ci-cyan-ink) !important; } html[data-sb-theme="light"] .sidebar.sb-collapsed .nav-section{ background:rgba(0,15,76,.09) !important; } /* ══ §sbPill · ทรงพิลเมนูที่เปิดอยู่ · เลือกแยกจากธีม เก็บใน localStorage ══ cyan (ตั้งต้น) · เด่นเรื่องสีแบรนด์ · ตัวหนังสือต้องเป็น ci-navy ห้ามขาว (ขาว 2.27) โหมดสว่าง ตัวพิลกับพื้นห่างแค่ 2.17 — ขอบไม่ค่อยขาด แต่เลือกไว้เป็นหลักตามที่สั่ง โหมดมืด พื้นเข้ม จึงได้ 7.00 ไม่มีปัญหา navy · ขอบอ่านขาดกว่ามาก (สว่าง 17.3) แลกกับสีฟ้าหายไปจากจุดที่เด่นที่สุด โหมดมืดพื้นเป็น ci-navy อยู่แล้ว พิล navy ล้วนจะจมหาย จึงต้องมีขอบ ci-cyan คั่น */ html[data-sb-pill="cyan"] .sidebar .nav-item.active, html:not([data-sb-pill]) .sidebar .nav-item.active{ background:var(--ci-cyan) !important; color:var(--ci-navy) !important; font-weight:600 !important; border:1px solid transparent !important; box-shadow:0 8px 20px -4px rgba(0,188,223,.50) !important; } html[data-sb-pill="cyan"] .sidebar .nav-item.active svg, html:not([data-sb-pill]) .sidebar .nav-item.active svg{ color:var(--ci-navy) !important; } html[data-sb-pill="navy"] .sidebar .nav-item.active{ background:var(--ci-navy) !important; color:#fff !important; font-weight:600 !important; border:1px solid transparent !important; box-shadow:0 8px 20px -4px rgba(0,15,76,.45) !important; } html[data-sb-pill="navy"] .sidebar .nav-item.active svg{ color:var(--ci-cyan) !important; } /* โหมดมืด · พื้นก็เป็น ci-navy พิล navy ล้วนจะจมหายไปกับพื้น ต้องมีขอบคั่น */ html[data-sb-pill="navy"][data-sb-theme="dark"] .sidebar .nav-item.active{ border:1px solid rgba(0,188,223,.70) !important; box-shadow:0 8px 20px -4px rgba(0,0,0,.5) !important; } /* ปุ่มเลือกทรงพิล · วงกลมทึบบอกสีที่จะได้ถ้ากด · อยู่ข้างปุ่มธีมในหัวแถบ ทั้งคู่เป็นเรื่อง "หน้าตา" เหมือนกัน อยู่ด้วยกันแล้วหาเจอพร้อมกัน ⚠ เคยลองย้ายไปท้ายแถบเพื่อไม่ให้หัวแถบแน่น · วัดแล้วท้ายแถบอยู่ที่ y=3321 ในขณะที่จอสูง 980 = ต้องเลื่อนเมนูลงไปสุดก่อนถึงจะเห็น · หาไม่เจอ ⚠ หัวแถบกว้าง 226px ใส่ปุ่มที่สามแล้วชื่อผู้ใช้เหลือ 56px = "LOVE An..." จึงย่ออวตาร 44→36 ปุ่ม 26→24 gap 10→7 · วัดแล้วชื่อได้ 80px กลับมาอ่านออก */ .sb-profile{ gap:7px !important; } .sb-avatar{ width:36px !important; height:36px !important; font-size:12px !important; border-width:2px !important; } .sb-theme,.sb-toggle,.sb-pill{ width:24px !important; height:24px !important; } .sb-pill{ flex:none; border:none; border-radius:7px; background:rgba(255,255,255,.72); cursor:pointer; display:flex; align-items:center; justify-content:center; } .sb-pill:hover{ background:rgba(255,255,255,.95); } .sb-pill-dot{ width:13px; height:13px; border-radius:50%; display:block; box-shadow:0 0 0 1.5px rgba(255,255,255,.55); } html[data-sb-theme="dark"] .sb-pill{ background:rgba(255,255,255,.12); } html[data-sb-theme="dark"] .sb-pill:hover{ background:rgba(255,255,255,.24); } /* ย่อรางแล้วซ่อนเหมือนปุ่มธีม · ที่แนวนอนไม่พอทั้งสามปุ่ม */ .sidebar.sb-collapsed .sb-pill{ display:none; } /* §sbSearch · ค้นหาเมนู · ซ่อนเฉพาะรายการที่ไม่ตรงคำค้น ไม่แตะสิทธิ์หรือการนำทาง */ .sb-menu-search{ position:relative; display:flex; align-items:center; gap:6px; margin:8px 5px 6px; padding:0 8px; height:42px; min-height:42px; flex:none; border-radius:11px; background:rgba(255,255,255,.64); border:1px solid rgba(0,15,76,.12); } .sb-menu-search svg{ width:15px; height:15px; flex:none; fill:none; stroke:#5A6685; stroke-width:2; } .sb-menu-search input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:#233055; font:13px/1 DM Sans,Arial,sans-serif; } .sb-menu-search input::placeholder{ color:#71809c; } .sb-menu-search button{ display:none; flex:none; width:18px; height:18px; padding:0; border:0; border-radius:50%; background:rgba(0,15,76,.11); color:#233055; font-size:16px; line-height:16px; cursor:pointer; } .sb-menu-search button.show{ display:block; } .sb-menu-no-result{ display:none; position:absolute; top:48px; left:0; right:0; z-index:2; padding:8px; border-radius:8px; background:var(--ci-navy,#000F4C); color:#fff; font-size:11px; text-align:center; box-shadow:0 5px 14px rgba(0,15,76,.22); } .sb-menu-no-result.show{ display:block; } .sidebar .sb-search-hidden{ display:none !important; } .sidebar.sb-search-filtering > div[style*="height:1px"]{ display:none !important; } .sidebar.sb-collapsed .sb-menu-search{ display:none; } html[data-sb-theme="dark"] .sb-menu-search{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); } html[data-sb-theme="dark"] .sb-menu-search input{ color:#E5EEFF; } html[data-sb-theme="dark"] .sb-menu-search input::placeholder{ color:#9CB0D1; } html[data-sb-theme="dark"] .sb-menu-search svg{ stroke:#AFC2E2; } html[data-sb-theme="dark"] .sb-menu-search button{ background:rgba(255,255,255,.16); color:#fff; } /* ══ §sbScroll · ซ่อนแถบเลื่อนของ sidebar ทิ้งไปเลย แต่ยังเลื่อนได้ ══════════ ราก · 01-base.css:1384 ตั้งกฎรวมทั้งแอปไว้ · thumb เป็น var(--sand-dark) #E8E4DC ซึ่งเป็นสีครีม · ตอน sidebar ยังเป็นกระจกขาวก็กลมกลืน พอพื้นเป็น ci-navy กลายเป็นแท่งสว่างพาดข้างเมนู · วัดได้ 12.44:1 เทียบพื้น ขณะที่ตัวหนังสือเมนูเอง ได้ 10.39:1 = แถบเลื่อนดังกว่าสิ่งที่คนมาอ่านจริง ๆ เคยลองหรี่สีและลดความกว้างแล้ว ยังเห็นอยู่ดี · เมนูยาว 71 แถว ต้องเลื่อน 4.6 จอ แถบจึงอยู่ในสายตาตลอดเวลา · ตัดทิ้งไปเลยจบกว่า ⚠ ซ่อนแค่ "ตัวแถบ" ไม่ได้ปิดการเลื่อน · overflow-y:auto ยังอยู่เหมือนเดิม ล้อเมาส์ / เทรกแพด / ปุ่มลูกศร / Page Up-Down / ลากด้วยนิ้ว ยังใช้ได้ครบ ⚠ ต้องเขียนสามบรรทัด · scrollbar-width (Firefox + Chrome ใหม่) -ms-overflow-style (Edge เก่า) และ ::-webkit-scrollbar (Chrome/Safari) ขาดตัวใดตัวหนึ่ง = เบราว์เซอร์นั้นยังเห็นแถบครีมเหมือนเดิม ⚠ ตั้งเฉพาะ .sidebar · กฎรวมของทั้งแอปไม่แตะ หน้าอื่นยังมีแถบเลื่อนปกติ ⚠ แลกกับการไม่มีอะไรบอกว่า "ยังมีเมนูอยู่ข้างล่างอีก" · เมนูยาว 4.6 จอ คนที่เพิ่งใช้ครั้งแรกอาจไม่รู้ว่าเลื่อนได้ · ถ้าเจอปัญหานี้จริงค่อยเติมเงาจาง ที่ขอบล่างทีหลัง (ไม่ใช่เอาแถบกลับมา) */ .sidebar{ scrollbar-width:none; -ms-overflow-style:none; } .sidebar::-webkit-scrollbar{ width:0; height:0; display:none; } /* ==== mob-sales ==== */ /* §mobSales (2026-10-25) · owner "ปรับหน้า UI สำหรับมือถือของ Sales board · Agent list · Rate type · ตรวจทุกหน้า เพราะแต่ละ sidebar มีแถบแยกอีก" วัดที่ 390px ทุกแท็บย่อย: Sales board (board list/kanban · person) · Agents (card · table · detail: Information / Pricing Matrix / Recent Bookings / Contracts / Activity) · Rate Types (detail · agents) อาการที่พบ: ตาราง Leaderboard แตกเป็นก้อนตัวเลขไม่มีป้าย · โพเดียมเรียง 2-1-3 · Rate Types ลิสต์ 57 รายการยาวก่อนถึงรายละเอียด (8,000px) · ตารางราคาถูกบีบจนตัวเลขชนกัน · แถวสัญญาใน Pricing Matrix ตัวหนังสือเหลือ 35px · แถบปุ่มหัวหน้าไม่ห่อ · หน้า Agent card ไม่มีอะไรให้กดตอนยังไม่เลือก */ @media (max-width:900px){ /* ── Sales board ── */ #view-sales-board .sb-podium{grid-template-columns:minmax(0,1fr) !important;align-items:stretch !important} #view-sales-board .sb-podium > *:nth-child(2){order:-1} /* อันดับ 1 ขึ้นก่อน */ #view-sales-board [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important} /* การ์ดสถิติ 4 ใบ → 2 คอลัมน์ ไม่ใช่ยาวลงมาทีละใบ */ #view-sales-board [style*="flex:0 0 204px"]{flex:0 0 78vw !important;min-width:78vw !important;scroll-snap-align:start} /* คอลัมน์ Board ปัดทีละคอลัมน์ */ #view-sales-board [style*="overflow-x:auto;padding-bottom:6px"]{scroll-snap-type:x proximity} #view-sales-board .sb-lbh{display:none !important} /* หัวคอลัมน์ไม่มีความหมายเมื่อแถวกลายเป็นการ์ด */ #view-sales-board .sb-lbr{grid-template-columns:26px minmax(0,1fr) auto !important;row-gap:8px !important} #view-sales-board .sb-lbr > .sb-lbs{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;padding-top:2px;border-top:1px dashed #ECEBE6} #view-sales-board .sb-lbr > .sb-lbs > span{display:inline-flex;align-items:center;gap:5px;text-align:left !important;font-size:12.5px !important;background:#FAFAF7;border:1px solid #ECEBE6;border-radius:8px;padding:3px 8px} #view-sales-board .sb-lbr > .sb-lbs > span::before{content:attr(data-l);font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#a8a69e;text-transform:uppercase} #view-sales-board .sb-lbr > .sb-lbs > span[data-l="Market"] > span{padding:1px 6px} #view-sales-board .sb-lbr > span:nth-child(1){grid-row:1;grid-column:1} #view-sales-board .sb-lbr > span:nth-child(2){grid-row:1;grid-column:2} #view-sales-board .sb-lbr > .sb-lbc{grid-row:1;grid-column:3;justify-self:end;white-space:nowrap} #view-sales-board .sb-lbr > .sb-lbs{grid-row:2} /* ── Agents · ตารางเลื่อนแนวนอน ตรึงช่องติ๊ก + ชื่อ ── */ #view-agents #ag-tbl-scroll th:nth-child(1),#view-agents #ag-tbl-scroll td:nth-child(1){position:sticky;left:0;background:#fff;z-index:2} #view-agents #ag-tbl-scroll th:nth-child(2),#view-agents #ag-tbl-scroll td:nth-child(2){position:sticky;left:40px;background:#fff;z-index:2;box-shadow:4px 0 8px -4px rgba(0,0,0,.12);max-width:160px;overflow:hidden;text-overflow:ellipsis} #view-agents #ag-tbl-scroll th:nth-child(1),#view-agents #ag-tbl-scroll th:nth-child(2){z-index:3} /* ── Agents · รายละเอียด · แถวที่เรียงด้วย flex แบบ inline style ห่อได้ ข้อความไม่โดนบีบเหลือ 35px ── */ #view-agents #ag-tabbody div[style*="display:flex"][style*="gap:10px"][style*="padding:9px 12px"]{flex-wrap:wrap} #view-agents #ag-tabbody div[style*="flex:1;min-width:0"]{flex:1 1 160px !important;min-width:140px !important} /* ── ตารางราคาทุกแท็บ (Agents · Rate Types) · ไม่บีบ · เลื่อนแนวนอนในตัวเอง ── */ #view-agents .sb-main table,#view-rate-types .sb-main table{display:block;overflow-x:auto;max-width:100%;width:max-content !important;min-width:100%;table-layout:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} #view-agents .sb-main table colgroup,#view-rate-types .sb-main table colgroup{display:none} /* ความกว้างคอลัมน์แบบ % ของจอใหญ่ ไม่ใช้บนมือถือ */ /* คอลัมน์แรก (ชื่อ route) ห่อได้และตรึงซ้ายไว้ · เลื่อนดูราคาทางขวาแล้วยังรู้ว่าแถวไหน */ #view-agents .sb-main table th:first-child,#view-agents .sb-main table td:first-child,#view-rate-types .sb-main table th:first-child,#view-rate-types .sb-main table td:first-child{white-space:normal;min-width:110px;max-width:150px;position:sticky;left:0;background:#fff;z-index:1;box-shadow:4px 0 8px -4px rgba(0,0,0,.10)} #view-agents .sb-main table th,#view-agents .sb-main table td,#view-rate-types .sb-main table th,#view-rate-types .sb-main table td{white-space:nowrap} /* ── Rate Types ── */ #view-rate-types .page-hd{flex-wrap:wrap;gap:10px} #view-rate-types .page-actions{flex-wrap:wrap !important;gap:8px !important} #view-rate-types .rt-side-tgl{display:inline-flex !important;align-items:center;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;margin-left:6px} #view-rate-types .sb-side-hd{flex-wrap:wrap;gap:6px} #view-rate-types #rt-search{flex:1 1 120px;min-width:0} #view-rate-types .sb-side .sb-side-body{display:none;max-height:56vh;overflow:auto} #view-rate-types .sb-side.open .sb-side-body{display:block} #view-rate-types .sb-wrap.three-col > *{width:100% !important;max-width:100% !important} #view-rate-types .sb-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} #view-rate-types .sb-tabs::-webkit-scrollbar{display:none} #view-rate-types .sb-tab{flex:none} #view-rate-types #rt-detail div[style*="display:flex"]:not([style*="nowrap"]):not([style*="overflow"]){flex-wrap:wrap} #view-rate-types #rt-detail div[style*="flex-shrink:0"]{flex-shrink:1 !important;min-width:0} #view-rate-types #rt-detail div[style*="justify-content:space-between"]{flex-wrap:wrap;row-gap:8px} #view-rate-types #rt-detail [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important} } @media (min-width:901px){ #view-sales-board .sb-lbs{display:contents} /* จอใหญ่: กริดคอลัมน์เท่าเดิมเป๊ะ */ #view-rate-types .rt-side-tgl{display:none !important} }