/* --- สถานะเมื่อถูกคลิก (Active) --- */
    .menu-item.is-active {
        background-color: #007bff !important; /* เปลี่ยนเป็นสีน้ำเงิน (หรือสีที่คุณชอบ) */
        color: white;
        border-color: #0056b3;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transform: translateY(-2px); /* เด้งขึ้นเล็กน้อยให้ดูมีมิติ */
        border-radius : 5px;
    }




/* Icon Wrapper for positioning the badge */
.icon-wrapper {
  position: relative;
  display: inline-block;
}
/* Base Envelope Icon Style */
.envelope-icon {
  width: 34px;
  height: 34px;
  fill: currentColor; /* Allows color to be set by the parent item */
}

/* Notification Badge (Red Dot) */
.notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  background-color: #ff3b30; /* Bright red */
  border-radius: 50%;
  border: 3px solid #ffffff; /* White border to separate from icon */
}
.item-unread {
  color: #007bff; /* Blue color for icon */
}
/* Read State */
.item-read {
  color: #8e8e93; /* Gray color for icon */
}
.item-read .menu-label {
  color: #8e8e93; /* Gray text */
}

  @keyframes progress {
    0% { left: -40%; width: 40%; }
    100% { left: 100%; width: 40%; }
  }
  .animate-progress {
    animation: progress 2s infinite linear;
  }


.table-arm{
  border: 1px solid #D4D4D4; border-collapse: collapse;

}

@media screen and (max-width: 1350px) {
  #detail_pagination {
    display: none;


  }

}

@media screen and (max-width: 970px) {
#date_update_show{
    display: none;
}

#btn_report{
  display: none !important;
}
}
/* สถานะเริ่มต้น: ซ่อนไว้และจาง */
.modal-fade {
    opacity: 0;
    pointer-events: none; /* กดไม่ได้ตอนซ่อน */
    transition: all 0.5s ease-in-out;
}

/* สถานะเมื่อเปิด: แสดงผลและนูนออกมา */
.modal-fade.active {
    opacity: 1;
    pointer-events: auto; /* กลับมาให้กดได้ */
}

/* ตกแต่งเนื้อหาข้างในให้ขยับเล็กน้อยตอนเปิด */
.modal-fade > div {
    transform: scale(0.95);
    transition: transform 0.5s ease-out;
}

.modal-fade.active > div {
    transform: scale(1);
}