@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700;800&display=swap');
body { font-family: 'Sarabun', sans-serif; background-color: #f1f5f9; font-size: 11px; color: #334155; }
/* --- Grid หน้าแผนผลิต (Group หน้าสุด, Status หลังสุด) --- */
.grid-cols-prod { 
    display: grid; 
    /* 23 ช่อง: Group(60px) อยู่หน้าสุด / Status & CutSt อยู่ท้ายสุด */
    grid-template-columns: 60px 70px 120px 30px 60px 60px 50px 65px 65px 55px 40px 40px 45px 40px 40px 50px 50px 50px 50px 50px 50px 60px auto; 
    gap: 1px; 
    border-left: 1px solid #94a3b8; 
}

/* --- Grid หน้า Admin (เพิ่มความกว้างช่อง Ship ให้พอดีกับวันที่) --- */
.grid-cols-admin { 
    display: grid; 
    /* ขยายช่อง Ship(C), Ship(F) เป็น 80px (ลำดับที่ 16, 17) */
    grid-template-columns: 25px 25px 50px 25px 45px 45px 50px 80px 110px 30px 60px 65px 45px 40px 50px 80px 80px 50px 40px 40px 50px 35px 45px 40px 50px 50px 50px 60px 70px 70px 60px 75px auto; 
    gap: 1px; 
    border-left: 1px solid #94a3b8; 
}
.table-header { background-color: #e2e8f0; position: sticky; top: 0; z-index: 50; font-weight: bold; color: #334155; text-align: center; border-bottom: 2px solid #94a3b8; height: 45px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.sticky-group-header { position: sticky; top: 45px; z-index: 40; background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%); border-bottom: 2px solid #b45309; border-top: 1px solid #cbd5e1; align-items: center; height: 42px; box-shadow: 0 4px 6px -2px rgba(0,0,0,0.05); border-left: 6px solid #d97706; }
.job-row { background-color: white; border-bottom: 1px solid #cbd5e1; align-items: center; min-height: 28px; }
.job-row:hover { background-color: #f0f9ff !important; }
.job-row.selected-row { background-color: #dbeafe !important; border-left: 3px solid #2563eb; }
.sortable-ghost { opacity: 0.5; background: #e0f2fe; border: 2px dashed #3b82f6; } 
.sortable-drag { background: white; opacity: 1; box-shadow: 0 10px 15px rgba(0,0,0,0.2); } 
.job-cell { padding: 0 2px; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 100%; border-right: 1px dashed #f1f5f9; min-height: 28px; font-size: 11px; white-space: nowrap; }
.header-cell { padding: 0 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid #cbd5e1; height: 100%; line-height: 1; }
.cell-input { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font-size: 11px; outline: none; }
.cell-input:focus { background: white; outline: 2px solid #3b82f6; z-index: 10; }
.grp-inp { width: 90%; height: 26px; text-align: center; font-weight: 800; color: #1e3a8a; background: white; border: 2px solid #9ca3af; border-radius: 4px; font-size: 12px; }
.grp-inp:focus { border-color: #d97706; outline: none; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4); }
.modal-input { width: 100%; border: 2px solid #cbd5e1; border-radius: 6px; padding: 8px; font-size: 12px; }
.nav-tab { padding: 10px 20px; font-weight: bold; border-radius: 10px 10px 0 0; color: #64748b; margin-right: 4px; transition: 0.2s; text-decoration: none; }
.nav-tab:hover { background: #e2e8f0; }
.nav-tab.active { background: white; color: #2563eb; border-top: 3px solid #2563eb; box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.05); }
.view-btn { padding: 4px 12px; font-weight: bold; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.view-btn.active { background: #2563eb; color: white; box-shadow: 0 2px 4px rgba(37,99,235,0.3); }
.st-btn { width: 100%; font-weight: bold; font-size: 10px; padding: 2px; border-radius: 4px; text-align: center; cursor: pointer; }
.st-wip { background: #f1f5f9; border: 1px solid #e2e8f0; }
.st-fin { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
#batchBar { position: fixed; bottom: 0; left: 0; width: 100%; background: white; border-top: 2px solid #3b82f6; padding: 10px 20px; z-index: 100; display: none; justify-content: space-between; align-items: center; box-shadow: 0 -4px 10px rgba(0,0,0,0.1); transform: translateY(100%); transition: transform 0.3s; }
#batchBar.show { transform: translateY(0); display: flex !important; }
#hoverTooltip { position: fixed; z-index: 100000; background: white; border: 1px solid #94a3b8; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); border-radius: 8px; padding: 10px; display: none; pointer-events: none; min-width: 250px; }
.action-btn { padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: bold; transition: 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.bar-btn { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: bold; box-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s; }
.mat-icon { font-size: 13px; cursor: pointer; }
.mat-green { color: #16a34a; } .mat-yellow { color: #ca8a04; } .mat-orange { color: #ea580c; } .mat-red { color: #dc2626; } .mat-gray { color: #cbd5e1; }
.mat-table th, .mat-table td { border-bottom: 1px solid #f1f5f9; padding: 10px; text-align: left; font-size: 12px; }
.mat-table th { background: #f8fafc; font-weight: bold; color: #475569; }
.batch-table th { background-color: #f1f5f9; border: 1px solid #94a3b8; padding: 2px; font-size: 10px; font-weight: 800; }
.batch-table td { border: 1px solid #cbd5e1; padding: 0; }
.table-input { width: 100%; border: none; padding: 4px; font-size: 10px; text-align: center; color: #334155; }
.table-input:focus { background-color: #e0f2fe; outline: none; }
/* --- เพิ่มต่อท้ายไฟล์ pps_online.css --- */

/* 1. สีชมพูพาสเทล สำหรับงานที่ย้ายมาใหม่ไม่เกิน 1 ชม. */
.bg-pastel-pink {
    background-color: #fce7f3 !important; /* ชมพูอ่อน */
    border-left: 3px solid #db2777 !important; /* ขอบซ้ายชมพูเข้ม */
}

/* 2. ปรับสีสถานะงานตัด (Cutting Status Colors) */
.st-wait { 
    background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; /* สีเทา (ยังไม่ตัด) */
}
.st-cutting { 
    background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; /* สีส้ม (กำลังตัด) */
}
.st-done { 
    background: #dcfce7; color: #166534; border: 1px solid #86efac; /* สีเขียว (ตัดเสร็จ) */
}