/* =========================================
   MIS UNIFIED STYLE - FULL VERSION
   ========================================= */

:root {
   --aurora-blue: #1f2f91;
   --primary-grad: linear-gradient(90deg, #0d88d3 0%, #1f2f91 100%);
   --rainbow-grad: linear-gradient(90deg, #4e73df, #36b9cc, #f6c23e);
}

/* 1. Global Typography: เข้มขึ้น คมชัด */
body {
   background-color: #f0f2f5;
   font-family: 'Sarabun', sans-serif !important;
   font-size: 0.95rem;
   color: #1a202c !important;
   /* ตัวหนังสือเข้มลดการปวดตา */
}

/* 2. Unified Table Header: แถบยาวสีน้ำเงินผืนเดียว */
.mis-table {
   border-collapse: separate !important;
   border-spacing: 0 10px !important;
   /* ระยะห่างเฉพาะแนวตั้งเพื่อให้แถวเป็น Card */
   width: 100%;
}

/* แก้ไขให้หัวตารางเป็นแถบยาวต่อเนื่อง ไม่แยกช่อง */
.mis-table thead th {
   background-color: var(--aurora-blue) !important;
   /* ใช้สีพื้นสีเดียวเพื่อให้ดูเป็นแถบยาว */
   color: #ffffff !important;
   /* ตัวหนังสือสีขาวโดดเด่น */
   padding: 15px 10px !important;
   font-weight: 700;
   text-align: center;
   border: none !important;
   font-size: 1rem;
}

/* เส้นคาดรุ้งใต้แถบหัวตารางเหมือน Luxury Card */
.mis-table thead tr::after {
   content: '';
   display: table-row;
   height: 4px;
   background: var(--rainbow-grad);
}

/* 3. ตารางเนื้อหา: คมชัด ประหยัดพื้นที่ */
.mis-table tbody td {
   background: #fff;
   border-top: 1.5px solid #e2e8f0 !important;
   border-bottom: 1.5px solid #e2e8f0 !important;
   padding: 12px 15px !important;
   vertical-align: middle;
}

.mis-table tbody tr td:first-child {
   border-left: 1.5px solid #e2e8f0 !important;
   border-radius: 12px 0 0 12px !important;
}

.mis-table tbody tr td:last-child {
   border-right: 1.5px solid #e2e8f0 !important;
   border-radius: 0 12px 12px 0 !important;
}

/* 4. Teacher Info: ชื่อใหญ่ คมชัด และประหยัดพื้นที่ */
.teacher-name-compact {
   font-size: 1.15rem !important;
   /* ขยายขนาดให้อ่านง่ายชัดเจน */
   font-weight: 800 !important;
   color: #1a202c !important;
   margin-bottom: 2px;
}

.teacher-id-tag {
   color: #4e73df;
   font-weight: 800;
   margin-right: 6px;
}

/* 5. Status Badge: ทรงแคปซูน (Pill Shape) ที่สวยงาม */
.mis-badge {
   font-size: 13px;
   font-weight: 700;
   padding: 8px 22px;
   /* เพิ่ม Padding แนวนอนให้ดูเป็นทรงแคปซูน */
   border-radius: 50px !important;
   /* โค้งมนแบบแคปซูน 100% */
   min-width: 130px;
   display: inline-block;
   text-align: center;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 6. แถบข้อมูล: สีฟ้าชัดเจน และ สีเหลืองนัดหมาย */
.schedule-box {
   background-color: #e3f2fd !important;
   border-left: 5px solid #007bff !important;
   border-radius: 8px;
   padding: 8px 15px;
}

.no-data-box {
   background-color: #fffde7 !important;
   border-left: 5px solid #fbc02d !important;
   border-radius: 8px;
   padding: 8px 15px;
   color: #856404;
   text-align: center;
   font-weight: 700;
}

/* อวตารและปุ่มดำเนินการ */
.mis-avatar {
   width: 48px !important;
   height: 48px !important;
   border-radius: 10px !important;
   object-fit: cover;
   border: 2px solid #fff;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-mis-action {
   border-radius: 10px !important;
   padding: 8px 16px !important;
   font-weight: 700;
}