/* ==========================================================================
   🎨 EXECUTIVE SOFT LIGHT THEME (โทนซอฟต์สว่าง สบายตา อ่านง่าย ไม่ปวดตา)
   ========================================================================== */
:root {
    --bg-base: #f1f5f9;         /* พื้นหลังหลักสีเทาอ่อนนุ่มนวลผ่อนคลาย */
    --bg-surface: #ffffff;      /* พื้นหลังกล่องและการ์ดสรุป สีขาวบริสุทธิ์ */
    --bg-control: #f8fafc;      /* พื้นหลังช่องเลือกและช่องกรอกข้อมูล */
    --border-color: #cbd5e1;    /* สีเส้นขอบคมชัด แบ่งสัดส่วนได้ดี */
    --text-primary: #0f172a;    /* ตัวหนังสือหลัก สีน้ำเงินเข้มเกือบดำ อ่านง่ายที่สุด */
    --text-secondary: #475569;  /* ตัวหนังสือรอง สีเทาเข้ม */
    --primary: #0284c7;         /* สีฟ้าเน้นจุดเด่นสำคัญ */
    --success: #16a34a;         /* สีเขียวปิดงานสำเร็จ / อนุมัติ */
    --warning: #d97706;         /* สีส้มรอดำเนินการ */
    --danger: #dc2626;          /* สีแดงปุ่มออกจากระบบ / ข้อผิดพลาด */
}

* { 
    box-sizing: border-box; 
    font-family: 'Sarabun', sans-serif; 
}

body { 
    background-color: var(--bg-base); 
    color: var(--text-primary); 
    margin: 0; 
    padding: 24px; 
    min-height: 100vh; 
}

.dashboard-container { 
    max-width: 1600px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}

