/* ============================================================================
ICN WorkTrack — theme (light; brand = The Iconic Ram-Romklao:
brown header + gold/bronze accents + orange highlight, white card board)
NOTE: legacy var names (--navy*/--blue*) are kept on purpose so every
existing rule re-themes from these values alone. --navy* = brown header,
--blue* = gold/bronze accent.
ฟอนต์ Prompt (ไทยไม่มีหัว) + Baloo 2 โหลดผ่าน ใน ของแต่ละหน้า
(เลิกใช้ @import ที่นี่ — โหลดไม่ขึ้นในบางเบราว์เซอร์ → ไทยตกไปฟอนต์ระบบที่ "มีหัว")
========================================================================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
:root {
--navy:#5b3a21; --navy2:#3f2814; --navy-ink:#3a2614; /* brown header / dark ink */
--blue:#b07b2c; --blue-d:#8f6320; --blue-soft:#faf4e8; --blue-border:#e9d4a8; /* gold/bronze accent */
--gold:#c79a4e; --gold-d:#a87f33;
--orange:#f59e0b; --orange-d:#d97706;
--green:#22c55e; --green-soft:#ecfdf5;
--red:#ef4444; --red-soft:#fef2f2;
--bg:#f4efe7; --card:#ffffff; --soft:#faf7f1; --soft2:#f1ebe1;
--ink:#3a2614; --dim:#7a6a55; --faint:#a8977f;
--line:#ece4d6; --line2:#e2d7c4;
--radius:16px; --shadow:0 1px 2px rgba(60,40,20,.05);
--shadow-lg:0 10px 30px rgba(60,40,20,.13);
}
html { background:var(--bg); color:var(--ink); font-family:'Prompt', system-ui, sans-serif; }
body { min-height:100vh; color:var(--ink); font-family:'Prompt', system-ui, sans-serif;
background:radial-gradient(125% 125% at 50% 92%, #fbf7f0 42%, #b07b2c 100%); background-attachment:fixed; }
a { color:var(--blue-d); text-decoration:none; }
/* --- app header (navy) ----------------------------------------------------*/
.topbar {
background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 100%);
color:#fff; padding:16px 26px; display:flex; align-items:center; gap:16px;
position:sticky; top:0; z-index:30; /* TKT-35: header ค้างบนเวลาเลื่อน */
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { height:42px; width:auto; display:block; background:#fff; border-radius:8px; padding:5px 10px; }
@media (max-width:640px){ .brand-logo { height:34px; padding:4px 8px; } }
.brand .ico {
width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
background:rgba(255,255,255,.12); font-size:21px;
}
.brand .txt { line-height:1.15; }
.brand .name { font-family:'Baloo 2','Prompt',sans-serif; font-size:23px; font-weight:800; letter-spacing:.01em; }
.brand .name span { color:var(--orange); }
.app-ver { font-family:'Prompt',sans-serif; font-size:11px; font-weight:600; color:#fff; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.35); padding:1px 7px; border-radius:999px; vertical-align:middle; letter-spacing:0; }
.logo-sub .app-ver { color:var(--dim); background:var(--green-soft); border-color:var(--line); }
.brand .sub { font-size:11px; color:#b9c2e6; letter-spacing:.04em; }
.ver { font-size:10px; color:#8b96c9; }
.spacer { flex:1; }
/* countdown badge group (delivery date + days left) */
.countdown { display:flex; gap:0; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
border-radius:12px; overflow:hidden; }
.countdown .seg { padding:8px 16px; text-align:center; }
.countdown .seg + .seg { border-left:1px solid rgba(255,255,255,.18); }
.countdown .l { font-size:10px; color:#b9c2e6; }
.countdown .v { font-size:15px; font-weight:700; color:#fff; }
.countdown .v.warn { color:var(--orange); }
/* right-side controls in header */
.whoami { font-size:12px; color:#cdd5f0; text-align:right; line-height:1.3; }
.whoami b { color:#fff; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
padding:4px 11px; border-radius:99px; background:rgba(255,255,255,.12); color:#dbe2f7; }
.pill.live::before { content:''; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:pulse 2s infinite; }
.pill.off::before { content:''; width:7px; height:7px; border-radius:50%; background:#94a3b8; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
/* --- tabs (white bar, icon + label, blue active underline) -----------------*/
.tabs { display:flex; gap:6px; padding:9px 18px; background:var(--card);
border-bottom:1px solid var(--line); overflow-x:auto; box-shadow:var(--shadow);
position:sticky; top:var(--topbar-h,72px); z-index:29; } /* TKT-47: แท็บค้างใต้ header เวลาเลื่อนลง */
.tab { padding:9px 16px; font-family:inherit; font-size:14px; font-weight:600; color:var(--dim);
border:1px solid transparent; border-radius:999px; background:none; cursor:pointer; white-space:nowrap;
transition:.18s cubic-bezier(.2,.7,.3,1); }
.tab:hover { color:var(--navy); background:var(--blue-soft); }
.tab.active { color:#fff; background:var(--blue); border-color:var(--blue); font-weight:700; }
.panel { display:none; padding:28px 24px; max-width:1280px; margin:0 auto; }
.panel.active { display:block; }
/* --- buttons --------------------------------------------------------------*/
.btn { font-family:'Prompt',sans-serif; font-size:13px; font-weight:600; cursor:pointer;
padding:9px 16px; border-radius:10px; border:1px solid var(--line2);
background:var(--card); color:var(--ink); transition:.18s cubic-bezier(.2,.7,.3,1); white-space:nowrap; }
.btn:hover { border-color:var(--blue-border); background:var(--blue-soft); color:var(--blue-d); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { border:none; color:#fff; background:var(--blue); box-shadow:none; }
.btn.primary:hover { background:var(--blue-d); color:#fff; }
.btn.danger { color:var(--red); border-color:#fecaca; background:#fff; }
.btn.danger:hover { background:var(--red-soft); color:var(--red); }
.btn.sm { padding:6px 11px; font-size:12px; border-radius:8px; }
.btn.ghost { background:none; }
/* header buttons sit on navy → light style */
.topbar .btn { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }
.topbar .btn:hover { background:rgba(255,255,255,.22); color:#fff; }
/* --- cards / layout -------------------------------------------------------*/
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:18px 20px; box-shadow:var(--shadow); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grid { display:grid; gap:16px; }
.section-title { font-family:'Baloo 2','Prompt',sans-serif; font-size:19px; font-weight:700; color:var(--navy-ink); margin:4px 0 18px; }
.section-title .hint { font-size:12px; font-weight:400; color:var(--dim); }
/* --- icon system (Tabler webfont) — replaces legacy emoji; "แบบ 3" = icon-in-chip on headings --- */
.ti { display:inline-block; line-height:1; vertical-align:-2px; }
.tab .ti { font-size:17px; vertical-align:-3px; }
.btn .ti, .btn.sm .ti, .mx-chip .ti, .pill .ti, .pdf-chip .ti { font-size:15px; vertical-align:-2px; }
.btn.xs .ti { font-size:13px; }
.col-head .ti, .dlv-badge .ti, .dlv-chip .ti, .dd-title .ti, .mpl-team .ti { font-size:15px; vertical-align:-2px; }
.notif-ic .ti { font-size:20px; }
/* chip on section headings: first icon sits in a soft gold rounded square */
.section-title > .ti:first-child { display:inline-grid; place-items:center; width:30px; height:30px;
font-size:18px; border-radius:9px; background:var(--blue-soft); color:var(--blue-d);
border:1px solid var(--blue-border); vertical-align:middle; margin-right:10px; }
.muted { color:var(--dim); font-size:12px; }
.empty { text-align:center; color:var(--faint); padding:46px 12px; font-size:14px; }
/* --- inputs ---------------------------------------------------------------*/
label.fl { display:block; font-size:12px; font-weight:600; color:var(--navy-ink); margin:0 0 6px; }
input:not([type]),input[type=text],input[type=search],input[type=password],input[type=email],input[type=number],
input[type=date],select,textarea {
width:100%; box-sizing:border-box; padding:10px 13px; font-family:'Prompt',sans-serif; font-size:14px;
background:var(--card); color:var(--ink); border:1px solid var(--line2); border-radius:10px; outline:none;
transition:border-color .15s,box-shadow .15s,background .15s; } /* TKT-72: border-box กันช่องล้นกรอบ modal */
input::placeholder,textarea::placeholder { color:var(--faint); }
input:not([type]):hover,input[type=text]:hover,input[type=search]:hover,input[type=password]:hover,input[type=email]:hover,
input[type=number]:hover,input[type=date]:hover,select:hover,textarea:hover { border-color:var(--blue-border); }
textarea { resize:vertical; min-height:74px; }
/* TKT-53/54: ช่องวันที่ในฟอร์มไม่ต้องยืดเต็มแถว (เนื้อหาสั้น) — กันช่องว่างเกินที่ดูเป็น "ช่องเกิน" */
.fg input[type=date] { max-width:190px; }
/* TKT-67: กล่องตั้งค่าขั้นสูง (พับเก็บ) ในฟอร์มงาน */
.adv-fields { border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin:14px 0; background:var(--soft); }
.adv-fields > summary { cursor:pointer; font-weight:600; color:var(--navy-ink); font-size:13.5px; list-style:none; user-select:none; }
.adv-fields > summary::-webkit-details-marker { display:none; }
.adv-fields > summary::before { content:'▸ '; color:var(--dim); }
.adv-fields[open] > summary::before { content:'▾ '; }
.adv-fields[open] { background:#fff; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(176,123,44,.16); }
input.error { border-color:var(--red); box-shadow:0 0 0 3px rgba(239,68,68,.15); animation:shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
select { appearance:none; background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 13px center; padding-right:32px; cursor:pointer; }
/* --- badges (status pills) ------------------------------------------------*/
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
padding:4px 11px; border-radius:99px; border:1px solid transparent; }
.dot { width:7px; height:7px; border-radius:50%; }
/* --- progress bar ---------------------------------------------------------*/
.bar { height:7px; background:var(--soft2); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--blue); border-radius:99px; transition:width .4s; }
/* --- WORK BOARD: columns of cards (the original look) ----------------------*/
.board { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; align-items:start; }
.col { background:transparent; }
.col-head { display:flex; align-items:center; gap:9px; padding:14px 16px; border-radius:13px;
font-size:15px; font-weight:700; color:#fff; margin-bottom:12px; box-shadow:var(--shadow); }
.col-head .cnt { margin-left:auto; font-size:13px; font-weight:600; background:rgba(255,255,255,.22); padding:2px 9px; border-radius:99px; }
.col-head.c0 { background:linear-gradient(120deg,#3b6fd4,#2b4fa0); }
.col-head.c1 { background:linear-gradient(120deg,#e08f3c,#cf7320); }
.col-head.c2 { background:linear-gradient(120deg,#5aa469,#3f8a55); }
.col-head.c3 { background:linear-gradient(120deg,#8b5cf6,#6d28d9); }
.col-head.c4 { background:linear-gradient(120deg,#0ea5e9,#0369a1); }
.col-head.gov { background:linear-gradient(120deg,#b1452f,#8f3322); } /* TKT-38: หัวข้องานราชการ สีแดงตุ่นๆ */
/* TKT-29: แถบเลือกชั้น (checkbox chips) ในหน้า Matrix */
.mx-floors { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mx-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border:1px solid var(--line);
border-radius:999px; font-size:13px; font-weight:600; color:var(--dim); cursor:pointer; background:#fff; user-select:none; }
.mx-chip input { width:auto; margin:0; accent-color:var(--navy2); } /* TKT-114: เครื่องหมายถูกสีน้ำตาลเข้ม (เดิมฟ้าเนทีฟ) */
.mx-chip.on { color:var(--navy); border-color:var(--blue); background:var(--blue-soft); }
/* work card */
.wcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px;
box-shadow:var(--shadow); margin-bottom:12px; cursor:pointer; transition:.15s; }
.wcard:hover { box-shadow:0 4px 14px rgba(60,40,20,.10); transform:translateY(-1px); }
.wcard.doing { border-left:4px solid var(--blue); }
.wcard.blocked { border-left:4px solid var(--red); }
.wcard.done { border-left:4px solid var(--green); }
.wcard .top { display:flex; align-items:flex-start; gap:10px; }
.wcard .num { color:var(--faint); font-weight:700; font-size:14px; }
.wcard .ttl { flex:1; font-size:15px; font-weight:700; color:var(--navy-ink); line-height:1.35; }
.datebox { display:flex; gap:8px; background:var(--soft); border:1px solid var(--line); border-radius:10px;
padding:9px 12px; margin:12px 0 10px; flex-wrap:wrap; }
.datebox .di { display:flex; align-items:center; gap:7px; font-size:13px; flex:1; min-width:120px; }
.datebox .di .lbl { color:var(--dim); }
.datebox .di .val { color:var(--navy-ink); font-weight:600; }
.datebox .di.over .val { color:var(--red); }
.wcard .foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:13px; }
.wcard .foot .meta { color:var(--dim); }
.wcard .foot .pct { font-weight:700; color:var(--navy-ink); }
/* TKT-05: ป้ายทันแผน/ช้ากว่าแผน เป็นบรรทัดใต้ความคืบหน้า */
.wcard .sched { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); display:flex; }
/* TKT-10: ลากสลับลำดับการ์ดงาน */
.col-cards .wcard[draggable="true"] { cursor:grab; }
.col-cards .wcard.dragging { opacity:.45; cursor:grabbing; }
/* TKT-02: แต่ละคอลัมน์โชว์ ~4 การ์ด(เต็ม) แล้วเลื่อนลงในคอลัมน์ */
.col-cards { display:flex; flex-direction:column; gap:12px; max-height:748px; overflow-y:auto; padding:2px 6px 2px 0; }
.col-cards .wcard { margin-bottom:0; }
.col-cards::-webkit-scrollbar { width:7px; }
.col-cards::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
/* --- table ----------------------------------------------------------------*/
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th { text-align:left; font-size:11.5px; color:var(--faint); font-weight:600; letter-spacing:.03em;
padding:11px 12px; border-bottom:1px solid var(--line2); }
table.tbl td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tr:hover td { background:var(--soft); }
/* --- kanban (status view) -------------------------------------------------*/
.kanban { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; overflow-x:auto; align-items:start; }
.kcol { background:var(--soft); border:1px solid var(--line); border-radius:13px; padding:11px; min-height:120px; display:flex; flex-direction:column; }
.kcol h4 { font-size:13px; font-weight:700; margin-bottom:11px; display:flex; justify-content:space-between; }
/* TKT-127: โชว์ ~7 ใบต่อคอลัมน์แล้วเลื่อนลง (card สูง ~82px: 7×82 + ระยะ) */
.kcol-body { overflow-y:auto; max-height:600px; padding-right:4px; margin-right:-4px; }
.kcol-body::-webkit-scrollbar { width:7px; }
.kcol-body::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; }
.kcard { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:11px; margin-bottom:9px;
cursor:pointer; box-shadow:var(--shadow); transition:.15s; }
.kcard:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(60,40,20,.10); }
.kcard .t { font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--navy-ink); }
/* --- modal ----------------------------------------------------------------*/
.modal-bg { position:fixed; inset:0; background:rgba(20,30,60,.45); backdrop-filter:blur(2px);
display:none; align-items:flex-start; justify-content:center; z-index:200; padding:42px 14px; overflow:auto; }
.modal-bg.open { display:flex; }
/* TKT-97: ซ้อนโมดอลให้ถูกชั้น — crud (เช่น "แก้รายการ" ที่เปิดทับ task modal) ต้องอยู่บน task/newtask; lightbox รูปอยู่บนสุด */
#crud-modal { z-index:210; }
#img-modal { z-index:220; }
.modal { width:100%; max-width:560px; background:var(--card); border-radius:18px; padding:24px;
box-shadow:var(--shadow-lg); }
.modal h3 { font-size:18px; font-weight:700; margin-bottom:18px; color:var(--navy-ink); }
.modal .fg { margin-bottom:14px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
/* TKT-99: กากบาทปิด = ปุ่มกรอบแดงชัดเจน เห็นเด่น กดง่าย */
.x { cursor:pointer; color:#e23b3b; font-size:24px; line-height:1; float:right; width:34px; height:34px;
display:flex; align-items:center; justify-content:center; border:2px solid #e23b3b; border-radius:8px;
background:#fff; margin:-4px -4px 0 0; transition:background .12s,color .12s; }
.x:hover { background:#e23b3b; color:#fff; }
/* --- stat cards / dashboard ----------------------------------------------*/
.stat { text-align:left; padding:18px 18px; }
.stat .n { font-family:'Baloo 2','Prompt',sans-serif; font-size:31px; font-weight:700; color:var(--navy); letter-spacing:-.01em; line-height:1.1; }
.stat .l { font-size:11.5px; color:var(--faint); margin-top:5px; font-weight:600; letter-spacing:.02em; }
.stat.orange .n { color:var(--orange-d); }
.stat.green .n { color:var(--green); }
.stat.red .n { color:var(--red); }
/* --- floorplan "+" pins (record = green; overview = per-task/per-date color) */
.fp-plus { position:absolute; transform:translate(-50%,-50%); min-width:17px; height:17px; padding:0 2px;
border-radius:4px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; line-height:1;
box-shadow:0 1px 3px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.85); z-index:1; }
.fp-plus.click { cursor:pointer; }
/* TKT-39/42: หมุดตายตัวที่ยังไม่กด (todo) = โปร่ง เส้นประ */
.fp-plus.todo { background:rgba(255,255,255,.4)!important; border:1.5px dashed var(--navy,#1e3a5f); color:var(--navy,#1e3a5f); box-shadow:0 1px 2px rgba(0,0,0,.3); opacity:.85; }
.fp-plus.todo:hover { background:rgba(34,197,94,.45)!important; opacity:1; }
/* TKT-12: หมุดค้าง (ยังไม่บันทึก) = เส้นประ + กระพริบ */
.fp-plus.pend { border:2px dashed #fff; opacity:.9; animation:fpPendBlink 1s ease-in-out infinite; }
@keyframes fpPendBlink { 50%{ opacity:.45; } }
.fp-plus.click:hover { filter:brightness(1.08); transform:translate(-50%,-50%) scale(1.12); z-index:2; }
.fp-plus .lbl { position:absolute; left:50%; bottom:115%; transform:translateX(-50%); background:#111c; color:#fff;
font-size:9px; font-weight:600; padding:1px 4px; border-radius:3px; white-space:nowrap; pointer-events:none; }
.fp-floorwrap { position:relative; display:inline-block; max-width:100%; vertical-align:top; }
.fp-floorwrap img { max-width:100%; display:block; border-radius:8px; }
.fp-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
.fp-legend .it { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink); }
.fp-legend .sw { width:12px; height:12px; border-radius:3px; display:inline-block; }
@media (max-width:900px){ .fp-split { grid-template-columns:1fr !important; } }
/* --- misc -----------------------------------------------------------------*/
.thumbs { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.thumbs img { width:74px; height:74px; object-fit:cover; border-radius:9px; border:1px solid var(--line); cursor:pointer; }
.pdf-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:8px 12px; border-radius:9px;
border:1px solid var(--line); background:var(--soft); color:var(--navy-ink); font-size:12.5px; font-weight:600;
text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-chip:hover { border-color:var(--blue); }
hr.sep { border:none; border-top:1px solid var(--line); margin:18px 0; }
input[type=range] { accent-color:var(--blue); }
@media (max-width:640px){
.kanban { grid-template-columns:repeat(3,82vw); }
.board { grid-template-columns:1fr; }
.panel { padding:14px; }
.topbar { padding:14px 16px; flex-wrap:wrap; }
}
/* มือถือ: กันหน้าภาพรวม scroll แนวนอน (แถว breakdown กว้างคงที่) */
@media (max-width:760px){
.ov-row { flex-wrap:wrap !important; row-gap:4px; }
.ov-row .bar { width:100% !important; order:9; }
}
/* TKT-121: ปุ่มสลับดู [รายห้อง]/[หมุด] ของงานที่ติดตาม 2 แบบ */
.fp-bview { display:flex; gap:8px; margin-bottom:12px; }
/* --- Manpower (กำลังคน รายวัน) — TKT-125 -----------------------------------*/
.btn.xs { padding:4px 8px; font-size:11.5px; border-radius:7px; }
.mp-datebox { display:flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line2);
border-radius:11px; padding:4px 6px; }
.mp-datebox input[type=date] { border:none; background:none; font-family:inherit; font-size:14px; color:var(--ink); padding:4px; }
.mp-datebox .btn { padding:5px 9px; }
.mp-summary { font-size:15px; color:var(--navy-ink); }
.mp-summary b { color:var(--blue-d); font-size:18px; font-weight:800; }
.mp-table { width:100%; border-collapse:collapse; }
.mp-table thead th { text-align:left; font-size:12px; font-weight:700; color:var(--dim);
padding:6px 12px; border-bottom:2px solid var(--line); white-space:nowrap; }
.mp-table thead th:nth-child(2), .mp-table thead th:nth-child(3) { text-align:center; }
.mp-table tbody td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.mp-table tbody tr:last-child td { border-bottom:none; }
.mp-table tbody tr.mp-editing { background:var(--blue-soft); }
.mp-name { font-weight:600; color:var(--navy-ink); font-size:14px; }
.mp-cnt { text-align:center; white-space:nowrap; }
.mp-cnt b { color:var(--blue-d); font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.mp-work { font-size:13.5px; color:var(--ink); max-width:320px; }
.mp-note { font-size:13px; max-width:240px; }
.mp-act { text-align:right; white-space:nowrap; }
.mp-add { margin-top:14px; padding-top:14px; border-top:1px dashed var(--line2); }
.mp-add-title { font-size:13px; font-weight:700; color:var(--navy); margin-bottom:9px; }
.mp-add-grid { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.mp-add-grid input { padding:9px 11px; border:1px solid var(--line2); border-radius:9px; font-family:inherit;
font-size:13.5px; background:var(--card); color:var(--ink); }
.mp-add-grid #mp-f-team { flex:1.6; min-width:200px; }
.mp-add-grid #mp-f-work { flex:1.6; min-width:180px; }
.mp-add-grid #mp-f-note { flex:1; min-width:140px; }
.mp-f-lbl { display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--dim); }
.mp-f-lbl input[type=number] { padding:8px 9px; border:1px solid var(--line2); border-radius:9px;
font-family:inherit; font-size:13.5px; background:var(--card); color:var(--ink); }
@media (max-width:760px){
.mp-add-grid { flex-direction:column; align-items:stretch; }
.mp-add-grid > * { width:100%; }
.mp-note { max-width:140px; }
}
/* --- กำลังคน โหมดลิสต์ (ทีมตั้งไว้ → กรอกจำนวน/งานรายวัน) --------------------*/
.mpl-list { display:flex; flex-direction:column; gap:10px; }
.mpl-row { border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--card);
display:flex; flex-direction:column; gap:8px; }
.mpl-head { display:flex; align-items:center; gap:10px; }
.mpl-teamwrap { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.mpl-team { font-weight:700; color:var(--navy-ink); font-size:14.5px; }
.mpl-nick { font-size:11.5px; font-weight:600; color:var(--blue-d); }
.mpl-nick.none { color:var(--dim); font-weight:500; font-style:italic; }
.mpl-team-in { flex:1; min-width:0; padding:8px 10px; border:1px solid var(--line2); border-radius:8px;
font-family:inherit; font-size:13.5px; background:var(--card); color:var(--ink); }
.mpl-cnt-lbl { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--dim); white-space:nowrap; }
.mpl-count { width:64px; padding:8px 9px; border:1px solid var(--line2); border-radius:8px; font-family:inherit;
font-size:15px; font-weight:700; text-align:center; background:var(--card); color:var(--ink); }
.mpl-work, .mpl-note { width:100%; padding:9px 11px; border:1px solid var(--line2); border-radius:9px;
font-family:inherit; font-size:13.5px; background:var(--card); color:var(--ink); box-sizing:border-box; }
.mpl-rm { color:var(--dim); }
.mpl-actions { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line2); }
.mpl-actions .spacer { flex:1; }
/* TKT-146: กำลังคนลำดับชั้น หมวด → ทีม → คน */
.mpl-cat { margin:20px 0 4px; font-weight:800; color:var(--navy-ink); font-size:15px; display:flex; align-items:center; gap:7px; padding-bottom:6px; border-bottom:2px solid var(--line2); }
.mpl-cat:first-of-type { margin-top:0; }
.mpl-teamblock { border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--card); margin-top:10px; }
.mpl-teamttl { font-weight:700; color:var(--navy-ink); font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mpl-people { display:flex; flex-wrap:wrap; gap:6px 16px; margin:9px 0; }
.mpl-person { display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.mpl-person input { width:auto; }
.mpl-extra { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--dim); margin-bottom:8px; }
.mpl-extra input { width:64px; padding:7px 9px; border:1px solid var(--line2); border-radius:8px; font-family:inherit; font-size:14px; }
/* --- ปฏิทินของเข้า + แจ้งเตือน (delivery / notifications) -------------------*/
.dlv-legend { display:flex; gap:14px; font-size:12.5px; color:var(--dim); align-items:center; }
.dlv-legend span { display:flex; align-items:center; gap:5px; }
.dlv-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.dlv-dot.wait{ background:#d97706; } .dlv-dot.arrived{ background:#16a34a; } .dlv-dot.overdue{ background:#dc2626; }
.dlv-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.dlv-dow { text-align:center; font-size:12px; font-weight:700; color:var(--dim); padding:4px 0; }
.dlv-cell { min-height:92px; border:1px solid var(--line); border-radius:10px; padding:5px; background:var(--card);
display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.dlv-cell.empty-cell { border:none; background:transparent; }
.dlv-cell.is-today { border-color:var(--blue-d); box-shadow:0 0 0 1px var(--blue-d) inset; }
.dlv-daynum { font-size:12px; font-weight:700; color:var(--dim); }
.dlv-chip { font-size:11.5px; font-weight:600; padding:3px 7px; border-radius:7px; cursor:pointer;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid transparent; }
.dlv-chip.wait{ background:#fef3c7; color:#92400e; border-color:#fcd9a4; }
.dlv-chip.arrived{ background:#dcfce7; color:#166534; border-color:#a7e3bd; }
.dlv-chip.overdue{ background:#fee2e2; color:#991b1b; border-color:#f6b3b3; }
.dlv-chip.start{ background:#e0e7ff; color:#3730a3; border-color:#c3cafe; }
.dlv-dot.start{ background:#4f46e5; }
.dlv-chip:hover { filter:brightness(0.97); }
/* ปฏิทินของเข้า: ปุ่มแบ่งกลุ่ม (ฟิลเตอร์/มุมมอง) + มุมมองรายการ PO ย้อนหลัง */
.dlv-seg{ display:inline-flex; border:1px solid var(--line2); border-radius:9px; overflow:hidden; }
.dlv-seg button{ border:none; background:var(--card); padding:6px 12px; font-family:inherit; font-size:13px; cursor:pointer; color:var(--dim); border-left:1px solid var(--line2); }
.dlv-seg button:first-child{ border-left:none; }
.dlv-seg button.on{ background:var(--navy); color:#fff; }
.dlv-list{ display:flex; flex-direction:column; gap:8px; }
.dlv-li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); cursor:pointer; }
.dlv-li:hover{ background:var(--soft); }
.dlv-li .dlv-li-date{ font-size:12.5px; color:var(--dim); min-width:84px; }
.dlv-li .dlv-li-title{ font-weight:600; flex:1; }
.dlv-badge { display:inline-block; font-size:12px; font-weight:700; padding:3px 11px; border-radius:20px; }
.dlv-badge.wait{ background:#fef3c7; color:#92400e; } .dlv-badge.arrived{ background:#dcfce7; color:#166534; } .dlv-badge.overdue{ background:#fee2e2; color:#991b1b; }
.dd-title { font-size:17px; font-weight:800; color:var(--navy-ink); margin-bottom:8px; }
.dd-meta { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:13px; color:var(--dim); align-items:center; margin-bottom:12px; }
.dd-photos { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.dd-photos img { width:84px; height:84px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid var(--line); }
.dd-delays-box { background:#fff7ed; border:1px solid #fcd9a4; border-radius:9px; padding:8px 12px; font-size:12.5px; color:#92400e; margin-bottom:6px; }
.dd-delays-box b { display:block; margin-bottom:3px; }
.notif-badge { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; font-size:11px;
font-weight:800; color:#fff; background:#dc2626; border-radius:10px; padding:0 5px; margin-left:6px; vertical-align:middle; }
.notif-item { display:flex; gap:11px; align-items:flex-start; padding:12px 6px; border-bottom:1px solid var(--line); }
.notif-item:last-child { border-bottom:none; }
.notif-item.unread { background:var(--blue-soft); border-radius:9px; }
.notif-ic { font-size:20px; line-height:1; }
.notif-main { flex:1; min-width:0; }
.notif-title { font-weight:700; color:var(--navy-ink); font-size:14px; }
.notif-body-txt { font-size:13px; color:var(--ink); margin-top:2px; }
.notif-meta { font-size:11.5px; color:var(--dim); margin-top:3px; }
.notif-done { color:var(--green); font-weight:800; }
@media (max-width:760px){ .dlv-cell { min-height:64px; } .dlv-chip { font-size:10.5px; } }