/* CAMERA B Web OS — ธีมตาม mockup (ไม่มี CDN ใช้งานออฟไลน์ได้) */ :root { /* โทนสีตามโลโก้ — ครีมอุ่น + น้ำตาลเข้ม + ส้ม ส้มสองระดับโดยตั้งใจ: --brand ใช้กับ "ตัวอักษร" (เข้มพอให้อ่านออกบนพื้นสว่าง) ส่วน --brand-2 ใช้กับ "พื้น/เส้น" เท่านั้น ถ้าเอา --brand-2 ไปทำตัวหนังสือจะอ่านไม่ออก ⚠️ ห้ามใส่สีตรงๆ ในคลาสข้างล่าง ให้เพิ่มตัวแปรตรงนี้แทน ไม่งั้นโหมดมืดจะพังเป็นจุดๆ โดยไม่มีใครเห็นจนกว่าจะสลับโหมด */ --bg: #f4ece3; --card: #fffdfa; --surface: #f3e9de; /* แถวสลับสี · hover · ป้ายเทา */ --surface-soft: #fdf8f3; /* กรอบคำอธิบาย · พื้นอ่อนสุด */ --surface2: #ece0d4; /* พื้นคอลัมน์บอร์ด */ --ink: #26180f; --muted: #7c6858; --faint: #a89383; --line: #e8dbcd; --line-strong: #d9c8b7; --brand: #a05412; --brand-2: #f0a05a; --brand-soft: #fdefdf; --on-brand: #26180f; /* ตัวหนังสือบนพื้นส้มสด */ --side: #26180f; --side-2: #33231a; --side-ink: #b6a292; --ok: #2f7a4d; --ok-soft: #e8f3ea; /* ⚠️ warn เป็นเหลืองอำพัน ไม่ใช่ส้ม — ส้มถูกจองไว้ให้แบรนด์แล้ว ถ้าทำ warn เป็นส้มด้วย ป้ายเตือนกับป้ายเอกสารจะกลืนกันจนแยกไม่ออก */ --warn: #8a6206; --warn-soft: #fbf0d5; --warn-line: #e9d09a; --bad: #b1382c; --bad-soft: #fbe9e5; --info: #2b6b8c; --info-soft: #e7f0f5; --busy: #f8d3a8; /* ช่องถูกจองในปฏิทิน */ --clash: #f6c8bf; /* คิวชน */ --drop: #fbe3c8; /* ปลายทางตอนลากการ์ด */ --toast: #26180f; --pink: #a83a63; --pink-soft: #fbe7ee; --overlay: #26180f66; --radius: 14px; --shadow: 0 1px 2px #2a180e0f, 0 8px 24px #2a180e0a; color-scheme: light; } /** * โหมดมืด — สลับด้วย data-theme บน (เก็บไว้ใน localStorage) * ไม่มี data-theme = ตามระบบเครื่อง * * พื้นเป็นน้ำตาลเข้มโทนเดียวกับแถบเมนู ไม่ใช่ดำสนิท — จอในสโตร์อยู่ใต้ไฟนีออน * ดำสนิทกับข้อความขาวจะแสบตากว่า */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1f1e1d; --card: #262624; --surface: #30302e; --surface-soft: #222221; --surface2: #2b2b29; --ink: #f5f4ef; --muted: #b0aea6; --faint: #85837c; --line: #3a3936; --line-strong: #4d4b46; --brand: #f0a05a; --brand-2: #f0a05a; --brand-soft: #35322c; --on-brand: #241f18; --side: #1a1918; --side-2: #262624; --side-ink: #b0aea6; --ok: #7fd1a0; --ok-soft: #23302a; --warn: #e0c07f; --warn-soft: #32301f; --warn-line: #4f4a33; --bad: #ea9c92; --bad-soft: #362724; --info: #98c6de; --info-soft: #22303a; --busy: #4a4640; --clash: #5c3b35; --drop: #3f3d36; --toast: #35342f; --overlay: #0b0a0a99; --pink: #e79ab4; --pink-soft: #3a2029; --shadow: 0 1px 2px #0008, 0 8px 24px #0006; } } :root[data-theme="dark"] { --bg: #1f1e1d; --card: #262624; --surface: #30302e; --surface-soft: #222221; --surface2: #2b2b29; --ink: #f5f4ef; --muted: #b0aea6; --faint: #85837c; --line: #3a3936; --line-strong: #4d4b46; --brand: #f0a05a; --brand-2: #f0a05a; --brand-soft: #35322c; --on-brand: #241f18; --side: #1a1918; --side-2: #262624; --side-ink: #b0aea6; --ok: #7fd1a0; --ok-soft: #23302a; --warn: #e0c07f; --warn-soft: #32301f; --warn-line: #4f4a33; --bad: #ea9c92; --bad-soft: #362724; --info: #98c6de; --info-soft: #22303a; --busy: #4a4640; --clash: #5c3b35; --drop: #3f3d36; --toast: #35342f; --overlay: #0b0a0a99; --pink: #e79ab4; --pink-soft: #3a2029; --shadow: 0 1px 2px #0008, 0 8px 24px #0006; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.55 -apple-system, "SF Pro Text", "Noto Sans Thai", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--brand); text-decoration: none; } /* ── Login ─────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--side); padding: 20px; } .login { width: 100%; max-width: 380px; background: var(--card); border-radius: 20px; padding: 34px 30px; box-shadow: 0 24px 60px #0006; } .login .logo { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, #f0a05a, #f8c893); color: #fff; margin-bottom: 16px; } .login h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.02em; } .login p { margin: 0 0 22px; color: var(--muted); font-size: 13px; } .login label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 5px; } .login input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); } .login input:focus { outline: 2px solid #f0a05a66; border-color: var(--brand-2); } .login button { width: 100%; height: 44px; margin-top: 20px; border: 0; border-radius: 12px; background: var(--brand-2); color: var(--ink); font-weight: 700; cursor: pointer; } .login .err { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-size: 13px; } /* ── Layout ────────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .side { background: var(--side); color: var(--side-ink); padding: 22px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; } .brand .logo { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, #f0a05a, #f8c893); color: #fff; box-shadow: 0 10px 25px #a0541240; } .brand b { display: block; color: #fff; font-size: 14px; letter-spacing: .01em; } .brand small { font-size: 10px; color: var(--side-ink); } .navgroup { font-size: 9px; letter-spacing: .16em; color: var(--side-ink); margin: 14px 10px 7px; font-weight: 700; } .nav { display: grid; gap: 2px; } .nav button { border: 0; background: transparent; color: var(--side-ink); padding: 9px 11px; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; width: 100%; } .nav button:hover { background: #ffffff0d; color: #fff; } .nav button.active { background: #ffffff14; color: #fff; box-shadow: inset 3px 0 var(--brand-2); } .nav .ico { width: 16px; text-align: center; font-size: 14px; opacity: .9; } .nav .bubble { margin-left: auto; background: var(--brand-2); color: var(--side); border-radius: 99px; padding: 1px 7px; font-size: 10px; font-weight: 700; } .nav .bubble.red { background: #b1382c; } .account { margin-top: auto; background: var(--side-2); border: 1px solid #ffffff0f; padding: 10px; border-radius: 13px; display: flex; gap: 9px; align-items: center; } .avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, #f0a05a, #a05412); color: #fff; font-weight: 800; font-size: 13px; } .account b { display: block; color: #fff; font-size: 12px; } .account small { font-size: 10px; } .account .out { background: none; border: 0; color: var(--side-ink); cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 8px; line-height: 1; } .account .out:first-of-type { margin-left: auto; } .account .out:hover { background: #ffffff14; color: #fff; } .main { padding: 0 26px 40px; min-width: 0; } .top { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; } .crumb { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .top h1 { margin: 2px 0 0; font-size: 23px; letter-spacing: -.03em; } .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── Controls ──────────────────────────────────────────────────────── */ .btn { height: 38px; padding: 0 15px; border: 0; border-radius: 11px; background: var(--brand-2); color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 8px 20px #a0541226; } .btn:hover { background: #e8913f; } .btn:disabled { opacity: .5; cursor: not-allowed; } .ghost { height: 36px; padding: 0 13px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; } .ghost:hover { border-color: var(--line-strong); } .ghost.on { background: var(--brand-soft); border-color: var(--brand-2); color: var(--brand); } input[type=text], input[type=date], input[type=number], input[type=password], select, textarea { height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } textarea { height: auto; padding: 9px 11px; } input:focus, select:focus, textarea:focus { outline: 2px solid #f0a05a55; border-color: var(--brand-2); } .search { min-width: 260px; } /* ── Cards & grid ──────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; } .card h3 { margin: 0 0 2px; font-size: 15px; letter-spacing: -.01em; } .card .sub { color: var(--faint); font-size: 12px; margin-bottom: 12px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .kpi .label { color: var(--muted); font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .kpi .value { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; } .kpi .foot { font-size: 11.5px; color: var(--faint); } .kpi .chip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; } .grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; } .grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .grid2, .grid-1-1 { grid-template-columns: 1fr; } } .stack { display: grid; gap: 14px; } /* ── Tables ────────────────────────────────────────────────────────── */ .tablewrap { overflow-x: auto; border-radius: 12px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--card); z-index: 1; } td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr:hover { background: var(--surface-soft); } tbody tr.clickable { cursor: pointer; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; } /* หัวคอลัมน์ที่กดเรียงได้ — ลูกศรจางไว้ก่อน ชัดขึ้นตอนชี้เมาส์ เข้มเมื่อกำลังเรียงตามคอลัมน์นั้น */ th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--ink); background: var(--surface); } th.sortable i { font-style: normal; margin-left: 4px; font-size: 9px; opacity: .3; } th.sortable:hover i { opacity: .7; } th.sortable.on { color: var(--brand); } th.sortable.on i { opacity: 1; } /* ── Badges ────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; } .b-ok { background: var(--ok-soft); color: var(--ok); } .b-warn { background: var(--warn-soft); color: var(--warn); } .b-bad { background: var(--bad-soft); color: var(--bad); } .b-info { background: var(--info-soft); color: var(--info); } .b-muted { background: var(--surface); color: var(--muted); } .b-brand { background: var(--brand-soft); color: var(--brand); } /* ── Pipeline เอกสาร ───────────────────────────────────────────────── */ .pipe { display: inline-flex; gap: 3px; } /* กล่อง CB / CIV / INV — สีสถานะอยู่ที่ **กรอบ** ไม่ใช่พื้นหลัง กรอบสีอ่านง่ายกว่าตอนไล่สายตาลงมาทั้งคอลัมน์ (พื้นอ่อนๆ กลืนกับพื้นแถว) */ .pipe i { width: 26px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 9px; font-style: normal; font-weight: 800; background: transparent; color: var(--faint); border: 1.5px solid var(--line); } .pipe i.on { color: var(--ok); border-color: var(--ok); } .pipe i.wait { color: var(--warn); border-color: var(--warn); } .pipe i.late { color: var(--bad); border-color: var(--bad); } /* สีตามสถานะจริงใน FlowAccount */ .pipe i.st-awaiting { color: var(--warn); border-color: var(--warn); } .pipe i.st-approved { color: var(--info); border-color: var(--info); } .pipe i.st-processed, .pipe i.st-paid { color: var(--ok); border-color: var(--ok); } .pipe i.st-rejected { color: var(--bad); border-color: var(--bad); } .pipe i.st-cancelled { color: var(--faint); border-color: var(--line); text-decoration: line-through; } .pipe i.st-draft { color: var(--muted); border-color: var(--line-strong); } /* คั่นระหว่างสายหลัก (CB→CIV→INV) กับเอกสารนอกสาย (BN/RCP) */ .pipe-sep { width: 1px; background: var(--line); margin: 1px 4px; display: inline-block; } .stagebar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .stagebar button { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); } .stagebar button.on { background: var(--brand-2); border-color: var(--brand-2); color: var(--on-brand); } .stagebar button .n { opacity: .7; margin-left: 5px; font-variant-numeric: tabular-nums; } /* ── Calendar ──────────────────────────────────────────────────────── */ .calwrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 12px; background: var(--card); } table.cal { border-collapse: separate; border-spacing: 0; font-size: 11px; } table.cal th, table.cal td { padding: 0; border-bottom: 1px solid var(--line); } table.cal th.day { width: 26px; min-width: 26px; text-align: center; font-size: 10px; padding: 6px 0; } table.cal th.day.today { background: var(--brand-soft); color: var(--brand); } table.cal th.name, table.cal td.name { position: sticky; left: 0; background: var(--card); z-index: 2; min-width: 240px; max-width: 240px; padding: 5px 10px; text-align: left; font-size: 12px; border-right: 1px solid var(--line); } table.cal td.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.cal tr.head td.name, table.cal tr.head th.name { background: var(--surface); font-weight: 800; color: var(--ink); font-size: 11.5px; letter-spacing: .03em; } table.cal tr.head td { background: var(--surface); } table.cal td.d { height: 24px; text-align: center; border-right: 1px solid var(--line); cursor: default; } table.cal td.d.busy { background: var(--busy); } table.cal td.d.clash { background: var(--clash); } table.cal td.d.today { box-shadow: inset 0 0 0 1px #a0541240; } /* ช่วงที่มีการเปลี่ยนตัวกลางงาน — ขีดทแยงให้เห็นว่าไม่ใช่การจองต่อเนื่องปกติ */ table.cal td.d.swap { background-image: repeating-linear-gradient(45deg, #0000 0 3px, #f0a05a66 3px 6px); } .callegend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin: 10px 2px; align-items: center; } .callegend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; vertical-align: -2px; margin-right: 5px; } /* ── Prep checklist ────────────────────────────────────────────────── */ .prep-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); } .prep-item:last-child { border-bottom: 0; } .prep-item .nm { flex: 1; min-width: 0; } .prep-item .nm b { font-weight: 600; font-size: 13px; } .prep-item .nm small { display: block; color: var(--faint); font-size: 11px; } /* ของที่รวมในชุด ใต้ชื่ออุปกรณ์ในการ์ด STORE — ทีมต้องอ่านได้เร็วตอนหยิบของ ไม่ใช้ .mono เพราะเป็นชื่อของ ไม่ใช่รหัส และต้องขึ้นได้หลายบรรทัด */ .prep-item .nm small.kit { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin-top: 2px; border-left: 2px solid var(--line); padding-left: 7px; } /* ปุ่มติ๊ก PREP / OUT / IN */ .stages { display: flex; gap: 6px; flex-shrink: 0; } .stage { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: 5px 10px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--faint); } .stage:hover { border-color: var(--line-strong); } .stage input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); cursor: pointer; } .stage.on { background: var(--brand-soft); border-color: var(--brand-2); color: var(--brand); } @media (max-width: 720px) { .prep-item { flex-wrap: wrap; } .stages { width: 100%; justify-content: flex-end; } } .progress { height: 6px; background: var(--surface); border-radius: 99px; overflow: hidden; } .progress i { display: block; height: 100%; background: var(--brand-2); } /* ── FlowAccount: กลุ่มลูกค้า ──────────────────────────────────────── */ .cgroup { border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; margin-bottom: 7px; } .cgroup-head { display: flex; align-items: center; gap: 7px; } .cgroup-head b { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cgroup-n { font-size: 11.5px; color: var(--faint); white-space: nowrap; } .cgroup-amt { font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .cswap { height: 24px; padding: 0 8px; font-size: 13px; line-height: 1; } .cgroup-docs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .cdoc { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 10.5px; background: var(--surface); color: var(--muted); border-radius: 6px; padding: 2px 6px; } .cdoc.link { cursor: pointer; } .cdoc.link:hover { outline: 1px solid var(--brand-2); } /* ระบายสีเลขเอกสารตามสถานะ */ .cdoc.st-awaiting { background: var(--warn-soft); color: var(--warn); } .cdoc.st-approved { background: var(--info-soft); color: var(--info); } .cdoc.st-processed, .cdoc.st-paid { background: var(--ok-soft); color: var(--ok); } .cdoc.st-rejected { background: var(--bad-soft); color: var(--bad); } .cdoc.st-cancelled { text-decoration: line-through; opacity: .65; } /* กลุ่มสถานะ: รอดำเนินการ / ดำเนินการแล้ว */ .cbucket { border-radius: 11px; padding: 8px; margin-bottom: 8px; } .cbucket.pending { background: var(--warn-soft); } .cbucket.done { background: var(--ok-soft); } .cbucket-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 7px; font-size: 12px; font-weight: 700; } .cbucket-head span:last-child { font-weight: 500; color: var(--muted); font-size: 11.5px; } .cbucket .cgroup { background: var(--card); } /* ── Task board ────────────────────────────────────────────────────── */ .board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: stretch; } /* บอร์ดเตรียมของมีแค่ 2 คอลัมน์ — ให้กว้างเต็มจอ ไม่ต้องเลื่อนแนวนอน */ .prepboard { overflow-x: visible; } .prepboard .col { flex: 1 1 0; min-width: 0; } .prepboard .prep-item { background: var(--card); } .col { flex: 0 0 254px; background: var(--surface2); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; } .colhead { display: flex; align-items: center; gap: 8px; padding: 8px 8px 9px; border-top: 3px solid var(--muted); border-radius: 3px 3px 0 0; margin-bottom: 6px; } .colhead b { font-size: 12.5px; letter-spacing: -.01em; flex: 1; line-height: 1.25; } .colhead .n { background: var(--card); border-radius: 99px; padding: 1px 9px; font-size: 11.5px; font-weight: 800; color: var(--muted); } /* คอลัมน์สูงเท่ากันทุกอัน แล้วเลื่อนอ่านในตัวเอง */ .collist { display: grid; gap: 8px; align-content: start; border-radius: 10px; padding: 2px; flex: 1; min-height: 180px; max-height: calc(100vh - 268px); overflow-y: auto; } .collist.over { background: var(--drop); outline: 2px dashed var(--brand-2); outline-offset: -3px; } .colempty { text-align: center; color: var(--faint); font-size: 12px; padding: 18px 0; } .tcard { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; cursor: pointer; box-shadow: 0 1px 2px #2a180e12; } .tcard:hover { border-color: var(--line-strong); box-shadow: 0 4px 14px #2a180e16; } .tcard.drag { opacity: .4; } .tcard.today { box-shadow: inset 3px 0 var(--brand-2), 0 1px 2px #2a180e12; } .tcard.late { box-shadow: inset 3px 0 var(--bad), 0 1px 2px #2a180e12; } .tcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .tcard-top b { font-size: 11.5px; } .tdate { font-size: 11px; color: var(--faint); white-space: nowrap; } .tname { font-weight: 700; font-size: 13px; margin: 4px 0 1px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Remark จากทีม ต่อท้ายชื่องาน — เบากว่าชื่องานเพื่อให้ยังอ่านชื่อได้ก่อน มี remark แล้วยอมให้ 3 บรรทัด ไม่งั้นชื่องานยาวๆ จะดันข้อความหายไปทั้งท่อน */ .tname:has(.tremark) { -webkit-line-clamp: 3; } .tremark { font-weight: 600; font-size: 11.5px; color: var(--warn); } .tsub { font-size: 11.5px; color: var(--muted); } .tprog { display: flex; align-items: center; gap: 7px; margin-top: 7px; } .tprog .progress { flex: 1; } .tprog span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .tfoot { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .tby { margin-left: auto; font-size: 10.5px; color: var(--faint); } /* ── Modal / drawer ────────────────────────────────────────────────── */ .backdrop { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 24px; z-index: 50; } /* กล่องที่เปิดซ้อนบนกล่องเดิม — ต้องมีขอบกับเงาที่หนากว่า ไม่งั้นตอนซ้อนกันแยกไม่ออกว่าอันไหนอันบน */ .backdrop + .backdrop { background: #0000006e; } .backdrop + .backdrop .modal { border: 2px solid var(--brand-2); box-shadow: 0 40px 100px #000c; } .modal { background: var(--card); border: 1px solid var(--line); border-radius: 18px; width: 100%; max-width: 880px; max-height: 88vh; overflow: auto; box-shadow: 0 30px 80px #26180f45; } .modal header { position: sticky; top: 0; background: var(--card); padding: 18px 22px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; } .modal header h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; } .modal header .x { border: 0; background: var(--surface); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; } .modal .body { padding: 18px 22px 24px; } .formrow { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; } /* แถวที่เนื้อหาสูงหลายบรรทัด — ป้ายต้องอยู่บรรทัดบนสุด ไม่ใช่ลอยกลางแถว */ .formrow.tall { align-items: start; } .formrow.tall > label { padding-top: 8px; } .formrow label { font-size: 12.5px; color: var(--muted); font-weight: 600; } .formrow input, .formrow select, .formrow textarea { width: 100%; } /* ── Misc ──────────────────────────────────────────────────────────── */ .empty { text-align: center; color: var(--faint); padding: 40px 10px; font-size: 13px; } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; opacity: .75; } @keyframes spin { to { transform: rotate(360deg); } } .toast { position: fixed; right: 20px; bottom: 20px; background: var(--toast); color: #fdf8f3; padding: 12px 16px; border-radius: 12px; font-size: 13px; box-shadow: 0 16px 40px #26180f66; z-index: 99; max-width: 420px; white-space: pre-wrap; } .toast.bad { background: var(--bad); } .toast.ok { background: #2f7a4d; } .bars { display: grid; gap: 7px; } .bar { display: grid; grid-template-columns: 130px 1fr 90px; gap: 9px; align-items: center; font-size: 12.5px; } .bar .track { height: 9px; background: var(--surface); border-radius: 99px; overflow: hidden; } .bar .track i { display: block; height: 100%; background: linear-gradient(90deg, #f8c893, #a05412); } .hint { font-size: 12px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .hint.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } /* ── เลือกเอกสารหลายใบเพื่อรวม PDF ─────────────────────────────────── */ .mergebar { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--line); background: var(--surface-soft); color: var(--muted); font-size: 12.5px; } .mergebar.on { border-style: solid; border-color: var(--brand-2); background: var(--brand-soft); color: var(--ink); } .mergebar b { font-size: 15px; color: var(--brand); } .mergebar .btn { margin-left: auto; height: 32px; } .mergebar .ghost { height: 28px; padding: 0 10px; } th.pickcol, td.pickcol { width: 34px; text-align: center; padding-left: 10px; padding-right: 0; } .pickcol input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; } tr.picked > td { background: var(--brand-soft); } /* ── ตารางติ๊กสิทธิ์รายคน ───────────────────────────────────────────── */ .capgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; } .capbox { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 12.5px; } .capbox:hover { border-color: var(--line-strong); } .capbox.on { background: var(--brand-soft); border-color: var(--brand-2); font-weight: 600; } .capbox input { width: 15px; height: 15px; accent-color: var(--brand); } /* ── ใบงานที่ยกเลิก — ยังอยู่ในตารางเพื่อให้เห็นประวัติ แต่ต้องดูออกทันทีว่าไม่นับแล้ว ── */ tr.row-cancelled > td { color: var(--bad); text-decoration: line-through; opacity: .75; } tr.row-cancelled > td:first-child { text-decoration: none; } /* เลขใบงานยังต้องอ่านง่าย ไว้ค้นย้อนหลัง */ tr.row-cancelled .badge { text-decoration: none; } /* ── แถบเลือกเดือน ─────────────────────────────────────────────────── */ .monthbar { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); } .monthbar b { min-width: 92px; text-align: center; font-size: 13px; } .monthbar .ghost { height: 28px; padding: 0 9px; border: 0; background: transparent; } .monthbar .ghost:hover { background: var(--surface); } .monthbar .ghost.on { background: var(--brand-soft); color: var(--brand); } /* ── ช่องส่งเอกสาร ─────────────────────────────────────────────────── */ .delivbox { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; } /* ⚠️ ต้องมี width คงที่ — .formrow input ตั้ง width:100% ช่องติ๊กในฟอร์มจะยืดเต็มคอลัมน์ */ .delivbox input { width: 15px; height: 15px; flex: none; accent-color: var(--brand); } /* ── วันเดินทาง (คิดค่าของครึ่งวัน) ในกล่องใบงาน ── */ .traveldays { margin-top: 7px; padding: 7px 9px; border-radius: 8px; background: var(--surface-soft); border: 1px solid var(--line); } .traveldays .tl { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); } .traveldays .days { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; } .traveldays .sum { display: block; margin-top: 5px; color: var(--brand); font-weight: 700; font-size: 11.5px; } .traveldays .sum:empty { display: none; } /* ── ปุ่มผลตรวจ (CHECK / TEST) — เลือกได้ค่าเดียว ไม่ใช่บันไดสะสม ── */ .stage.qc input { accent-color: currentColor; } .stage.qc-checking.on { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .stage.qc-pass.on { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } .stage.qc-fail.on { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); } .stage.qc-complete.on { background: var(--info-soft); border-color: var(--info); color: var(--info); } /* ── ช่องเลือกสถานะงาน — ระบายสีตามสถานะเหมือนป้าย badge ── */ select.statussel { font-weight: 700; border-width: 1px; border-style: solid; } select.statussel.b-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); } select.statussel.b-info { background: var(--info-soft); color: var(--info); border-color: var(--info); } select.statussel.b-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } select.statussel.b-bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } select.statussel.b-brand { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-2); } select.statussel.b-muted { background: var(--surface); color: var(--muted); border-color: var(--line); } /* Pipeline: 1 แถว = 1 บรรทัด — ข้อความยาวตัดด้วย … แล้วดูเต็มๆ จากชี้เมาส์ (ชื่องานยาวๆ เคยดันแถวสูง 4-5 บรรทัด จนกวาดตาทั้งตารางไม่ไหว) */ td.cut { max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } td.cut b, td.cut small { display: inline; } td.nw { white-space: nowrap; } td.cut small { margin-left: 5px; } /* ป้าย DP หน้าชื่อ — บอกว่าชื่อตัวหนาคือชื่อ DP ไม่ใช่ชื่อลูกค้า/บ้านโปรดักชัน */ td.cut small.tag-dp { margin: 0 5px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--brand); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 4px; } /* รอบวางบิลใต้ชื่อลูกค้าในคิวส่งเอกสาร — ต้องเห็นชัดกว่าบรรทัด "บุคคล/บริษัท" เพราะเป็นตัวตัดสินว่าส่งวันไหน */ .sched { /* inline-block ไม่ใช่ block — ป้ายต้องกว้างเท่าข้อความ ไม่ใช่ยืดเต็มช่องตาราง */ display: inline-block; margin-top: 3px; padding: 1px 5px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 11px; line-height: 1.5; border: 1px solid var(--brand-2); cursor: help; } /* ป้ายที่แปลงเป็นวันที่จริงได้ — ตัวหนาขึ้นให้ต่างจากป้ายที่ยังเป็นข้อความรอบวางบิล */ .sched.due { font-weight: 700; font-variant-numeric: tabular-nums; } /* หัวคั่น "รอบ" ในการ์ด STORE — งานถ่ายวันเว้นวันที่ของออก-กลับหลายรอบ ต้องมองแยกออกทันทีว่ากำลังติ๊กของรอบไหน ไม่งั้นติ๊กผิดรอบแล้วของหายทั้งกอง */ .roundhead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 6px; padding: 6px 10px; border-radius: 8px; background: var(--brand-soft); border-left: 3px solid var(--brand-2); } .roundhead:first-child { margin-top: 0; } .roundhead b { font-size: 13px; color: var(--brand); } /* แถวปุ่ม "ทั้งหมด" ของ Admin — แยกเป็นแถวของตัวเอง ไม่ปนกับปุ่มใช้งานประจำวัน จางกว่าปุ่มอื่นตั้งใจ เพราะเป็นปุ่มลัดสำหรับแก้ย้อนหลัง ไม่ใช่ทางเดินปกติ */ .bulkrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--surface-soft); border: 1px dashed var(--line-strong); } .bulkrow > span { font-size: 11.5px; color: var(--muted); margin-right: 2px; } .bulkrow button { height: 26px; padding: 0 10px; font-size: 11.5px; } .roundhead + .bulkrow { margin-top: 6px; } /* ตัวเปลี่ยนสถานะเอกสารในตาราง FlowAccount — เล็กและจางไว้ ป้ายสถานะจริงต้องเด่นกว่า */ select.ministatus { /* กว้างเท่าลูกศรพอดี ไม่งั้น select ในตารางจะยืดเต็มช่องแล้วดันป้ายสถานะตกบรรทัด */ width: 34px; margin-left: 6px; padding: 1px 2px; font-size: 11px; vertical-align: middle; background: transparent; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; } select.ministatus:hover { color: var(--ink); border-color: var(--brand-2); cursor: pointer; } select.ministatus:disabled { opacity: .4; } /* ── ป้ายสีชมพู (รับคืนแล้ว) ── */ .b-pink { background: var(--pink-soft); color: var(--pink); } select.statussel.b-pink { background: var(--pink-soft); color: var(--pink); border-color: var(--pink); } /* ── กล่องข้อมูลส่วนบุคคลในแท็บทีมงาน ── ตั้งใจให้ต่างจากช่องอื่นชัดเจน คนกรอกจะได้รู้ว่ากำลังแตะข้อมูลที่ต้องระวัง */ .piibox { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); border: 1px solid var(--warn-line); } .piibox .pt { font-size: 12px; font-weight: 700; color: var(--warn); margin-bottom: 8px; } .piibox .formrow { margin-bottom: 6px; } /* หัวคั่นเดือนในตารางคิวงาน (แท็บทีมงาน) — ต้องเกาะหัวตารางไว้ตอนเลื่อน ไม่งั้นเลื่อนดูกลางเดือนแล้วไม่รู้ว่ากำลังดูเดือนไหนอยู่ */ tr.monthrow > td { position: sticky; top: 0; background: var(--surface2); border-top: 1px solid var(--line-strong); padding-top: 7px; padding-bottom: 7px; } tr.monthrow b { color: var(--brand); font-size: 12.5px; } tr.monthrow span { color: var(--muted); font-size: 11.5px; margin-left: 8px; } /* ══════════════════════════════════════════════════════════════════════ โหมดมือถือ — ทุกกฎขึ้นต้นด้วย html[data-vm="mobile"] เท่านั้น ⚠️ ห้ามใช้ @media เปล่าๆ ตรงนี้ เพราะผู้ใช้เลือก "โหมดเว็บ" บนมือถือได้ ถ้าผูกกับความกว้างจอ โหมดเว็บจะโดนกฎพวกนี้ทับจนไม่เหมือนจอคอมอีก ⚠️ ห้ามใช้ CSS nesting — Safari บนมือถือรุ่นเก่ายังไม่รองรับ เขียนเต็มทุกบรรทัด ══════════════════════════════════════════════════════════════════════ */ /* แถบบน + ฉากหลัง — โหมดเว็บซ่อนไว้ */ .mtop, .scrim { display: none; } /* ── โครงหน้า: เมนูกลายเป็นลิ้นชักเลื่อนออกมา ── */ html[data-vm="mobile"] .app { grid-template-columns: 1fr; } html[data-vm="mobile"] .mtop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 60; height: 52px; padding: 0 12px; background: var(--side); color: #fff; box-shadow: 0 2px 10px #0003; } html[data-vm="mobile"] .mtop b { font-size: 14px; letter-spacing: .01em; } html[data-vm="mobile"] .mbtn { width: 40px; height: 40px; border: 0; border-radius: 11px; background: #ffffff14; color: #fff; font-size: 17px; cursor: pointer; display: grid; place-items: center; } /* ปุ่มสลับมุมมองมีคำกำกับ — ไอคอนอย่างเดียวไม่มีใครเดาออกว่าปุ่มอะไร */ html[data-vm="mobile"] .mbtn.wide { width: auto; padding: 0 12px; gap: 6px; grid-auto-flow: column; align-items: center; font-size: 15px; } html[data-vm="mobile"] .mbtn.wide span { font-size: 12px; font-weight: 700; } /* ⚠️ ลิ้นชัก **ไม่ใส่ transition** โดยตั้งใจ เจอตอนทดสอบว่า CSSTransition ค้างสถานะ running ได้ แล้วมันทับทุกอย่าง แม้แต่ !important กับ inline style → ลิ้นชักเปิดไม่ออกเลย เมนูหลักของทั้งแอปเปิดไม่ได้ = ใช้งานไม่ได้ทั้งเครื่อง แลกกับแอนิเมชันสวยไม่คุ้ม (ฉากหลังยังค่อยๆ จางได้ ถ้าค้างก็แค่ไม่มีเงา ไม่กระทบการใช้งาน) */ html[data-vm="mobile"] .side { position: fixed; inset: 0 auto 0 0; z-index: 70; width: 270px; max-width: 84vw; height: 100dvh; transform: translateX(-102%); } html[data-vm="mobile"] .app.drawer-open .side { transform: none; } html[data-vm="mobile"] .scrim { display: block; position: fixed; inset: 0; z-index: 65; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .22s; } html[data-vm="mobile"] .app.drawer-open .scrim { opacity: 1; pointer-events: auto; } html[data-vm="mobile"] .main { padding: 0 12px 90px; } html[data-vm="mobile"] .top { min-height: 0; padding: 14px 0 10px; display: block; } html[data-vm="mobile"] .top h1 { font-size: 20px; line-height: 1.25; } /* ปุ่มบนหัวข้อเรียงเป็นแถวเลื่อนได้ ไม่ตกบรรทัดจนดันเนื้อหาลงไปไกล */ html[data-vm="mobile"] .top .actions { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-top: 10px; } html[data-vm="mobile"] .top .actions > * { flex: none; } html[data-vm="mobile"] .search { min-width: 190px; } /* ── นิ้วกดได้จริง: ของเดิม 26-30px เล็กไป มาตรฐานคือ 42-44px ── */ html[data-vm="mobile"] .btn, html[data-vm="mobile"] .ghost, html[data-vm="mobile"] select, html[data-vm="mobile"] input[type=text], html[data-vm="mobile"] input[type=date], html[data-vm="mobile"] input[type=number] { min-height: 42px; } html[data-vm="mobile"] .nav button { padding: 12px; } html[data-vm="mobile"] .stage { min-height: 40px; padding: 0 12px; } html[data-vm="mobile"] .stage input { width: 20px; height: 20px; } html[data-vm="mobile"] .delivbox input { width: 20px; height: 20px; } /* ── ตาราง -> การ์ด ── td[data-label] เติมให้อัตโนมัติหลัง render (labelTables() ใน app.js) ตารางที่ต้องคงรูปตาราง (Master Calendar) ใส่ class="keeptable" ที่ .tablewrap */ html[data-vm="mobile"] .tablewrap:not(.keeptable) table, html[data-vm="mobile"] .tablewrap:not(.keeptable) tbody, html[data-vm="mobile"] .tablewrap:not(.keeptable) tr, html[data-vm="mobile"] .tablewrap:not(.keeptable) td { display: block; width: auto; } html[data-vm="mobile"] .tablewrap:not(.keeptable) thead { display: none; } html[data-vm="mobile"] .tablewrap:not(.keeptable) tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; } html[data-vm="mobile"] .tablewrap:not(.keeptable) td { border: 0; padding: 4px 0; text-align: left; display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: baseline; } html[data-vm="mobile"] .tablewrap:not(.keeptable) td::before { content: attr(data-label); color: var(--muted); font-size: 11.5px; font-weight: 600; } html[data-vm="mobile"] .tablewrap:not(.keeptable) td:empty { display: none; } html[data-vm="mobile"] .tablewrap:not(.keeptable) td.cut { max-width: none; white-space: normal; overflow: visible; } html[data-vm="mobile"] .tablewrap:not(.keeptable) { overflow: visible; } /* ── กล่องเด้ง: เต็มจอ อ่านง่ายกว่ากล่องลอยเล็กๆ ── */ /* .backdrop มี padding 24px รอบกล่อง — บนมือถือกินไปเกือบ 50px จาก 375px ต้องเอาออก */ html[data-vm="mobile"] .backdrop { padding: 0; } html[data-vm="mobile"] .modal { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; } /* กล่องซ้อนกล่อง: ไม่มีขอบให้เห็นแล้ว ใช้เส้นบนสีแบรนด์บอกแทนว่าเป็นชั้นบน */ html[data-vm="mobile"] .backdrop + .backdrop .modal { border: 0; border-top: 3px solid var(--brand-2); } html[data-vm="mobile"] .modal .body { padding: 14px; } html[data-vm="mobile"] .grid-1-1, html[data-vm="mobile"] .grid2 { grid-template-columns: 1fr; } html[data-vm="mobile"] .formrow { grid-template-columns: 1fr; gap: 4px; } html[data-vm="mobile"] .formrow.tall > label { padding-top: 0; } /* ── บอร์ด Task / STORE: คอลัมน์เรียงลงมาแทนที่จะเลื่อนซ้ายขวา ── */ html[data-vm="mobile"] .board { grid-template-columns: 1fr; } html[data-vm="mobile"] .kpis { grid-template-columns: 1fr 1fr; } html[data-vm="mobile"] .kpi .value { font-size: 20px; }