/* 🔝 ส่วนหัวแผงควบคุมหลัก (Header Box) */
.exec-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: linear-gradient(135deg, #1e3a8a, #0f172a); /* พื้นหลังไล่เฉดน้ำเงินเข้มภูมิฐาน */
    padding: 24px 32px; 
    border-radius: 16px; 
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.exec-brand h1 { font-size: 28px; margin: 0; color: #38bdf8; font-weight: 700; }
.exec-brand p { margin: 6px 0 0 0; color: #93c5fd; font-size: 14px; }
.exec-profile { text-align: right; display: flex; flex-direction: column; gap: 8px; }
.exec-user-tag { font-size: 16px; color: #ffffff; }
.exec-user-tag strong { color: #facc15; }

/* 📁 โซนการ์ดตัวเลขสถิติขนาดใหญ่ (KPI Metrics Grid) */
.metrics-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 20px; 
}
.metric-card {
    background: var(--bg-surface); 
    padding: 24px; 
    border-radius: 14px;
    border: 1px solid var(--border-color); 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}
.metric-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); 
}
.metric-info { display: flex; flex-direction: column; gap: 6px; }
.metric-label { font-size: 15px; color: var(--text-secondary); font-weight: 600; }
.metric-value { font-size: 42px; font-weight: 700; line-height: 1; }
.metric-icon { font-size: 40px; }

/* 🏬 แถบเมนูด่วนสำหรับคลิกสลับไปหน้าฟอร์มรายแผนก (Quick Navigation) */
.nav-section { 
    background: var(--bg-surface); 
    padding: 20px 24px; 
    border-radius: 14px; 
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.nav-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--text-secondary); }
.nav-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-dept {
    padding: 12px 20px; 
    font-size: 14px; 
    font-weight: 700; 
    border: none; 
    border-radius: 8px;
    cursor: pointer; 
    color: #ffffff; 
    transition: all 0.2s; 
    display: flex; 
    align-items: center; 
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn-dept:hover { opacity: 0.9; transform: scale(1.03); }

/* สีประจำแบรนด์แผนกโรงงานดั้งเดิม (เด่นชัด มองง่ายบนพื้นสว่าง) */
.d-print { background-color: #dc2626; }
.d-sheet { background-color: #2563eb; }
.d-tape { background-color: #16a34a; }
.d-blow { background-color: #9333ea; }
.d-drill { background-color: #ea580c; }
.d-garbage { background-color: #4b5563; }
.d-mono { background-color: #0891b2; }

/* 📈 ส่วนแสดงผลจัดวางกราฟวงกลมและระบบควบคุม (Split Layout) */
.analytics-split { 
    display: grid; 
    grid-template-columns: 420px 1fr; 
    gap: 24px; 
}
@media (max-width: 1100px) { .analytics-split { grid-template-columns: 1fr; } }

.panel-card { 
    background: var(--bg-surface); 
    padding: 24px; 
    border-radius: 14px; 
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.panel-title { 
    font-size: 18px; 
    font-weight: 700; 
    margin-bottom: 18px; 
    border-bottom: 2px solid var(--bg-base); 
    padding-bottom: 12px; 
    color: var(--text-primary);
}
.chart-wrapper { position: relative; height: 300px; width: 100%; }

/* ⚙️ แผงควบคุมคำสั่งคัดกรองและส่งออกข้อมูล Excel */
.control-box { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.form-select {
    width: 100%; 
    padding: 14px; 
    background: var(--bg-control); 
    border: 2px solid var(--border-color);
    color: var(--text-primary); 
    border-radius: 8px; 
    font-size: 16px; 
    font-weight: 600; 
    outline: none; 
    transition: border-color 0.2s;
}
.form-select:focus { border-color: var(--primary); background-color: #f0f9ff; }

/* 📋 ส่วนตารางข้อมูลบันทึกรายงานเหตุการณ์ (ตารางขนาดใหญ่ ตัวหนังสือใหญ่สะใจ) */
.table-responsive { 
    overflow-x: auto; 
    width: 100%; 
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    background: #ffffff; 
}
.data-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 1200px; }
.data-table th { 
    background-color: #f8fafc; 
    color: var(--text-secondary); 
    padding: 16px; 
    font-size: 15px; 
    font-weight: 700; 
    text-transform: uppercase; 
    border-bottom: 2px solid var(--border-color); 
}
.data-table td { 
    padding: 16px; 
    border-bottom: 1px solid #e2e8f0; 
    font-size: 16px; /* ขยายตัวหนังสือในตารางให้อ่านง่ายพิเศษ ไม่ต้องเพ่ง */
    vertical-align: middle; 
    color: #1e293b;
}
.data-table tbody tr:hover { background-color: #f1f5f9; }

/* 🏷️ ป้ายกำกับสถานะงาน (Badge Status) */
.badge-status { 
    padding: 6px 12px; 
    border-radius: 20px; 
    font-size: 13px; 
    font-weight: 700; 
    display: inline-flex; 
    align-items: center; 
    gap: 5px; 
}
.status-pending { background-color: #fef3c7; color: #b45309; }
.status-progress { background-color: #f3e8ff; color: #6b21a8; }
.status-resolved { background-color: #dcfce7; color: #15803d; }

/* 🛠️ ส่วนพื้นที่สำหรับจัดการของฝั่งผู้บริหาร (MAN Action) */
.select-inline-status { 
    background: #ffffff; 
    color: var(--text-primary); 
    border: 1px solid var(--border-color); 
    padding: 8px; 
    border-radius: 6px; 
    font-size: 14px; 
    width: 100%; 
    outline: none; 
    font-weight: 600;
}
.input-inline-note { 
    background: #ffffff; 
    color: var(--text-primary); 
    border: 1px solid var(--border-color); 
    padding: 9px; 
    border-radius: 6px; 
    font-size: 14px; 
    width: 100%; 
    outline: none; 
    box-sizing: border-box; 
}
.input-inline-note:focus, .select-inline-status:focus { border-color: var(--primary); background-color: #f0f9ff; }

/* 🔘 ปุ่มกดคำสั่งส่วนกลาง (Action Buttons) */
.btn-global { 
    padding: 14px 24px; 
    font-size: 15px; 
    font-weight: 700; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.2s; 
    text-align: center; 
}
.btn-excel { 
    background-color: var(--success); 
    color: white; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    box-shadow: 0 4px 6px rgba(22, 163, 74, 0.15); 
}
.btn-excel:hover { background-color: #15803d; transform: translateY(-1px); }
.btn-logout { background-color: var(--danger); color: white; }
.btn-logout:hover { background-color: #b91c1c; }