/* ========================================================================= TriplebLab Portal — สไตล์หลัก (mobile-first) เขียนจากจอเล็กขึ้นไปหาจอใหญ่ · ปุ่มและช่องกรอกใหญ่พอสำหรับใช้นิ้วในโรงเรือน ชุดสีกราฟ (--series-*) ผ่านการตรวจ CVD / contrast ทั้งโหมดสว่างและมืด ========================================================================= */ /* --- ชุดสีตามแนวทางของ supabase -------------------------------------------- * โทนเทาเกือบขาวดำทำงานโครงสร้างทั้งหมด (สว่าง = Radix Slate, มืด = Radix Gray) * ส่วนสีเขียว #3ecf8e ใช้เป็น "สัญญาณ" เท่านั้น — ปุ่มหลัก เมนูที่เปิดอยู่ ลิงก์ * ไม่ใช่ของตกแต่ง * * ระดับความสูงต่ำของกล่องสื่อด้วยเส้นขอบ 1px ไม่ใช่เงา เงาจึงเหลือบางมาก * ไว้กันของลอยทับกันเฉยๆ (เช่น เมนูที่กางออกมา) * * ข้อควรระวัง: #3ecf8e สว่างเกินกว่าจะเอาไปเป็นตัวอักษรบนพื้นขาว (1.8:1) * โหมดสว่างจึงใช้เขียวเข้มสำหรับตัวหนังสือ/ปุ่ม แล้วเก็บเขียวสดไว้ที่ * --brand-accent สำหรับงานตกแต่งที่ไม่ต้องอ่าน (จุด เส้น แถบ) */ :root { color-scheme: light; --surface-0: #f8f9fa; --surface-1: #ffffff; --surface-2: #f1f3f5; --border: #e3e6e8; --border-strong: #d0d5d9; --text-primary: #11181c; --text-secondary: #46545c; --text-muted: #687076; --brand: #0d7a4f; --brand-strong: #085c3b; --brand-accent: #3ecf8e; --brand-soft: #e7f7ef; --on-brand: #ffffff; /* สีตัวอักษรบนป้ายสี — เข้มกว่าสีเติมพื้น เพราะสีเดียวกันใช้สองหน้าที่ไม่ได้ (สีเติมพื้น/จุดในกราฟต้องสด ส่วนตัวหนังสือต้องเข้มพอให้อ่านออก) */ --good-text: #067a55; --warn-text: #855100; --bad-text: #b42318; --blue-text: #1c5fad; --purple-text: #5636bd; /* ชุดสีเชิงหมวดหมู่ (categorical) — ลำดับคงที่ ห้ามวนซ้ำ */ --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --status-good: #1baf7a; --status-warn: #eda100; --status-bad: #d92d20; --purple: #6b4fd8; /* แดงเข้มสำหรับปุ่มทึบ — ตัวอักษรขาวบนสีนี้ผ่าน contrast 5.6:1 */ --danger-solid: #c62828; --danger-solid-strong: #a81f1f; --grid: #eceef0; --shadow: 0 1px 2px rgba(17, 24, 28, .05); /* มุมโค้งน้อย ๆ แบบเครื่องมือของนักพัฒนา ไม่ใช่แบบแอปมือถือมนๆ */ --radius: 6px; --radius-sm: 4px; --tap: 44px; /* ขนาดพื้นที่กดขั้นต่ำ */ --bottomnav-h: 62px; --safe-bottom: env(safe-area-inset-bottom, 0px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-0: #131313; --surface-1: #1c1c1c; --surface-2: #232323; --border: #2e2e2e; --border-strong: #3e3e3e; --text-primary: #ededed; --text-secondary: #c5c5c5; --text-muted: #a0a0a0; --brand: #3ecf8e; --brand-strong: #62dda6; --brand-accent: #3ecf8e; --brand-soft: #10241b; --on-brand: #0b1410; --good-text: #4ec99a; --warn-text: #e0aa4d; --bad-text: #f08a80; --blue-text: #6cb0f5; --purple-text: #bcaaff; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --status-good: #199e70; --status-warn: #c98500; --status-bad: #e66767; --purple: #a898f0; --danger-solid: #c62828; --danger-solid-strong: #a81f1f; --grid: #2a2a2a; --shadow: 0 1px 2px rgba(0, 0, 0, .35); } } /** * ผู้ใช้กดสลับเป็นโหมดมืดเอง (ปุ่มบนแถบหัวเรื่องเขียน data-theme ไว้ที่ ) * * ค่าต้องเหมือนบล็อกด้านบนทุกตัว มีเทสต์เทียบให้อยู่แล้วว่าไม่หลุดจากกัน * (CSS รวมสองบล็อกนี้เป็นอันเดียวไม่ได้ เพราะกฎในกรอบ @media * ไม่มีทางทำงานตอนเครื่องตั้งเป็นโหมดสว่าง) */ :root[data-theme="dark"] { color-scheme: dark; --surface-0: #131313; --surface-1: #1c1c1c; --surface-2: #232323; --border: #2e2e2e; --border-strong: #3e3e3e; --text-primary: #ededed; --text-secondary: #c5c5c5; --text-muted: #a0a0a0; --brand: #3ecf8e; --brand-strong: #62dda6; --brand-accent: #3ecf8e; --brand-soft: #10241b; --on-brand: #0b1410; --good-text: #4ec99a; --warn-text: #e0aa4d; --bad-text: #f08a80; --blue-text: #6cb0f5; --purple-text: #bcaaff; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --status-good: #199e70; --status-warn: #c98500; --status-bad: #e66767; --purple: #a898f0; --danger-solid: #c62828; --danger-solid-strong: #a81f1f; --grid: #2a2a2a; --shadow: 0 1px 2px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } /* ให้ hidden ชนะ display ของคลาสอื่นเสมอ (ใช้กับช่องที่โชว์ตามเงื่อนไข) */ [hidden] { display: none !important; } body { margin: 0; background: var(--surface-0); color: var(--text-primary); font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4 { margin: 0 0 .25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.011em; } h1 { font-size: 1.3rem; } h2 { font-size: 1.05rem; } h3 { font-size: .95rem; } p { margin: 0 0 .5rem; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--text-muted); } .small { font-size: .85rem; } .right { text-align: right; } .nowrap { white-space: nowrap; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* --- โครงหน้า: มือถือ ----------------------------------------------------- */ .shell { display: flex; flex-direction: column; min-height: 100vh; } .sidebar { display: none; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .9rem; background: var(--surface-1); border-bottom: 1px solid var(--border); } .topbar-title { min-width: 0; } .topbar h1 { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb { color: var(--text-muted); font-size: .78rem; margin: 0; } .backlink { display: inline-block; font-size: .82rem; color: var(--text-muted); margin-bottom: .1rem; } .topbar-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .topbar-actions { display: none; } .content { padding: .9rem .9rem calc(var(--bottomnav-h) + var(--safe-bottom) + 1.5rem); display: flex; flex-direction: column; gap: .9rem; } /* --- แถบเมนูล่าง (มือถือ) ------------------------------------------------- */ .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: stretch; background: var(--surface-1); border-top: 1px solid var(--border); padding-bottom: var(--safe-bottom); } .bottomnav-item, .bottomnav-more > summary { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: .35rem .2rem; min-height: var(--bottomnav-h); color: var(--text-muted); font-size: .68rem; font-weight: 550; text-align: center; cursor: pointer; list-style: none; } .bottomnav-item span:last-child, .bottomnav-more > summary span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .bottomnav-item:hover { text-decoration: none; } .bottomnav-icon { font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .bottomnav-item.is-active { color: var(--brand); } .bottomnav-more { flex: 1; min-width: 0; position: relative; } .bottomnav-more > summary::-webkit-details-marker { display: none; } .bottomnav-more[open] > summary { color: var(--brand); } .bottomnav-sheet { position: absolute; bottom: 100%; right: 0; min-width: 220px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow); padding: .5rem; display: flex; flex-direction: column; } .bottomnav-sheet a { padding: .7rem .6rem; border-radius: var(--radius-sm); color: var(--text-primary); min-height: var(--tap); display: flex; align-items: center; gap: .5rem; } .bottomnav-sheet a:hover { background: var(--surface-2); text-decoration: none; } /* --- เมนูผู้ใช้ ------------------------------------------------------------ */ .usermenu { position: relative; } .usermenu summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; padding: .25rem; border-radius: 999px; min-height: var(--tap); } .usermenu summary::-webkit-details-marker { display: none; } .usermenu-name { display: none; } .usermenu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: .5rem; min-width: 230px; display: flex; flex-direction: column; gap: .1rem; } .usermenu-panel > .muted { padding: .2rem .5rem .4rem; margin: 0; border-bottom: 1px solid var(--border); } .usermenu-panel a { padding: .6rem .5rem; border-radius: var(--radius-sm); color: var(--text-primary); min-height: var(--tap); display: flex; align-items: center; gap: .4rem; } .usermenu-panel a:hover { background: var(--surface-2); text-decoration: none; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex: 0 0 36px; object-fit: cover; /* พยัญชนะไทยที่มีสระบน/วรรณยุกต์สูงกว่ากรอบตัวอักษรปกติ ถ้าไม่ตัดขอบ ตัวย่อในวงกลมจะโผล่ออกไปนอกวง (เช่น "ฐ" ที่หัวตัวสูง) */ overflow: hidden; line-height: 1; } .avatar-empty { background: var(--surface-2); color: var(--text-muted); } .avatar-sm { width: 28px; height: 28px; flex-basis: 28px; font-size: .78rem; } .avatar-xl { width: 92px; height: 92px; flex-basis: 92px; font-size: 2.2rem; } /* --- แท็บภายในหน้า -------------------------------------------------------- */ .tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: 0 .6rem; background: var(--surface-1); border-bottom: 1px solid var(--border); position: sticky; top: 57px; z-index: 25; } .tabs::-webkit-scrollbar { display: none; } .tab { padding: .7rem .7rem; white-space: nowrap; color: var(--text-secondary); border-bottom: 2px solid transparent; font-weight: 550; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; } .tab:hover { text-decoration: none; color: var(--text-primary); } .tab.is-active { color: var(--brand); border-bottom-color: var(--brand); } .tab-count { background: var(--surface-2); border-radius: 999px; padding: 0 .4rem; font-size: .75rem; color: var(--text-muted); font-weight: 600; } /* --- การ์ด ---------------------------------------------------------------- */ .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .card-head p { margin: 0; font-size: .82rem; } .card-actions { display: flex; gap: .4rem; flex-wrap: wrap; } .card-body { padding: 1rem; } .card-body > :last-child { margin-bottom: 0; } .grid { display: grid; gap: .9rem; grid-template-columns: 1fr; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; } .stat { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem; } .stat-label { color: var(--text-muted); font-size: .78rem; margin: 0 0 .1rem; } .stat-value { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; } .stat-unit { font-size: .78rem; font-weight: 500; color: var(--text-muted); margin-left: .25rem; } .stat-hint { color: var(--text-muted); font-size: .76rem; margin: .1rem 0 0; } .stat-brand .stat-value { color: var(--brand); } /* ค่าที่เป็นข้อความยาว (เงิน / ระยะเวลา) ใช้ตัวเล็กลง จะได้ไม่ตัดบรรทัดกลางตัวเลข */ .stat-money .stat-value, .stat-duration .stat-value { font-size: 1.15rem; } /* --- ตาราง: จอเล็กแปลงเป็นการ์ดซ้อน --------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; } .table th, .table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; } .table th { color: var(--text-muted); font-weight: 500; font-size: .72rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; } .table tbody tr:last-child td { border-bottom: 0; } .table-compact th, .table-compact td { padding: .35rem .5rem; } /* เลขที่ใบเป็นตัวอ้างอิงกันเวลาคุยงาน ใช้ฟอนต์ความกว้างเท่ากันทุกตัว จะได้กวาดตาหาเลขในคอลัมน์ได้เร็ว ไม่ต้องอ่านทีละตัว */ .cell-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; white-space: nowrap; } @media (max-width: 700px) { .table-stack thead { display: none; } .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; } .table-stack tr { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .6rem; margin-bottom: .6rem; background: var(--surface-1); } .table-stack tr:last-child { margin-bottom: 0; } .table-stack td { border: 0; padding: .2rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; } .table-stack td::before { content: attr(data-label); color: var(--text-muted); font-size: .78rem; flex: 0 0 auto; font-weight: 600; } .table-stack td[data-label=""]::before { content: none; } .table-stack td > * { text-align: right; } /* ช่องแรกของแต่ละการ์ดทำหน้าที่เป็นหัวเรื่อง */ .table-stack td:first-child { display: block; padding-bottom: .35rem; margin-bottom: .3rem; border-bottom: 1px dashed var(--border); } .table-stack td:first-child::before { content: none; } .table-stack td:first-child > * { text-align: left; } /* ตัวแก้ไขรายการกางเต็มความกว้างของการ์ด ไม่ถูกดันไปชิดขวา */ .table-stack td > .row-edit { flex: 1 1 100%; text-align: left; } /* ปุ่มแก้ไขปักไว้มุมบนขวาของการ์ด ส่วนฟอร์มยังกางออกด้านล่างตามปกติ ทุกกฎอยู่ใต้ :has() — เบราว์เซอร์เก่าที่ไม่รองรับจะข้ามทั้งชุด แล้วปุ่มกลับไปอยู่ท้ายการ์ดแบบเดิม ไม่หลุดตำแหน่ง */ .table-stack tr:has(.row-edit) { position: relative; } .table-stack tr:has(.row-edit) td:first-child { padding-right: 5.5rem; } .table-stack tr:has(.row-edit) .row-edit > summary { position: absolute; top: .5rem; right: .6rem; margin: 0; } .table-stack tr:has(.row-edit) td:has(> .row-edit:not([open])) { padding: 0; } } /* --- ปุ่ม / ฟอร์ม --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .4rem; justify-content: center; padding: .6rem 1rem; min-height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; text-decoration: none; touch-action: manipulation; } .btn:hover { background: var(--surface-2); text-decoration: none; } @media (prefers-reduced-motion: no-preference) { .btn, .nav-item, .chip, .card, .input { transition: background-color .12s ease, border-color .12s ease, color .12s ease; } } .btn:active { transform: translateY(1px); } /* ปุ่มที่กดไม่ได้ต้องดูออกว่ากดไม่ได้ ไม่ใช่สีเดียวกับปุ่มปกติ */ .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn[disabled]:active { transform: none; } .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; } .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } .btn-danger { color: var(--status-bad); border-color: var(--status-bad); background: transparent; } .btn-danger:hover { background: color-mix(in srgb, var(--status-bad) 12%, transparent); } /* ปุ่มแดงแบบทึบ — ใช้กับการกระทำที่จบขั้นตอนและย้อนกลับไม่ได้ เช่น ออกตู้ */ .btn-stop { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; } .btn-stop:hover { background: var(--danger-solid-strong); border-color: var(--danger-solid-strong); } .btn-ghost { border-color: transparent; background: transparent; color: var(--text-secondary); } .btn-sm { padding: .35rem .65rem; min-height: 36px; font-size: .85rem; } .btn-block { width: 100%; } .btn-lg { padding: .95rem 1.2rem; min-height: 56px; font-size: 1.05rem; border-radius: var(--radius); } .inline { display: inline; } .form { display: flex; flex-direction: column; gap: .85rem; } .form-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; } .form-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; } .form-actions .btn { flex: 1 1 auto; } .field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .field-label { font-size: .85rem; font-weight: 600; color: var(--text-secondary); } .field-hint { font-size: .78rem; color: var(--text-muted); } .req { color: var(--status-bad); font-style: normal; margin-left: .15rem; } .input { width: 100%; padding: .65rem .7rem; font: inherit; font-size: 16px; /* 16px กัน iOS ซูมอัตโนมัติ */ /* min-width: 0 จำเป็นเพราะ input[type=date] บน iOS มีความกว้างขั้นต่ำในตัว ถ้าไม่ตั้งจะดันจนล้นออกนอกคอลัมน์ */ min-width: 0; min-height: var(--tap); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-primary); } .input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); } textarea.input { resize: vertical; min-height: 84px; line-height: 1.5; } /* ช่องกรอกที่อยู่ในเซลล์ตาราง — แคบและเตี้ยกว่าปกติ ไม่ให้แถวสูงจนอ่านยาก */ .input-cell { width: 100%; max-width: 7.5rem; padding: .35rem .5rem; min-height: 0; font-size: .88rem; } .input-note { max-width: 12rem; } .row-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } /* --- ปฏิทินงาน ------------------------------------------------------------- */ .cal-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .8rem; font-size: .78rem; color: var(--text-muted); } .cal-legend-item { display: inline-flex; align-items: center; gap: .3rem; } .cal-dot { width: .55rem; height: .55rem; border-radius: 999px; } .cal-dot-blue { background: var(--series-1); } .cal-dot-purple { background: var(--purple); } .cal-dot-green { background: var(--status-good); } .cal-dot-amber { background: var(--status-warn); } .cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; } .cal th { padding: .4rem; font-size: .75rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); } .cal td { border: 1px solid var(--border); vertical-align: top; padding: .3rem; height: 5.5rem; } .cal-empty { background: var(--surface-2); border-color: var(--border); } .cal-daynum { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .2rem; } .cal-day.is-today { background: var(--brand-soft); } .cal-day.is-today .cal-daynum { color: var(--brand-strong); font-weight: 700; } .cal-event { display: flex; align-items: center; gap: .25rem; margin-bottom: .18rem; padding: .12rem .3rem; border-radius: var(--radius-sm); font-size: .72rem; line-height: 1.35; text-decoration: none; color: var(--text-primary); border-left: 3px solid var(--border-strong); background: var(--surface-2); } /* งานที่เราเป็นผู้รับผิดชอบเน้นให้เห็นก่อน */ .cal-event.is-mine { font-weight: 650; } .cal-event-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-event-blue { border-left-color: var(--series-1); } .cal-event-purple { border-left-color: var(--purple); } .cal-event-green { border-left-color: var(--status-good); } .cal-event-amber { border-left-color: var(--status-warn); } .cal-list { list-style: none; margin: 0; padding: 0; } .cal-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; padding: .5rem 0; border-bottom: 1px solid var(--border); } .cal-row:last-child { border-bottom: 0; } .cal-row-when { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-secondary); flex: 0 0 auto; } .cal-row-title { font-weight: 600; } /* แถบเลือกช่วงเวลาและกรองชนิดงาน */ .cal-controls { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; } .chips { display: flex; flex-wrap: wrap; gap: .35rem; } .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); font-size: .8rem; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .chip:hover { border-color: var(--border-strong); color: var(--text-primary); } .chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; } /* ชนิดงานที่เลือกอยู่ใช้สีของชนิดนั้น จะได้โยงกับสีบนตารางได้ทันที */ .chip-blue.is-active { background: var(--series-1); border-color: var(--series-1); } .chip-purple.is-active { background: var(--purple); border-color: var(--purple); } .chip-green.is-active { background: var(--status-good); border-color: var(--status-good); } .chip-amber.is-active { background: var(--status-warn); border-color: var(--status-warn); color: #14180f; } .cal-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; } .cal-range .field { flex: 1 1 9rem; margin: 0; } .cal-range .btn { flex: 0 0 auto; } /* ไตรมาส = สามตารางเดือน เรียงข้างกันเมื่อจอกว้างพอ */ /* minmax(0,1fr) กันช่องกริดกว้างตามเนื้อหาจนดันออกนอกจอ ตารางที่กว้างกว่าจอจะได้เลื่อนอยู่ในกรอบ .table-wrap ของตัวเองแทน */ .cal-months { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); } .cal-month-name { font-size: .9rem; margin-bottom: .4rem; color: var(--text-secondary); } .cal-compact { min-width: 380px; } .cal-compact td { height: 3.6rem; padding: .2rem; } .cal-compact .cal-daynum { font-size: .7rem; } .cal-compact .cal-event { font-size: .65rem; padding: .06rem .22rem; } /* มุมมองสัปดาห์มีแค่ 7 ช่อง จึงให้ช่องสูงขึ้นเพื่อแสดงรายการได้ครบโดยไม่ต้องย่อ */ .cal-tall td { height: 9rem; } /* กลุ่มรูปผู้รับผิดชอบ — ซ้อนเหลื่อมกันเล็กน้อยให้ประหยัดที่ในตาราง */ .people { display: inline-flex; align-items: center; gap: .25rem; } .people .avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: .72rem; } /* --- หน้าโปรไฟล์ ----------------------------------------------------------- */ .profile-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .profile-id { min-width: 0; } .profile-name { font-size: 1.25rem; margin: 0; } .profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; } .profile-position { margin: .2rem 0 0; color: var(--text-secondary); font-weight: 600; } /* รหัสผ่านชั่วคราว — ตัวใหญ่ อ่านออกเสียงบอกกันได้ไม่ผิดตัว */ .temp-password { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; padding: .8rem 1rem; margin: 0 0 1rem; text-align: center; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); user-select: all; } /* รูปในตารางผู้ใช้อยู่กับข้อความสองบรรทัด จึงชิดบนแทนกึ่งกลาง */ .table .people { align-items: flex-start; } /* --- ผังห้องเลี้ยง --------------------------------------------------------- */ .rack + .rack { margin-top: 1rem; } .rack-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; } .rack-name { font-size: .85rem; color: var(--text-secondary); margin: 0; } /* เครื่องมือแก้ไข/ลบทั้งห้องหรือทั้งชั้นวาง — พับเก็บไว้ไม่ให้เกะกะผังห้อง * * กางแบบดันเนื้อหาลง ไม่ใช่ลอยทับ เพราะ .card ตั้ง overflow: hidden ไว้ * (เพื่อให้เนื้อหาโดนตัดตามมุมโค้ง) กล่องที่ลอยอยู่จึงถูกตัดหายไปครึ่งหนึ่ง * แบบดันลงยังได้ผลเหมือนกันทุกขนาดจอ ไม่ต้องแยกกฎของมือถือด้วย */ .group-tools > summary { list-style: none; cursor: pointer; display: inline-flex; min-height: 32px; padding: .2rem .55rem; } .group-tools > summary::-webkit-details-marker { display: none; } /* กางแล้วกินเต็มบรรทัด กล่องจะได้ไม่ไปเบียดปุ่มอื่นในแถวเดียวกัน */ .group-tools[open] { flex-basis: 100%; } .group-tools-panel { margin-top: .5rem; max-width: 340px; display: flex; flex-direction: column; gap: .6rem; padding: .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .group-tools-form { display: flex; flex-direction: column; gap: .5rem; } .rack-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; } .slot { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .65rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; color: var(--text-primary); } .slot:hover { border-color: var(--border-strong); } /* ช่องที่มีของวางอยู่ต้องเด่นกว่าช่องว่าง เพราะเป็นสิ่งที่คนมาหา */ .slot.is-used { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-soft); } .slot.is-full { border-color: color-mix(in srgb, var(--status-warn) 55%, transparent); } .slot-level { font-weight: 650; font-size: .9rem; } .slot-use { font-size: .78rem; } .slot-cap { font-size: .72rem; } select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; } .checklist { display: flex; flex-wrap: wrap; gap: .4rem; } .check { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: .4rem .75rem; min-height: 40px; cursor: pointer; } .check:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); font-weight: 600; } .check input { width: 18px; height: 18px; accent-color: var(--brand); } /* ตัวเลือกแบบปุ่มใหญ่ (รอบเช้า/บ่าย, Clean/Cont) */ .choice { display: flex; gap: .5rem; flex-wrap: wrap; } .choice label { flex: 1 1 120px; display: flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .7rem .6rem; min-height: var(--tap); cursor: pointer; font-weight: 600; font-size: .92rem; } .choice label:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); } .choice input { position: absolute; opacity: 0; pointer-events: none; } /* แถบตัวกรอง — กริดคอลัมน์กว้างเท่ากัน อยู่ในกล่องของตัวเองเหมือนการ์ดอื่น */ .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; align-items: end; padding: .85rem .9rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* จอเล็กให้ปุ่มกรองเต็มแถว จะได้ไม่ไปเบียดช่องวันที่ */ .filters .btn { grid-column: 1 / -1; } /* ฟอร์มสั้น ๆ ที่วางในเซลล์ตาราง (เช่น เปลี่ยนตำแหน่งผู้ใช้) */ .inline-form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } /* --- ป้ายสถานะ ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .badge-slate { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); } .badge-green { background: color-mix(in srgb, var(--status-good) 14%, var(--surface-1)); color: var(--good-text); border-color: color-mix(in srgb, var(--status-good) 32%, transparent); } .badge-blue { background: color-mix(in srgb, var(--series-1) 14%, var(--surface-1)); color: var(--blue-text); border-color: color-mix(in srgb, var(--series-1) 32%, transparent); } .badge-amber { background: color-mix(in srgb, var(--status-warn) 16%, var(--surface-1)); color: var(--warn-text); border-color: color-mix(in srgb, var(--status-warn) 34%, transparent); } .badge-red { background: color-mix(in srgb, var(--status-bad) 12%, var(--surface-1)); color: var(--bad-text); border-color: color-mix(in srgb, var(--status-bad) 30%, transparent); } .badge-purple { background: color-mix(in srgb, var(--purple) 14%, var(--surface-1)); color: var(--purple-text); border-color: color-mix(in srgb, var(--purple) 30%, transparent); } /* --- แถบความคืบหน้า -------------------------------------------------------- */ .progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); min-width: 80px; display: inline-block; vertical-align: middle; width: 100%; max-width: 160px; } .progress-fill { height: 100%; border-radius: 999px; } .progress-green { background: var(--status-good); } .progress-blue { background: var(--series-1); } .progress-amber { background: var(--status-warn); } .progress-label { font-size: .8rem; color: var(--text-muted); margin-left: .4rem; } .qty { font-variant-numeric: tabular-nums; font-weight: 600; } .qty-unit { font-weight: 400; color: var(--text-muted); font-size: .8rem; margin-left: .2rem; } /* --- การ์ดลงเวลา (หน้าแรก) -------------------------------------------------- */ /* ตอนกำลังจับเวลาอยู่ ใช้พื้นเขียวทึบเรียบ ๆ ไม่ไล่เฉด ตัวอักษรใช้ --on-brand ไม่ใช่ขาวตายตัว เพราะโหมดมืดพื้นเป็นเขียวสด ซึ่งตัวหนังสือขาวบนนั้นอ่านไม่ออกเลย (1.7:1) */ .clock-card { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); border-radius: var(--radius); padding: 1.1rem; } .clock-card h2 { color: var(--on-brand); font-size: 1rem; margin-bottom: .1rem; } .clock-card .clock-time { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } /* ตัวเลขความกว้างเท่ากัน ไม่ให้ขยับไปมาตอนวินาทีเปลี่ยน */ .live-timer { font-variant-numeric: tabular-nums; } .clock-card .clock-meta { opacity: .92; font-size: .85rem; margin: 0; } .clock-card .btn { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); margin-top: .9rem; font-weight: 600; } .clock-card .btn:hover { background: color-mix(in srgb, var(--on-brand) 88%, var(--brand)); } .clock-card .btn-outline { background: transparent; color: var(--on-brand); border-color: color-mix(in srgb, var(--on-brand) 55%, transparent); } .clock-card .btn-outline:hover { background: color-mix(in srgb, var(--on-brand) 16%, transparent); } /* ปุ่มเหลือง — งานที่ค้างรอให้ทำต่อ เช่น ลงรายการในใบบันทึก ตัวอักษรสีเข้มบนพื้นเหลืองได้ contrast 11:1 และเด่นออกมาจากการ์ดเขียว */ .btn-warn, .clock-card .btn-warn { background: #ffc233; border-color: #ffc233; color: #14180f; } .btn-warn:hover, .clock-card .btn-warn:hover { background: #f0ad14; border-color: #f0ad14; } .clock-idle { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); } .clock-idle h2 { color: var(--text-primary); } .clock-idle .clock-time { color: var(--text-primary); } .clock-idle .btn { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .clock-row { display: flex; gap: .5rem; flex-wrap: wrap; } .clock-row .btn { flex: 1 1 140px; margin-top: .9rem; } .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; /* จุดกะพริบอยู่บนการ์ดเขียว จึงต้องใช้สีคู่ของพื้นนั้น ไม่ใช่เขียวอ่อนตายตัว ซึ่งจะจมหายไปกับพื้นเขียวสดของโหมดมืด */ background: var(--on-brand); opacity: .85; margin-right: .35rem; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* --- กราฟ ----------------------------------------------------------------- */ .chart { margin: 0; } .chart-svg { width: 100%; height: auto; display: block; overflow: visible; } .chart-grid { stroke: var(--grid); stroke-width: 1; } .chart-track { fill: var(--surface-2); } .chart-axis { fill: var(--text-muted); font-size: 11px; } .chart-axis-strong { fill: var(--text-secondary); font-size: 12px; font-weight: 500; } .chart-value { fill: var(--text-secondary); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .mark { transition: opacity .12s ease; } .chart-svg:hover .mark { opacity: .55; } .chart-svg .mark:hover { opacity: 1; } .chart-svg .dot { opacity: 0; } .chart-svg:hover .dot { opacity: 1; } .chart-table { margin-top: .75rem; } .chart-table summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; min-height: var(--tap); display: flex; align-items: center; } /* --- รูปภาพ --------------------------------------------------------------- */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; } .photo { margin: 0; } .photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); } .photo-remove { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-muted); margin-top: .25rem; } .photo a { display: block; cursor: zoom-in; } .photo a:focus-visible img { outline: 2px solid var(--brand); outline-offset: 2px; } /* --- ดูรูปเต็มจอ ----------------------------------------------------------- */ .lightbox { /* inset: 0 + ขนาด auto ทำให้กล่องพอดีจอเป๊ะ ไม่ต้องพึ่งหน่วย vh/dvh ซึ่งเพี้ยนได้บนมือถือเวลาแถบที่อยู่เว็บยืดหด และต้องล้าง max-width/max-height ของเบราว์เซอร์ที่บีบ ไว้ด้วย */ position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; display: none; place-items: center; } /* minmax(0, 1fr) สำคัญมาก: บังคับให้แถวของ grid สูงเท่ากล่อง (ไม่ใช่เท่ารูป) ถ้าปล่อยเป็น auto แถวจะยืดตามความสูงจริงของรูป แล้ว max-height ของรูป ที่คิดเป็นเปอร์เซ็นต์ก็จะอิงแถวที่ยืดไปแล้ว = ไม่ได้ย่ออะไรเลย ส่วน 0 ตัวหน้าคือการอนุญาตให้แถวหดเล็กกว่าเนื้อหาข้างในได้ */ .lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr); } .lightbox::backdrop { background: rgba(0, 0, 0, .85); } .lightbox-img { max-width: calc(100% - 5rem); max-height: calc(100% - 6rem); object-fit: contain; border-radius: var(--radius-sm); cursor: zoom-out; } /* กล่องพอดีจออยู่แล้ว ปุ่มกับคำบรรยายจึงอิงกล่องได้ตรง ๆ */ .lightbox-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .8rem 1rem; text-align: center; font-size: .82rem; color: #f4f5f0; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); pointer-events: none; } .lightbox-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.5rem; line-height: 1; } .lightbox-btn:hover { background: rgba(0, 0, 0, .8); } .lightbox-close { top: .75rem; right: .75rem; font-size: 1.1rem; } .lightbox-prev { top: 50%; left: .5rem; transform: translateY(-50%); } .lightbox-next { top: 50%; right: .5rem; transform: translateY(-50%); } /* --- รูปโปรไฟล์: คลิกที่รูปเพื่อเปลี่ยน ------------------------------------ */ .avatar-edit { display: flex; flex-direction: column; align-items: center; gap: .5rem; } /* ตัวรูปเป็นปุ่มในตัว ไม่ต้องมีการ์ดอัปโหลดแยกอีกกล่อง */ .avatar-edit-target { position: relative; display: block; cursor: pointer; border-radius: 50%; line-height: 0; } .avatar-edit-target .avatar { display: block; } /* ป้าย "เปลี่ยนรูป" ทับอยู่ครึ่งล่างของวงกลม จอสัมผัสจึงเห็นตลอดว่ากดได้ ไม่ต้องเอาเมาส์ไปชี้ (ซึ่งบนมือถือทำไม่ได้) */ .avatar-edit-hint { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: .2rem; padding: .2rem 0 .3rem; background: rgba(0, 0, 0, .55); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.2; border-radius: 0 0 92px 92px / 0 0 46px 46px; } .avatar-edit-target:hover .avatar-edit-hint { background: rgba(0, 0, 0, .75); } .uploader-input:focus-visible + .avatar-edit-target { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 50%; } .avatar-edit-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; } .avatar-edit-actions:empty { display: none; } /* ปุ่มที่มีไว้เผื่อคนปิด JS — มี JS เมื่อไหร่ก็ไม่ต้องใช้ เพราะเลือกไฟล์แล้วส่งเอง */ :root[data-js] .nojs-only { display: none; } /* --- กล่องเลือกแบบพับได้ + พิมพ์ค้นหา -------------------------------------- */ .picker { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); } .picker-summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; cursor: pointer; list-style: none; min-height: var(--tap); } .picker-summary::-webkit-details-marker { display: none; } /* ลูกศรบอกว่ากางได้ หมุนลงเมื่อเปิด */ .picker-summary::after { content: '▾'; color: var(--text-muted); transition: transform .12s ease; } .picker[open] .picker-summary::after { transform: rotate(180deg); } .picker-summary .field-label { margin: 0; } .picker-count { color: var(--text-muted); font-size: .82rem; margin-left: auto; } .picker-panel { padding: .6rem .7rem .7rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; } /* รายการยาวแค่ไหนก็ไม่ดันหน้าจนหาปุ่มบันทึกไม่เจอ */ .picker-panel .checklist { max-height: 260px; overflow-y: auto; } .picker-chosen { margin: .35rem 0 0; font-size: .82rem; color: var(--text-secondary); } /* --- ช่องแนบรูป: เลือกถ่ายรูป หรือเลือกจากคลังภาพ ------------------------- */ .uploader-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .uploader-btn { flex: 1 1 140px; cursor: pointer; white-space: nowrap; font-size: .9rem; padding-inline: .6rem; } /* ซ่อน input แต่ยังเข้าถึงได้ด้วยคีย์บอร์ดและ screen reader */ .uploader-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .uploader-input:focus-visible + .uploader-btn { outline: 2px solid var(--brand); outline-offset: 2px; } .uploader-status { margin: .35rem 0 0; } .uploader-status.is-ready { color: var(--brand); font-weight: 600; } .uploader-preview:empty { display: none; } .uploader-preview { margin-top: .5rem; } .uploader-clear { background: none; border: 0; padding: 0; margin-left: .5rem; color: var(--status-bad); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; } /* --- ความคิดเห็น ---------------------------------------------------------- */ .comments { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; } .comment { display: flex; gap: .6rem; align-items: flex-start; } .comment-body { flex: 1; min-width: 0; background: var(--surface-2); border-radius: var(--radius); padding: .6rem .8rem; } .comment-meta { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; margin: 0 0 .15rem; flex-wrap: wrap; } .comment-meta .muted { font-size: .78rem; } .comment-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .comment-form { display: flex; flex-direction: column; gap: .5rem; } /* --- อื่น ๆ --------------------------------------------------------------- */ .flash { margin: .7rem .9rem 0; padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid; font-size: .9rem; } .flash-ok { background: color-mix(in srgb, var(--status-good) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-good) 35%, transparent); color: var(--text-primary); } .flash-error { background: color-mix(in srgb, var(--status-bad) 12%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-bad) 35%, transparent); color: var(--text-primary); } .flash-note { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-secondary); } .flash-demo { background: color-mix(in srgb, var(--status-warn) 13%, var(--surface-1)); border-color: color-mix(in srgb, var(--status-warn) 38%, transparent); color: var(--text-primary); } /* --- ปุ่มสลับธีมสว่าง/มืด --------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-secondary); font-size: 1.05rem; line-height: 1; cursor: pointer; } .theme-toggle:hover { border-color: var(--border-strong); } /* ไอคอนบอก "กดแล้วจะไปโหมดไหน" ไม่ใช่โหมดที่อยู่ตอนนี้ */ .theme-toggle .to-light { display: none; } :root[data-theme="dark"] .theme-toggle .to-light { display: block; } :root[data-theme="dark"] .theme-toggle .to-dark { display: none; } /* หน้า login/สมัครใช้งานไม่มีแถบหัวเรื่อง จึงลอยไว้มุมขวาบน */ body.bare .theme-toggle { position: fixed; top: .9rem; right: .9rem; z-index: 5; } /* แถบเตือนที่มีปุ่มให้กดต่อ เช่น "มีคำขอเข้าใช้งานรออนุมัติ" บนหน้าแรก */ .notice { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .75rem .9rem; margin-bottom: .9rem; font-size: .9rem; border: 1px solid color-mix(in srgb, var(--status-warn) 38%, transparent); background: color-mix(in srgb, var(--status-warn) 13%, var(--surface-1)); border-radius: var(--radius-sm); } .notice-action .btn { flex: none; } .empty { padding: 1.4rem 1rem; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .empty p { margin: 0 0 .6rem; } .detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; margin: 0; } .detail-list dt { color: var(--text-muted); font-size: .78rem; } .detail-list dd { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; } /* คำอธิบายสิทธิ์ในตารางตำแหน่ง — ตัวปกติ ไม่หนาเหมือนค่าอื่นใน detail-list */ .role-hint { font-weight: 400; color: var(--text-secondary); font-size: .85rem; } /* หมายเหตุใต้ค่าหลัก เช่น "กำลังดำเนินการ" ใต้จำนวนวันของโครงการ */ .detail-note { display: block; color: var(--text-muted); font-size: .78rem; font-weight: 400; } .tag-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .timeline-item { border-left: 2px solid var(--border); padding-left: .9rem; position: relative; } .timeline-item::before { content: ''; position: absolute; left: -6px; top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface-1); } /* รายการแบบแตะได้ทั้งแถว (ใช้แทนตารางบนมือถือ) */ .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .list-item { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .8rem; background: var(--surface-1); min-height: var(--tap); color: var(--text-primary); } .list-item:hover { background: var(--surface-2); text-decoration: none; } .list-item-main { flex: 1; min-width: 0; } .list-item-title { font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; } .list-item-sub { color: var(--text-muted); font-size: .82rem; } .list-item-end { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; } .chevron { color: var(--text-muted); flex-shrink: 0; } /* จอแคบ: แทนที่จะบีบชื่อจนตัดคำกลางคัน ให้ยกตัวเลข/ป้ายลงมาอยู่บรรทัดล่าง */ @media (max-width: 560px) { .list-item { flex-wrap: wrap; position: relative; padding-right: 1.7rem; gap: 0; } .list-item-main { flex: 1 1 100%; } .list-item-end { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: .4rem; margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--border); } .list-item-end:empty { display: none; } .list-item .chevron { position: absolute; right: .6rem; top: .75rem; } } /* ตารางกรอกรายการเข้าตู้ */ /* แก้ไขหนึ่งบรรทัดในตาราง — ซ่อนฟอร์มไว้ใน
ไม่ให้ตารางรก */ .row-edit > summary { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .4rem .9rem; cursor: pointer; list-style: none; white-space: nowrap; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--brand-strong); font-size: .85rem; font-weight: 600; } .row-edit > summary::-webkit-details-marker { display: none; } .row-edit > summary::marker { content: ''; } .row-edit > summary::after { content: '▾'; font-size: .7rem; } .row-edit[open] > summary::after { content: '▴'; } .row-edit[open] { padding-bottom: .6rem; } .row-edit .form { text-align: left; margin-top: .8rem; } .row-edit .form + form { margin-top: .8rem; } .entry-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; } .entry-form .field-wide { grid-column: 1 / -1; } .totals-row { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: var(--brand-soft); color: var(--brand-strong); border-radius: var(--radius-sm); padding: .7rem .9rem; font-weight: 700; } .totals-row span { font-variant-numeric: tabular-nums; } /* --- หน้า login ----------------------------------------------------------- */ body.bare { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.2rem; } .login { width: 100%; max-width: 400px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 1.5rem; } .login-brand { text-align: center; margin-bottom: 1.2rem; } .login-brand .brand-mark { display: flex; justify-content: center; color: var(--brand); } .login-brand .brand-mark .icon { width: 40px; height: 40px; } .login-brand h1 { font-size: 1.35rem; margin-top: .35rem; } .login .btn { width: 100%; } .login-divider { display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: .8rem; margin: 1rem 0; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .login-hint { margin-top: 1rem; padding: .6rem .75rem; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .8rem; color: var(--text-muted); } .login-hint a { color: var(--brand); font-weight: 600; } .login-forgot { margin: .6rem 0 0; text-align: center; font-size: .82rem; } .btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; } .btn-google:hover { background: #f7f8f8; border-color: #c6c9cd; } /* ปุ่มของ Google ต้องเป็นพื้นขาวตัวหนังสือเข้มตามแนวทางแบรนด์ของเขา ทั้งสองธีม จึงตั้งสีตายตัวไว้ ไม่ใช้ token ของระบบ */ .btn-google[disabled] { opacity: .5; } .google-mark { flex: 0 0 auto; display: block; } .google-account { display: flex; align-items: center; gap: .4rem; } .login-forgot a { color: var(--text-muted); } .login-forgot a:hover { color: var(--brand); } .login-note { margin-bottom: 1rem; padding: .7rem .8rem; font-size: .82rem; line-height: 1.55; background: var(--surface-2); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); } .login .form + .login-hint { text-align: center; } /* ========================================================================= จอกลาง (แท็บเล็ต) ตั้งแต่ 700px ========================================================================= */ @media (min-width: 700px) { .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .form-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .entry-form { grid-template-columns: repeat(4, 1fr); } .filters .btn { grid-column: auto; } .detail-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .topbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .form-actions .btn { flex: 0 0 auto; } } /* ========================================================================= จอใหญ่ (เดสก์ท็อป) ตั้งแต่ 960px — เปลี่ยนเป็น sidebar ========================================================================= */ @media (min-width: 960px) { body { font-size: 15px; } .shell { flex-direction: row; } .bottomnav { display: none; } .sidebar { display: flex; flex-direction: column; width: 240px; flex: 0 0 240px; background: var(--surface-1); border-right: 1px solid var(--border); padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; } .brand { display: flex; gap: .6rem; align-items: center; padding: .5rem .5rem 1rem; color: var(--text-primary); } .brand:hover { text-decoration: none; } .brand-mark { display: inline-flex; color: var(--brand); } .brand strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; } .brand small { color: var(--text-muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; min-height: var(--tap); } .nav-item:hover { background: var(--surface-2); text-decoration: none; color: var(--text-primary); } .nav-item.is-active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; } .nav-icon { width: 1.3rem; display: inline-flex; align-items: center; justify-content: center; } /* ไอคอนเส้นใช้สีเดียวกับข้อความรอบตัว ไม่ต้องมีไฟล์แยกสีสำหรับเมนูที่เปิดอยู่ */ .icon { display: block; flex: 0 0 auto; } .usermenu-panel a .icon, .bottomnav-sheet a .icon { margin-right: .15rem; } .usermenu-panel a, .bottomnav-sheet a { display: flex; align-items: center; gap: .5rem; } .sidebar-foot { margin-top: auto; padding: .5rem; } .topbar { padding: 1.1rem 1.6rem .9rem; align-items: flex-end; } .topbar h1 { font-size: 1.5rem; white-space: normal; } .usermenu-name { display: block; } .usermenu-name strong { display: block; font-size: .9rem; line-height: 1.2; } .usermenu-name small { color: var(--text-muted); font-size: .75rem; } .usermenu summary { border-radius: var(--radius-sm); padding: .3rem .5rem; } .usermenu summary:hover { background: var(--surface-2); } /* จอใหญ่มีเมนูอยู่ที่แถบข้างแล้ว จึงซ่อนเฉพาะรายการเมนูที่ซ้ำกัน ไม่ใช่ทุกลิงก์ที่ไม่ใช่ออกจากระบบ ไม่งั้นลิงก์ใหม่ที่เพิ่มทีหลัง (เช่น โปรไฟล์ของฉัน) จะหายไปเงียบ ๆ โดยไม่มีใครรู้ */ .usermenu-panel .usermenu-nav { display: none; } .tabs { padding: 0 1.6rem; top: 73px; } .content { padding: 1.3rem 1.6rem 3rem; gap: 1.1rem; } .flash { margin: .9rem 1.6rem 0; } .card-body { padding: 1.1rem; } } @media print { .sidebar, .bottomnav, .topbar-right, .card-actions, .comment-form, .tabs { display: none; } body { background: #fff; } .content { padding: 0; } } /* --- หน้าตั้งค่า Lark (/setup) -------------------------------------------- */ .setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; } .setup-step { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm); padding: .7rem .9rem; background: var(--surface-2); } .setup-step.is-ok { border-left-color: var(--status-good); } .setup-step.is-bad { border-left-color: var(--status-bad); } .setup-step-head { display: flex; align-items: center; gap: .5rem; } .setup-mark { font-weight: 700; } .setup-step.is-ok .setup-mark { color: var(--status-good); } .setup-step.is-bad .setup-mark { color: var(--status-bad); } .setup-detail { margin: .25rem 0 0; overflow-wrap: anywhere; } .setup-items, .setup-hints { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; } .setup-items { list-style: none; padding-left: 0; } .setup-items li { padding: .12rem 0; overflow-wrap: anywhere; } .setup-items li.is-ok { color: var(--status-good); } .setup-items li.is-bad { color: var(--status-bad); } .setup-hints li { color: var(--text-secondary); padding: .12rem 0; } .setup-env { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem; overflow-x: auto; font-size: .8rem; line-height: 1.7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; user-select: all; } .setup-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; } .setup-actions .btn { flex: 1 1 160px; } .setup-warn { margin-top: 1.5rem; padding: .75rem .9rem; font-size: .85rem; background: color-mix(in srgb, var(--status-warn) 14%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--status-warn) 35%, transparent); border-radius: var(--radius-sm); } /* --- สูตรอาหาร --------------------------------------------------------- */ /* สรุปส่วนผสมในบรรทัดเดียว — ตัวเลขต้องอ่านง่ายในตารางที่แน่น */ .recipe { font-size: .86rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* ฟอร์มเพิ่มรายการย่อย (สารในสูตร) แยกตัวเองออกจากตารางด้านบน */ .entry-add { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); } .form-title { margin: 0 0 .6rem; font-size: 1rem; } /* --- แถบความคืบหน้าของล็อต ---------------------------------------------- */ /* เปิดหน้ามาต้องเห็นทันทีว่างานไปกองที่ขั้นไหน จึงวางไว้บนสุดก่อนตัวกรอง */ .stage-pipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; } .stage-cell { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit; } .stage-cell.is-active { border-color: var(--brand); background: var(--brand-soft); } .stage-name { font-size: .82rem; color: var(--text-secondary); } .stage-count { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .stage-unit { font-size: .74rem; color: var(--text-secondary); } @media (min-width: 700px) { .stage-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1080px) { .cal-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }