/* ปรับพื้นหลังของ body */
body {
  background-color: #FBFBFB;
  color: #151d33;
}



.form-control:focus {
  background-color: #FBFBFB;
  color: #151d33;
  border-color: #888;
}

/* ปรับปุ่ม */
.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  background-color: #0056b3;
  border-color: #004a9e;
}

.sidebar .nav-item .nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 8px;
  color: #ffffff;
  background-color: transparent;
  transition: background 0.3s ease;
  width: 100%;
}

.sidebar .nav-item .nav-link i.menu-icon {
  margin-right: 10px;
  font-size: 1.2rem;
}

.sidebar .nav-item .nav-link:hover {
  background-color: #2c2f3a;
  color: #56ccf2;
}

.sidebar .nav-item.active .nav-link {
  background-color: #1f5eff;
  color: white;
}

.sidebar .nav-item.active .nav-link i.menu-icon {
  color: white;
}

@media screen and (max-width: 991px) {
  .sidebar .nav-item.nav-profile .nav-link {
    padding: 1rem 1.2rem !important;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sidebar .nav-profile-text {
    text-align: right; !important;
    width: 100%;
  }
}


#sidebar { transition: margin-left .3s ease; }
#sidebar.active { margin-left: -260px; }
@media (min-width: 768px){
  #sidebar { margin-left: 0; }   /* จอ md+ โชว์เสมอ */
}


/* ถ้าใช้ fixed-top */
main{ padding-top: 70px; }  /* 60px สูงโลโก้ + 10px margin */


/* ——— Sidebar ——— */
#sidebarMenu {
  width: 280px;                 /* กว้างขึ้นนิดหน่อย */
  border-right: 1px solid #e0e0e0;
}

#sidebarMenu .offcanvas-body {   /* รีเซ็ต padding */
  padding: 0;
}

#sidebarMenu .profile-block {    /* กล่องโปรไฟล์ด้านบน */
  background:#f5f7ff;
  padding: 1.25rem 1rem;
}
#sidebarMenu .profile-block .name {
  font-weight: 600;
  font-size: 1rem;
}

#sidebarMenu .nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .70rem 1.25rem;
  font-size: 15px;
  border-radius: 0;
  color:#333;
}
#sidebarMenu .nav-link:hover {
  background:#f0f4ff;
}
#sidebarMenu .nav-link.active {
  background:#0d6efd;
  color:#fff;
  font-weight: 600;
}
.sidebar-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

#sidebarMenu hr { margin: 1rem 0; }

/* ——— ปรับ layout จอเล็ก ——— */
@media (max-width: 767.98px){
  #sidebarMenu { width: 100%; }      /* offcanvas เต็มจอ */
  #sidebarMenu .nav-link { font-size: 1rem; }
}




/* ——— Layout ——— */
#sidebarMenu { min-height: 100vh; }
@media (max-width:767.98px){ #sidebarMenu{ width:100%!important; } }

/* ——— โปรไฟล์ ——— */
.profile-block{
  background:#f5f7ff;
  padding:1.25rem 1.25rem .75rem;
}
.profile-block .role{ font-weight:600; }
.profile-block .fullname{ color:#6f6f6f; }

/* ——— เมนู ——— */
.nav-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1.25rem; font-size:15px; color:#333;
  transition:background .15s;
}
.nav-link:hover{ background:#eef3ff; }
.nav-link.active{
  background:#0d6efd; color:#fff; font-weight:600;
}
.sidebar-icon{ font-size:1.3rem; }

/* ——— Logout ——— */
.logout-link{ color:#d9534f; }
.logout-link:hover{ background:#fbe9e9; color:#c2362c; }