/* ==========================================================================
   🤍 PVT HR  Dashboard - White Cream Premium & Luxury Motion Edition
   ========================================================================== */

:root {
  --admin-primary: #10b981;        
  --admin-primary-hover: #059669;  
  --admin-bg: #fcfcf9;             /* สีพื้นหลังขาวนวลสไตล์ครีมอ่อนยอดนิยม */
  --admin-sidebar-bg: #ffffff;     
  --admin-sidebar-text: #64748b;   
  --admin-sidebar-active: #10b981; 
  --admin-card: #ffffff;
  --admin-border: #f1f3ee;         /* เส้นขอบนุ่มพิเศษ */
  --admin-text-main: #0f172a;
  
  /* เอฟเฟกต์การเคลื่อนไหวแบบนุ่มนวลสูงสุด (Luxury Timing Function) */
  --pvt-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. โครงสร้าง Layout หลัก */
.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--admin-bg);
  font-family: 'Kanit', 'Noto Sans Thai', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 2. สไตล์เมนูด้านข้าง (Sidebar บนหน้าจอคอมพิวเตอร์) */
.sidebar {
  width: 270px;
  background-color: var(--admin-sidebar-bg);
  color: var(--admin-sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 32px 20px;
  border-right: 1px solid var(--admin-border);
  box-shadow: 6px 0 30px rgba(142, 153, 125, 0.03); /* เงานุ่มโทนเขียวนวล */
}

.sidebar .brand {
  margin-bottom: 40px;
  padding-left: 8px;
}

.admin-logo {
  width: 55px;
  height: 42px;
  object-fit: contain;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--admin-border);
  padding: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.sidebar .brand h2 {
  color: var(--admin-text-main);
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.sidebar .brand p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #94a3b8;
}

/* รายการเมนูนำทาง (Desktop) */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--admin-sidebar-text);
  text-decoration: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  transition: var(--pvt-transition);
  cursor: pointer;
  position: relative;
}

/* เอฟเฟกต์เมาส์ชี้บนคอมพิวเตอร์แบบมีอนิเมชันหน่วงเล็ก ๆ */
.nav-item:hover {
  background-color: #f8faf6; /* ขาวอมเขียวนวลจางมาก ๆ */
  color: var(--admin-text-main);
  transform: translateX(4px); /* ขยับไปขวาเบาๆ เวลาชี้ */
}

/* ปุ่มที่แอดมินกำลังเปิดอยู่ (Active) */
.nav-item.active {
  background-color: #e6f7ed !important; /* เขียวพาสเทลนุ่มนวล */
  color: var(--admin-sidebar-active) !important; 
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}

/* 3. พื้นที่แสดงเนื้อหาหลัก */
.main-content {
  flex: 1;
  padding: 40px 48px;
  overflow-y: auto;
}

.main-content h1 {
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 26px;
  color: var(--admin-text-main);
  font-weight: 600;
  letter-spacing: -0.5px;
}

/* 4. กล่องเนื้อหาแยกส่วน (Dashboard Panels / Premium Cards) */
.panel {
  background-color: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: 20px; /* เพิ่มความโค้งมนให้น่าใช้ */
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015), 0 1px 3px rgba(0, 0, 0, 0.01);
  transition: var(--pvt-transition);
}

/* อนิเมชันเมื่อชี้ไปที่กล่องเนื้อหา */
.panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(142, 153, 125, 0.06);
  border-color: #e2e7dc;
}

.panel h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
  color: #1e293b;
  font-weight: 500;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

/* อัปเกรดหน้าตากล่องสถิติด้านในแผงควบคุม */
.stat-panel {
  background: #fafaf7;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--admin-border);
  transition: var(--pvt-transition);
}
.stat-panel:hover {
  background: #ffffff;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.02);
}

.stat-panel span {
  display: block;
  color: #64748b;
  font-size: 14px;
}

.stat-panel strong {
  display: block;
  margin-top: 8px;
  font-size: 36px;
  color: var(--admin-primary);
  font-weight: 700;
}

/* 5. กล่องอัปโหลดไฟล์ CSV พรีเมียม */
.upload-box {
  border: 2px dashed #cbd5e1;
  background-color: #f8fafc;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  text-align: center;
  transition: var(--pvt-transition);
}

.upload-box:hover {
  border-color: var(--admin-primary);
  background-color: #f0fdf4;
  transform: scale(1.01);
}

/* ปุ่มกดสไตล์ Premium Soft UI */
.btn-primary {
  background-color: var(--admin-primary);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-family: 'Kanit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
  transition: var(--pvt-transition);
}

