/* 📌 ไฟล์: style.css */
/* 🎯 หน้าที่: ควบคุมความสวยงามธีมสีแดงพาสเทล, รองรับ Mobile Layout Safe Area และตัดสไตล์หน้ากระดาษสำหรับพิมพ์ PDF */

/* 🎨 กำหนดตัวแปรระบบสีสากล (Pastel Theme Design Tokens) */
:root {
  --primary-pastel-red: #e05252;
  --primary-hover-red: #c94242;
  --bg-offwhite: #fcfbfa;
  --bg-dark-pastel: #2b2525;
  --text-dark: #332d2d;
  --border-light: #f0ece9;
  --success-green: #2ecc71;
  --danger-soft: #fbf0f0;
}

/* 📱 ปรับแต่งค่าเริ่มต้นและบล็อกระบบปัดจอเพื่อรีเฟรชบนมือถือ (กฎข้อ 19 & 56) */
html {
  height: -webkit-fill-available;
}

body {
  font-family: 'Sarabun', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px; /* มาตรฐานการอ่านง่ายสำหรับผู้สูงอายุ (กฎข้อ 32) */
  color: var(--text-dark);
  background-color: var(--bg-offwhite);
  overscroll-behavior-y: none; /* ป้องกันการเผลอปัดหน้าจอมือถือลงเพื่อรีเฟรชหน้า (กฎข้อ 19) */
  min-height: 100vh;
  min-height: 100dvh; /* ปรับโครงสร้างความสูงยืดหยุ่นตามพื้นที่จริงบนมือถือ (กฎข้อ 56) */
}

.bg-offwhite {
  background-color: var(--bg-offwhite);
}

.max-width-container {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* 🟥 คลาสสีธีมเฉพาะทาง (Custom Core Classes) */
.text-danger-pastel {
  color: var(--primary-pastel-red) !important;
}

.bg-dark-pastel {
  background-color: var(--bg-dark-pastel) !important;
}

.btn-danger-pastel {
  background-color: var(--primary-pastel-red);
  color: #ffffff;
  border: none;
  transition: all 0.2s ease-in-out;
}

.btn-danger-pastel:hover, .btn-danger-pastel:focus {
  background-color: var(--primary-hover-red);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(224, 82, 82, 0.25);
}

.btn-dark-pastel {
  background-color: var(--bg-dark-pastel);
  color: #ffffff;
  border: none;
}

.btn-dark-pastel:hover {
  background-color: #1a1616;
  color: #ffffff;
}

/* 🟢 Wizard Progress Steps styling */
.wizard-step-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: #8c827f;
  font-weight: 600;
  cursor: default; /* ให้ระบบเปลี่ยนสิทธิ์กดผ่าน JS คัดกรองเท่านั้น */
  transition: all 0.3s ease;
}

.wizard-step-btn.active {
  background-color: var(--danger-soft) !important;
  border-color: var(--primary-pastel-red) !important;
  color: var(--primary-pastel-red) !important;
}

.wizard-step-btn .step-num {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background-color: #e6e0dd;
  color: #ffffff;
  margin-right: 5px;
  font-size: 14px;
}

.wizard-step-btn.active .step-num {
  background-color: var(--primary-pastel-red);
}

/* 📊 DataTables UI Customization (ธีมแดงพาสเทลตามกฎข้อ 27) */
.table-danger-pastel {
  background-color: var(--primary-pastel-red) !important;
  color: #ffffff !important;
}

.table-danger-pastel th {
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--primary-pastel-red) !important;
  color: white !important;
  border-color: var(--primary-pastel-red) !important;
}

.long-table-scroll {
  max-height: 500px;
  overflow-y: auto;
}

/* 📅 Smart Date Input Picker Overlay Layer (กฎข้อ 61) */
.custom-date-container {
  position: relative;
}

.date-icon-trigger {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.native-hidden-picker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

/* 📝 Textarea Auto-Expand Limit (กฎข้อ 10) */
textarea.auto-expand {
  max-height: 200px;
  overflow-y: auto;
  resize: none;
}

/* ⏳ GLOBAL LOADING OVERLAY & SPINNER (กฎข้อ 54) */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(43, 37, 37, 0.6); /* พื้นหลังโปร่งแสงคุมโทนดาร์กพาสเทล */
  z-index: 9999 !important; /* ตรึงอยู่ชั้นบนสุดของแอปพลิเคชัน */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 📈 NEXT-GEN UI: SKELETON LOADER SHIMMER EFFECT (กฎข้อ 33) */
.shimmer-placeholder {
  background: linear-gradient(90deg, #f0ece9 25%, #f7f5f4 50%, #f0ece9 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 6px;
  height: 24px;
}

@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 📱 Mobile Layout Navigation Bar Safe Zone Targets (ปุ่มสัมผัสเด่นชัด กฎข้อ 32 & 56) */
.bottom-nav-safe-mobile {
  z-index: 1030;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.btn-mobile-nav {
  background: none;
  border: none;
  color: #8c827f;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  min-width: 44px; /* บังคับขนาด Mobile Target ไม่ต่ำกว่า 44x44px (กฎข้อ 32) */
  min-height: 44px;
}

.btn-mobile-nav.active {
  color: var(--primary-pastel-red);
}

/* 🔒 Disabling view styling for unauthorized roles */
.step-locked {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* 🖨️ @MEDIA PRINT: ระบบควบคุมสไตล์สำหรับสั่งพิมพ์ตารางรายงานและบันทึก PDF (กฎข้อ 28) */
@media print {
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 12pt;
  }
  
  /* ซ่อนอินเตอร์เฟซและปุ่มควบคุมทั้งหมดที่ไม่เกี่ยวข้องขณะพิมพ์ */
  .print-hide, 
  header, 
  .wizard-progress-bar, 
  .bottom-nav-safe-mobile, 
  .btn, 
  .dataTables_filter, 
  .dataTables_length, 
  .dataTables_paginate, 
  .dataTables_info {
    display: none !important;
  }
  
  /* เปิดการทำงานส่วนหัวกระดาษรายงานทางการ */
  .print-header-element {
    display: block !important;
  }
  
  .card, .print-no-shadow {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  
  .table th, .table td {
    border: 1px solid #333333 !important;
    padding: 6px !important;
    color: #000000 !important;
  }
}