/* ========================================================== main.css — DESIGN STANDARD ระบบ Daily Workflow (ใช้ทุกหน้า) โทน: navy #131c33 / indigo #4f46e5 / teal #0d9488 / bg #f4f5fa ทุกหน้าต้องใช้ token + component ในไฟล์นี้เท่านั้น ========================================================== */ :root { --navy: #131c33; --indigo: #4f46e5; --indigo-dark: #4338ca; --indigo-soft: #eef0ff; --teal: #0d9488; --ink: #1e2433; --ink-2: #5c6478; --muted: #8890a3; --muted-2: #9aa1b3; --line: #e8eaf2; --line-soft: #f0f1f7; --line-strong: #c7cce0; --control-border: #dfe3ee; --control-icon: #67748f; --control-icon-strong: #52617b; --control-placeholder: #7d879c; --bg: #f4f5fa; --panel: #fafbfe; --surface: #fff; --surface-2: #f8f9fc; --green: #16a34a; --red: #b91c1c; --amber: #b45309; /* คู่สี "พื้นอ่อน + สีหมึก" สำหรับไอคอน/ชิปแยกประเภท (badge-status และการ์ดประเภทงานใช้ชุดนี้) */ --indigo-tint: #e0e7ff; --green-tint: #dcfce7; --green-ink: #15803d; --red-tint: #ffe4e0; --red-ink: #dc4a2f; --violet-tint: #f2e8ff; --violet-ink: #7c3aed; --radius: 16px; --radius-sm: 10px; --rail-w: 72px; --head-h: 64px; --shadow-card: 0 1px 2px rgba(20,25,40,.04); --shadow-pop: 0 14px 34px rgba(20,25,40,.14); --shadow-drop: 0 10px 26px rgba(20,25,40,.12); --shadow-indigo: 0 6px 14px rgba(79,70,229,.28); --ring-indigo: 0 0 0 3px rgba(79,70,229,.12); --create-gradient: linear-gradient(135deg, #3548ee 0%, #5740e8 100%); --create-gradient-hover: linear-gradient(135deg, #3042dc 0%, #4935cf 100%); --create-border: #7772ff; --create-border-hover: #625cf2; --create-shadow: 0 7px 18px rgba(67,56,202,.28); --create-shadow-hover: 0 8px 20px rgba(67,56,202,.34); --font: 'Plus Jakarta Sans','Sarabun',sans-serif; } * { box-sizing: border-box; } /* attribute hidden ต้องชนะเสมอ — คลาส component ที่ตั้ง display:flex/grid (เช่น .pager-bar) มีน้ำหนักมากกว่ากฎ [hidden] ของ UA stylesheet ทำให้กล่องที่สั่งซ่อนยังโผล่ */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; text-wrap: pretty; } a { color: var(--indigo); text-decoration: none; } a:hover { color: var(--indigo-dark); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #ccd1de; border-radius: 8px; } /* ---------- Header ---------- */ .app-header { height: var(--head-h); background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: .01em; color: var(--navy); } .brand img { width: 28px; height: 28px; object-fit: contain; } .brand .accent { color: #0d9488; } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent; color: #4b5568; cursor: pointer; flex: none; } .sidebar-toggle:hover { background: var(--indigo-soft); color: var(--indigo); } .header-right { display: flex; align-items: center; gap: 18px; } /* Quick search (มาตรฐาน: ทุกหน้าใช้ตัวเดียวกันจาก layout.js) */ .qsearch { position: relative; flex: none; } .qsearch input { width: 340px; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-family: var(--font); font-size: 14px; color: var(--ink); outline: none; } .qsearch input::placeholder { color: #a3aabb; } .qsearch input:focus { border-color: #c7cbf7; background: #fff; box-shadow: 0 0 0 3px rgba(79,70,229,.10); } .qsearch .qs-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #a3aabb; pointer-events: none; } .qs-drop { position: absolute; top: calc(100% + 8px); left: 0; width: 520px; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 6px; display: none; z-index: 400; } .qs-drop.show { display: block; } .qs-group + .qs-group { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; } .qs-group-head { display: flex; justify-content: space-between; padding: 8px 12px 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .qs-group-head span { text-transform: none; letter-spacing: 0; font-weight: 600; } .qs-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--ink); } .qs-item:hover, .qs-item.active { background: var(--indigo-soft); color: var(--ink); } .qs-no { font-size: 13px; font-weight: 700; color: var(--indigo); flex: none; min-width: 112px; } .qs-body { flex: 1; min-width: 0; } .qs-title { display: block; font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qs-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qs-item .badge-status { font-size: 11.5px; padding: 3px 9px; flex: none; } .qs-more { display: block; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--indigo); } .qs-more:hover, .qs-more.active { background: var(--indigo-soft); } .qs-empty { padding: 20px 14px; text-align: center; font-size: 13.5px; color: var(--muted); } .user-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#6366f1,#4f46e5); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 13px; flex: none; } .user-chip .u-name { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.25; } .user-chip .u-role { font-size: 11.5px; color: var(--muted); line-height: 1.25; } .user-chip .u-caret { color: #a3aabb; flex: none; } .user-menu { position: absolute; right: 0; top: 48px; width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 8px; z-index: 300; display: none; } .user-menu.show { display: block; } .user-menu .um-head { padding: 7px 10px; font-size: 11px; color: #9096a8; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .user-menu .um-item { padding: 9px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; font-weight: 600; color: #374151; } .user-menu .um-item:hover { background: #f4f5fa; } .user-menu .um-item.active { background: var(--indigo-soft); color: var(--indigo-dark); } .user-menu .um-item.danger { color: #dc2626; } .user-menu hr { margin: 6px 0; border-color: var(--line-soft); } /* ---------- Layout ---------- */ .app-body { display: flex; min-height: calc(100vh - var(--head-h)); margin-top: var(--head-h); } /* แถบไอคอนด้านซ้าย (มาตรฐาน: แสดงตลอดทุกหน้า) */ .app-rail { position: fixed; top: var(--head-h); left: 0; bottom: 0; width: var(--rail-w); flex: none; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; z-index: 30; } .rail-item { position: relative; flex: none; width: 100%; display: flex; justify-content: center; } .rail-btn { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #8890a3; cursor: pointer; transition: background .15s, color .15s; } /* เมนูย่อยแบบ flyout — โผล่เมื่อวางเมาส์บนไอคอน */ .rail-fly { position: absolute; left: calc(100% + 8px); top: -8px; min-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: 0 18px 44px rgba(20,25,40,.18); display: flex; flex-direction: column; gap: 2px; z-index: 50; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .14s, transform .14s, visibility .14s; } .rail-fly::before { content: ''; position: absolute; left: -24px; top: 0; bottom: 0; width: 24px; } .rail-item:hover .rail-fly, .rail-item:focus-within .rail-fly { opacity: 1; visibility: visible; transform: translateX(0); } .rail-fly-simple { min-width: 0; padding: 4px; } .rail-fly-simple .rail-fly-head { border: none; margin: 0; padding: 8px 14px; } .rail-fly-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; font-size: 15px; font-weight: 800; color: var(--navy); border-bottom: 1px solid var(--line); margin-bottom: 6px; white-space: nowrap; } .rail-fly-head::before { content: ''; width: 4px; height: 18px; border-radius: 4px; background: var(--indigo); flex: none; } .rail-sub-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; font-size: 15px; font-weight: 600; color: #374151; white-space: nowrap; transition: background .15s, color .15s; } .rail-sub-link svg { flex: none; width: 18px; height: 18px; opacity: .75; stroke-width: 2; } .rail-sub-link:hover { background: var(--indigo-soft); color: var(--indigo-dark); } .rail-sub-link:hover svg { opacity: 1; } .rail-sub-link.active { background: var(--indigo); color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(79,70,229,.28); } .rail-sub-link.active svg { opacity: 1; } .rail-btn svg { width: 22px; height: 22px; } .rail-btn:hover { background: var(--indigo-soft); color: var(--indigo); } .rail-btn.active { background: var(--indigo); color: #fff; box-shadow: 0 6px 16px rgba(79,70,229,.32); } .rail-item-logout { margin-top: auto; } .rail-btn-logout { padding: 0; border: 0; background: transparent; } .rail-btn-logout:hover { background: var(--red-tint); color: var(--red); } .sidebar-backdrop { position: fixed; inset: var(--head-h) 0 0 0; background: rgba(15,20,38,.35); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .18s ease; } body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } .app-sidebar { width: 296px; flex: none; background: #fff; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; position: fixed; top: var(--head-h); left: 0; bottom: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(15,20,38,.14); overflow-y: auto; border-right: 1px solid var(--line); } .app-sidebar > .sb-group:not(:first-child) { margin-top: 8px; } .sb-user-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--panel); } .sb-user-card .avatar { width: 34px; height: 34px; font-size: 12px; } .sb-user-card .sb-user-name { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.25; } .sb-user-card .sb-user-role { font-size: 12px; color: var(--muted); line-height: 1.25; } body.sidebar-open .app-sidebar { transform: translateX(0); } .sb-group { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; color: #374151; cursor: pointer; transition: background .15s, color .15s; } .sb-group svg:not(.sb-chevron) { width: 18px; height: 18px; flex: none; } .sb-group:hover { background: var(--panel); color: var(--indigo-dark); } .sb-group.active { background: var(--indigo-soft); color: var(--indigo-dark); } .sb-group.active svg:not(.sb-chevron) { color: var(--indigo); } .sb-group span { flex: 1; } .sb-chevron { flex: none; transition: transform .18s ease; opacity: .6; } .sb-group.open .sb-chevron { transform: rotate(180deg); } .sb-sub { display: flex; flex: 0 0 auto; flex-direction: column; gap: 1px; padding-left: 30px; margin-bottom: 4px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .22s ease, opacity .18s ease; } .sb-group { flex: 0 0 auto; } .sb-group.open + .sb-sub { max-height: 600px; opacity: 1; } .sb-link { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--muted-2); transition: background .15s, color .15s; } .sb-link svg { flex: none; opacity: .7; width: 16px; height: 16px; stroke-width: 1.8; } .sb-link:hover { color: var(--indigo); background: var(--panel); cursor: pointer; } .sb-link.active { background: var(--indigo-soft); color: var(--indigo-dark); font-weight: 700; } .sb-link.active svg { opacity: 1; } .app-sidebar > .sb-group.sb-logout { width: 100%; margin-top: auto; border: 0; background: transparent; color: var(--red); text-align: left; } .app-sidebar > .sb-group.sb-logout:hover { background: var(--red-tint); color: var(--red); } .sb-logout + .sb-foot { margin-top: 0; } .sb-foot { margin-top: auto; padding: 14px 12px 4px; font-size: 10.5px; color: #b0b6c6; line-height: 1.5; } .app-main { flex: 1; min-width: 0; padding: 26px 30px 60px; margin-left: var(--rail-w); } @media (max-width: 860px) { .app-header { padding: 0 14px; } .qsearch input { width: 190px; } .qs-drop { width: min(520px, calc(100vw - 28px)); } .app-rail { display: none; } .app-main { padding: 16px 14px 50px; margin-left: 0; } } /* ---------- หัวหน้า (มาตรฐาน) ---------- */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .page-head .btn { white-space: nowrap; flex: none; } .table .job-no { white-space: nowrap; } .page-title { font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); line-height: 1.45; } .breadcrumb-text { font-size: 13px; color: var(--muted); margin-top: 2px; } /* เซลล์ที่อาจมีป้ายสถานะมากกว่าหนึ่งอัน (เช่น "อนุมัติแล้ว" + "เร่งด่วน") .badge-status เป็น inline-block ไม่มี margin พอวางสองอันในคอลัมน์แคบ มันจะซ้อนชิดกันสนิท จนดูเหมือนป้ายเดียวติดกัน ห่อด้วยตัวนี้เพื่อให้มีช่องไฟและตัดบรรทัดอย่างเป็นระเบียบ */ .badge-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* คอลัมน์ "อัปเดตโดย" ของหน้ารายการ — ชื่อผู้อัปเดตบรรทัดบน วันเวลาบรรทัดล่าง (jm, wo) */ .update-cell { color: var(--muted); font-size: 14px; } .update-cell span { display: block; margin-top: 2px; color: var(--muted-2); font-size: 13px; } /* แถบบอกขอบเขตข้อมูลใต้ breadcrumb ของหน้ารายการที่กรองด้วย scope (jm, wo) */ .scope-hint { margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .scope-hint strong { color: var(--ink-2); font-weight: 700; } .card-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); } /* ---------- Stat cards (แถบสรุปสถานะ — ใช้กับ .pill-tabs ที่เพิ่มคลาส stat-cards) ---------- */ .pill-tabs.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .stat-cards .pill-tab { cursor: pointer; } .stat-cards .pill-tab { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 14px; row-gap: 0; min-height: 92px; padding: 16px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: left; transition: border-color .15s, box-shadow .15s, background .15s; } .stat-cards .pill-tab::before { content: ''; width: 58px; height: 58px; border-radius: 15px; grid-column: 1; grid-row: 1 / span 2; align-self: center; background: #f2f3f9 center / 28px 28px no-repeat; } .stat-cards .pill-tab .cnt, .stat-cards .pill-tab > * { grid-column: 2; } .stat-cards .pill-tab .cnt { display: block; margin: 0; padding: 0; background: none; border-radius: 0; grid-column: 2; grid-row: 2; align-self: start; font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.1; } .stat-cards .pill-tab:hover { border-color: #d5d9ea; box-shadow: 0 4px 14px rgba(20,25,40,.06); } .stat-cards .pill-tab.active { background: #fbfbff; border-color: var(--indigo); box-shadow: 0 6px 18px rgba(79,70,229,.12); color: var(--muted); } .stat-cards .pill-tab.active .cnt { color: var(--indigo); } /* ---------- Stat card icons (มาตรฐานไอคอนสถานะ ใช้ data-ico) ---------- */ .stat-cards .pill-tab[data-ico="all"]::before { background-color: #eef0ff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%234f46e5'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3.5'%20y%3D'3.5'%20width%3D'7'%20height%3D'7'%20rx%3D'2'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'3.5'%20width%3D'7'%20height%3D'7'%20rx%3D'2'%2F%3E%3Crect%20x%3D'3.5'%20y%3D'13.5'%20width%3D'7'%20height%3D'7'%20rx%3D'2'%2F%3E%3Crect%20x%3D'13.5'%20y%3D'13.5'%20width%3D'7'%20height%3D'7'%20rx%3D'2'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="draft"]::before { background-color: #f1f2f6; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%236b7280'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020l3.8-1%2010.4-10.4a2%202%200%200%200%200-2.8l-.9-.9a2%202%200%200%200-2.8%200L4%2015.3z'%2F%3E%3Cpath%20d%3D'M13%206.5l3.6%203.6'%2F%3E%3Cpath%20d%3D'M12%2020h8'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="pending"]::before { background-color: #fef3c7; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23b45309'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8.5'%2F%3E%3Cpath%20d%3D'M12%207.5V12l3.2%202'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="approved"]::before { background-color: #dcfce7; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2315803d'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8.5'%2F%3E%3Cpath%20d%3D'M8.2%2012.3l2.5%202.4%205.1-5.4'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="reject"]::before, .stat-cards .pill-tab[data-ico="rejected"]::before { background-color: #ffedd5; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23c2410c'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206.5L4.5%2011l4.5%204.5'%2F%3E%3Cpath%20d%3D'M4.5%2011h9.3a5%205%200%200%201%200%2010h-3.6'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="cancel"]::before { background-color: #fee2e2; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23b91c1c'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'8.5'%2F%3E%3Cpath%20d%3D'M9%209l6%206M15%209l-6%206'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="mine"]::before { background-color: #eef0ff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%234f46e5'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'8'%20r%3D'3.8'%2F%3E%3Cpath%20d%3D'M4.5%2020c0-3.9%203.3-6.5%207.5-6.5S19.5%2016.1%2019.5%2020'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="dept"]::before { background-color: #ccfbf1; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%230d9488'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'8.5'%20r%3D'3.2'%2F%3E%3Cpath%20d%3D'M3%2019.5c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6'%2F%3E%3Cpath%20d%3D'M15.5%205.6a3.2%203.2%200%200%201%200%205.8M17.5%2014.4c2.1.8%203.5%202.6%203.5%205.1'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="cross"]::before { background-color: #dbeafe; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231d4ed8'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%208h12m0%200l-3-3m3%203l-3%203'%2F%3E%3Cpath%20d%3D'M20%2016H8m0%200l3-3m-3%203l3%203'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab[data-ico="delivery"]::before { background-color: #e0e7ff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%234338ca'%20stroke-width%3D'2.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3.5%207.5h11v9h-11z'%2F%3E%3Cpath%20d%3D'M14.5%2010h3.4l2.6%203v3.5h-6z'%2F%3E%3Ccircle%20cx%3D'7'%20cy%3D'18'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'17.5'%20cy%3D'18'%20r%3D'1.8'%2F%3E%3C%2Fsvg%3E"); } .stat-cards .pill-tab.active::before { box-shadow: 0 0 0 3px rgba(79,70,229,.14); } /* ---------- Filter bar (มาตรฐานแถบค้นหา/ตัวกรองในทุกหน้า) ---------- */ .filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; } .filter-bar .form-control, .filter-bar .form-select { background-color: #fff; height: 42px; } .filter-bar .spacer { flex: 1; } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; white-space: nowrap; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; color: #5c6478; cursor: pointer; } .btn-ghost:hover { background: var(--indigo-soft); border-color: #d5d9ea; color: var(--indigo-dark); } /* ---------- Data list: filter + edge-to-edge table ---------- หน้ารายการใช้โครงกลางนี้ แล้วเก็บเฉพาะสัดส่วนคอลัมน์ไว้ใน CSS ของโมดูล */ .data-list-card { padding: 0; overflow: hidden; } .data-list-head { margin: 0 !important; padding: 20px 20px 16px; } .data-list-note { margin: 0 !important; padding: 14px 18px 0; } .data-list-content { padding: 16px 18px 18px; } .data-list-foot { margin: 0 !important; padding: 14px 18px 18px; } .data-list-card .data-filter-bar { gap: 8px; margin: 0; padding: 16px 18px 15px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: var(--surface); } .data-list-card .data-filter-bar .form-control, .data-list-card .data-filter-bar .form-select, .data-list-card .data-filter-bar .btn-ghost { height: 40px; border: 1px solid var(--control-border); border-radius: 8px; } .data-filter-control { position: relative; flex: 0 1 auto; } .data-filter-control-wide { width: 19%; } .data-filter-control-compact { width: 16%; } .data-filter-control-flex { flex: 1 1 160px; min-width: 150px; } .data-filter-control-search.data-filter-control-flex { flex-grow: 1.4; } .data-filter-control > .form-control, .data-filter-control > .form-select, .data-filter-control > .ss-wrap { width: 100%; } .data-filter-icon { position: absolute; top: 50%; left: 12px; z-index: 2; width: 17px; height: 17px; color: var(--control-icon); pointer-events: none; transform: translateY(-50%); } .data-filter-control-search .data-filter-icon, .data-filter-control-compact .data-filter-icon { width: 18px; height: 18px; } .data-filter-control .data-filter-input, .data-filter-control > .form-select, .data-filter-control .ss-input { width: 100%; padding-left: 40px; color: var(--ink-2); font-size: 13px; font-weight: 600; } .data-filter-control .data-filter-input::placeholder { color: var(--control-placeholder); opacity: 1; } .data-filter-control .ss-caret { right: 12px; color: var(--control-icon-strong); } .data-list-card .data-filter-bar .btn-ghost { padding: 0 15px; color: var(--control-icon); font-size: 13px; } .data-list-card .data-filter-bar .btn-ghost svg { width: 16px; height: 16px; } .data-table { width: 100%; margin-bottom: 0; table-layout: fixed; } .data-table > thead > tr > th { padding: 11px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.35; vertical-align: middle; } .data-table > tbody > tr > td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 14.5px; line-height: 1.45; vertical-align: middle; } .data-table > thead > tr > th:first-child, .data-table > tbody > tr > td:first-child { padding-left: 28px; } .data-table > thead > tr > th:last-child, .data-table > tbody > tr > td:last-child { padding-right: 28px; } .table.data-table > tbody > tr:hover > td { background: var(--panel); } .table.data-table .job-no { color: var(--indigo); font-size: 14.5px; font-weight: 700; } .data-name-cell { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; } .data-muted-cell { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; } .data-table .update-cell { color: var(--ink); font-size: 14px; } .data-table .update-cell span { margin-top: 1px; color: var(--muted); font-size: 12.5px; } .data-table .badge-status { padding: 4px 11px; font-size: 12.5px; line-height: 1.25; } .data-table td:last-child svg { width: 18px; height: 18px; } .data-list-card #center_view > .pager-bar:last-child, .data-list-card > .pager-bar:last-child { margin: 0; padding: 14px 28px 16px; } @media (max-width: 1000px) { .data-filter-bar > .data-filter-control { flex: 1 1 240px; width: auto; } } /* ---------- Dept / scope pill (มาตรฐาน) ---------- */ .dept-pill { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size:13px; font-weight: 700; background: var(--indigo-soft); color: var(--indigo-dark); white-space: nowrap; letter-spacing: .02em; cursor: default; } /* ---------- Status badges ---------- */ .badge-status { padding: 5px 13px; border-radius: 99px; font-size: 13px; font-weight: 700; display: inline-block; white-space: nowrap; } .st-draft { background: #eef0f4; color: #4b5563; } .st-pending { background: #fef3c7; color: #92400e; } .st-approved { background: #dcfce7; color: #15803d; } .st-reject { background: #ffedd5; color: #c2410c; } .st-cancelled { background: var(--line); color: var(--red); } .st-ready { background: var(--indigo-soft); color: var(--indigo-dark); } .st-working { background: #dbeafe; color: #1d4ed8; } /* ไอคอนสถานะใช้ SVG mask แทน glyph ของฟอนต์ เพื่อให้ตำแหน่งสมมาตรทุกภาษา */ .badge-status::before { content: ''; display: none; width: 16px; height: 16px; flex: 0 0 16px; align-self: center; background-color: currentColor; -webkit-mask: var(--status-icon) center / 16px 16px no-repeat; mask: var(--status-icon) center / 16px 16px no-repeat; } .badge-status.st-draft, .badge-status.st-pending, .badge-status.st-approved, .badge-status.st-reject, .badge-status.st-cancelled { display: inline-flex; align-items: center; gap: 6px; } .badge-status.st-draft::before, .badge-status.st-pending::before, .badge-status.st-approved::before, .badge-status.st-reject::before, .badge-status.st-cancelled::before { display: block; } .st-approved { --status-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='m8%2012%202.5%202.5L16%209'/%3E%3C/svg%3E"); } .st-pending { --status-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E"); } .st-reject { --status-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%207-5%205%205%205M4%2012h10a6%206%200%200%201%206%206'/%3E%3C/svg%3E"); } .st-cancelled { --status-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='m9%209%206%206m0-6-6%206'/%3E%3C/svg%3E"); } .st-draft { --status-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h9M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z'/%3E%3C/svg%3E"); } /* ---------- Buttons ---------- */ .btn { font-size: 14px; font-family: var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--radius-sm); font-weight: 700; } .btn svg { flex: none; } .btn-sm { font-size: 13px; padding: 5px 12px; gap: 6px; } .btn-sm svg { width: 14px; height: 14px; } .btn-indigo { background: var(--indigo); color: #fff; font-weight: 700; border-radius: var(--radius-sm); padding: 10px 20px; box-shadow: 0 6px 16px rgba(79,70,229,.26); } .btn-indigo:hover, .btn-indigo:focus { background: var(--indigo-dark); color: #fff; } .btn-create { min-width: 190px; height: 44px; gap: 10px; padding: 0 20px; border: 1px solid var(--create-border); border-radius: var(--radius-sm); background: var(--create-gradient); box-shadow: var(--create-shadow); color: var(--surface); font-size: 15px; line-height: 1; } .btn-create svg { width: 19px; height: 19px; } .btn-create:hover, .btn-create:focus { border-color: var(--create-border-hover); background: var(--create-gradient-hover); box-shadow: var(--create-shadow-hover); color: var(--surface); } .btn-outline-indigo { border: 1px solid var(--indigo); color: var(--indigo); font-weight: 700; border-radius: var(--radius-sm); } .btn-outline-indigo:hover { background: var(--indigo-soft); color: var(--indigo-dark); } .btn-green { background: var(--green); color: #fff; font-weight: 700; border-radius: var(--radius-sm); } .btn-green:hover { background: #15803d; color: #fff; } .btn-soft-red { background: #fee2e2; color: var(--red); font-weight: 700; border-radius: var(--radius-sm); } .btn-soft-red:hover { background: #fecaca; color: var(--red); } .btn-outline-secondary { border-radius: var(--radius-sm); font-weight: 600; } /* ---------- Tables ---------- */ .table { --bs-table-bg: transparent; } .table thead th { font-size: 12.5px; letter-spacing: .01em; color: var(--muted); background: transparent; border-bottom: 1px solid var(--line); font-weight: 700; white-space: normal; padding-bottom: 12px; } .table td { vertical-align: middle; font-size: 15.5px; border-color: var(--line-soft); padding-top: 14px; padding-bottom: 14px; } .table tbody tr:hover td { background: #fafbff; } .table .job-no { font-weight: 700; color: var(--indigo); font-size: 15px; } .table-responsive > .table .badge-status { white-space: normal; text-align: center; line-height: 1.3; } .table-empty { padding: 44px; text-align: center; color: #a3aabb; font-size: 14px; } /* ---------- ช่องกรอกเวลา STD Hour (ชั่วโมง / นาที) — มาตรฐานกลาง ---------- markup มาตรฐานสร้างจาก GF::stdHourInput() ฝั่ง PHP และคุมการพิมพ์ด้วย layout/std-hour-input.js ช่องชั่วโมงกว้างพอสำหรับ 3 หลัก (0-999) ช่องนาที 2 หลัก (0-59) */ .hm-input { display: inline-flex; align-items: center; gap: 5px; } .hm-input input { width: 68px; text-align: right; font-weight: 700; color: var(--indigo); -moz-appearance: textfield; } .hm-input input[data-std-hour="m"] { width: 58px; } .hm-input input::-webkit-outer-spin-button, .hm-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .hm-unit { font-size: 11.5px; color: var(--muted); font-weight: 600; } .form-hint { margin-top: 5px; font-size: 12.5px; color: var(--muted); } /* ---------- Pill tabs (แบบแท็บปกติ) ---------- */ .pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .pill-tab { padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; background: #fff; color: #5c6478; border: 1px solid var(--line); } .pill-tab.active { background: var(--indigo); color: #fff; border-color: var(--indigo); box-shadow: 0 6px 16px rgba(79,70,229,.26); } .pill-tab .cnt { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--muted); background: #f1f2f6; border-radius: 99px; padding: 1px 7px; } .pill-tab.active .cnt { color: #fff; background: rgba(255,255,255,.25); } /* ---------- Action icon buttons ---------- */ .btn-icon-view, .btn-icon-edit, .btn-icon-approve, .btn-icon-return, .btn-icon-delete { cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #8890a3; transition: background .15s, color .15s, border-color .15s; } .btn-icon-view:hover, .btn-icon-edit:hover { background: var(--indigo-soft); border-color: #d5d9ea; color: var(--indigo); } .btn-icon-approve:hover { background: #dcfce7; border-color: #bbf7d0; color: #15803d; } .btn-icon-return:hover, .btn-icon-delete:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; } /* ---------- Tooltip ---------- */ .gtooltip { position: fixed; transform: translate(-50%, -100%); margin-top: -7px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; padding: 5px 9px; border-radius: 6px; pointer-events: none; z-index: 9999; display: none; } .gtooltip.show { display: block; } .gtooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--navy); } /* ---------- Chips ---------- */ .chip { padding: 5px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; cursor: pointer; background: #f3f4f6; color: var(--muted-2); display: inline-block; user-select: none; } .chip.on { background: var(--indigo-soft); color: var(--indigo-dark); } /* ---------- Forms ---------- */ .form-label { font-size: 13px; font-weight: 600; color: #4b5568; margin-bottom: 6px; } .form-control, .form-select { font-size: 14px; border-color: #dfe3ee; border-radius: var(--radius-sm); font-family: var(--font); } .form-control:focus, .form-select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } /* ---------- Searchable select (dropdown ที่แปลงมาจาก