.btn-primary:hover {
  background-color: var(--admin-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-light {
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 10px 16px;
  background: #ffffff;
  color: #475569;
  font-family: 'Kanit', sans-serif;
  cursor: pointer;
  transition: var(--pvt-transition);
}
.btn-light:hover {
  background: #f8fafc;
  color: var(--admin-text-main);
}

/* 6. ตารางแอดมินพรีเมียม */
.table-scroll {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--admin-border);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.admin-table th {
  background-color: #f8faf6; /* หัวตารางสีนวลตา */
  color: #475569;
  font-weight: 500;
  font-size: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--admin-border);
}

.admin-table td {
  padding: 16px;
  border-bottom: 1px solid var(--admin-border);
  font-size: 14px;
  color: #334155;
  transition: var(--pvt-transition);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

/* อนิเมชันแถวตารางเวลาเมาส์ชี้ */
.admin-table tr:hover td {
  background-color: #fcfcf9;
  color: #000000;
  padding-left: 20px; /* เอฟเฟกต์ยืดช่องไฟนุ่มๆ */
}

/* สถานะและปุ่มกดขนาดเล็ก */
.status {
  display: inline-flex;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

.btn-mini {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  margin: 2px;
  color: #ffffff;
  font-family: 'Kanit', sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: var(--pvt-transition);
}
.btn-mini:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn-mini.approve { background: #10b981; box-shadow: 0 2px 8px rgba(16,185,129,0.2); }
.btn-mini.reject { background: #ef4444; box-shadow: 0 2px 8px rgba(239,68,68,0.2); }


/* ==========================================================================
   📱 MOBILE RESPONSIVE LUXURY ANIMATED SIDEBAR (ลงล่างจอสีขาวนวล)
   ========================================================================== */

@media (max-width: 860px) {
  .app-shell {
    display: flex !important;
    flex-direction: column !important;
  }

  .main-content {
    padding: 24px 16px 100px 16px !important;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* แถบเมนูล่างสไตล์แอปหรู (Glassmorphic White Cream) */
  aside.sidebar, .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 68px !important;
    background-color: rgba(253, 253, 251, 0.95) !important; /* ขาวนวลแบบโปร่งแสงเล็กน้อย */
    backdrop-filter: blur(10px); /* สไตล์เบลอหลังแบบ iOS */
    border-top: 1px solid rgba(238, 240, 235, 0.8) !important;
    border-right: none !important;
    padding: 0 8px !important;
    margin: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.04) !important;
    border-radius: 20px 20px 0 0; /* หัวมุมมนด้านบนดูพรีเมียม */
  }

  aside.sidebar .brand, .sidebar .brand {
    display: none !important;
  }

  .side-nav, aside.sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ปุ่มเมนูล่างมือถือพร้อม Elastic Tap Effect */
  .nav-item, aside.sidebar .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    padding: 2px !important;
    margin: 0 !important;
    font-size: 10px !important;
    color: #78889b !important;
    background: transparent !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: var(--pvt-transition);
  }

  .nav-item:hover {
    transform: none !important; /* ปิดการเลื่อนซ้ายขวาบนมือถือ */
  }
  
  /* เอฟเฟกต์สปริงเวลาใช้นิ้วกดบนมือถือ */
  .nav-item:active {
    transform: scale(0.92); 
  }

  /* ปุ่ม Active บนมือถือ (สีเขียวพาสเทลนุ่มตาเด่นชัด) */
  .nav-item.active, aside.sidebar .nav-item.active {
    background-color: #e6f7ed !important;
    color: #10b981 !important;
    font-weight: 600;
    border-radius: 12px;
    height: 80% !important; /* ย่อความสูงกล่องไฮไลต์ให้พอดีไอคอนแอป */
  }
}

/* ==========================================================================
   🔙 PREMIUM BACK BUTTON (สำหรับหน้าย่อยฝั่งพนักงาน)
   ========================================================================== */

.back-nav {
  display: flex;
  align-items: center;
  margin-bottom: 16px; /* ระยะห่างจากหัวข้อด้านล่าง */
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  background: #ffffff;
  color: var(--text);
  font-family: "Kanit", sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(142, 153, 125, 0.03);
  cursor: pointer;
  transition: var(--pvt-ease); /* ใช้แอนิเมชันสมูทตัวเดียวกับหลัก */
}

/* เอฟเฟกต์ตอนใช้นิ้วแตะปุ่มย้อนกลับ (Elastic Tap) */
.btn-back:active {
  transform: scale(0.92);
  background: #fafaf8;
  border-color: #cbd5e1;
}

.back-icon {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary); /* ลูกศรสีเขียวพรีเมียมชี้ทาง */
  transition: var(--pvt-ease);
}

/* เพิ่มแอนิเมชันลูกศรขยับถอยหลังเบา ๆ ตอนกด */
.btn-back:active .back-icon {
  transform: translateX(-4px);
}