@charset "UTF-8";
/* หน้า login */
.login {
  background: linear-gradient(180deg, #D3DFF0 0%, #EAE9FF 50%, #FFFFFF 100%);
  overflow-y: hidden;
  height: 100vh;
  align-content: space-evenly;
}

.login .logo {
  margin: 0px auto 0;
}

.login .content {
  box-shadow: 0 6px 18px rgba(53, 77, 120, 0.25);
  border-radius: 15px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%);
  margin: 0px auto 10px;
}

.login .content .form-actions {
  border-bottom: 0px solid;
  padding: 10% 30px 15% 30px;
}

.login .content .form-actions .btn {
  margin: 10px 0 10px 0;
  background-color: #6A7D9C;
  width: 100%;
  border-radius: 8px !important;
}

.login .content .create-account {
  padding: 0px;
  background-color: white;
}

.login .content .form-control {
  background-color: white;
  border: 1px solid #A7A7A7;
  border-radius: 5px !important;
}

#imgLogin {
  margin: 10% 0 10% 0 !important;
}

/* page-header */
.page-header.navbar .page-logo,
.page-header.navbar .page-top,
.page-header.navbar {
  background: linear-gradient(180deg, #D3DFF0 0%, #EAE9FF 50%, #FFFFFF 100%);
}

.page-header.navbar .menu-toggler {
  background-image: url(../images/pageImgAll/sidebar-toggler-black.png) !important;
}

.page-header.navbar .top-menu {
  float: left;
}

.gold-sliver-bar {
  display: flex;
  width: 50%;
  float: right;
  padding: 15px 0 0 0;
}

.gold-sliver-col {
  flex: 1;
}

.gold-sliver-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.gold-sliver-table th {
  text-align: center;
}

.gold-sliver-table td {
  text-align: center;
}

.gold-sliver-divider {
  width: 2px;
  background-color: #CECECE;
  margin: 0 12px;
}

.page-sidebar .page-sidebar-menu>li>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a {
  padding: 20px 0 0 0;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.page-sidebar,
body,
ul.page-sidebar-menu.page-header-fixed.page-sidebar-menu-hover-submenu.page-sidebar-menu-closed>li.nav-item,
ul.page-sidebar-menu>li.nav-item>ul.sub-menu,
.page-sidebar .page-sidebar-menu li.active>.sub-menu {
  background-color: #425470 !important;
}

.page-sidebar .nav-item {
  margin-bottom: 8px !important;
}

.page-sidebar .nav-item>a {
  display: flex;
  align-items: center;
  padding: 10px !important;
  margin: 0 8px !important;
  color: #fff;
  transition: all 0.3s ease;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* ไล่สีจากสว่างไปเข้ม ทำให้ดูนูน */
  background: linear-gradient(to bottom, #6a7b9d 0%, #3a4a6d 100%) !important;
  /* เงาภายใน: แสงขาวด้านบน + เงาด้านล่าง */
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    0 5px 10px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  /* เพิ่มความนูนด้วย transform */
  position: relative;
}

.page-sidebar .nav-item>a .menu-icon {
  filter: none;
  margin-left: -5px !important;
  margin-top: 6px !important;
}

.page-sidebar .nav-item>a>i {
  margin-left: -2px !important;
  margin-top: 6px !important;
}

.title {
  margin-left: -5px !important;
}

.page-sidebar .nav-item>a:hover .menu-icon,
.page-sidebar .nav-item.active>a .menu-icon,
.page-sidebar .nav-item.open>a .menu-icon,
.page-sidebar .nav-item>a:hover>i,
.page-sidebar .nav-item.active>a>i,
.page-sidebar .nav-item.open>a>i {
  filter: brightness(0) invert(1);
}

/* SVG sidebar hover/active behavior copied from goldshop-pos-branch custom.css. */
.page-sidebar-menu>li>a svg-icon,
.page-sidebar-menu>li>a>svg-icon {
  transition: filter 0.2s ease, opacity 0.2s ease;
  opacity: 0.8;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
}

.page-sidebar-menu>li>a:hover svg-icon,
.page-sidebar-menu>li>a:hover>svg-icon,
.page-sidebar-menu>li.open>a svg-icon,
.page-sidebar-menu>li.open>a>svg-icon,
.page-sidebar-menu>li.active>a svg-icon,
.page-sidebar-menu>li.active>a>svg-icon {
  opacity: 1;
  filter: brightness(1.3) drop-shadow(0 0 3px rgba(16, 152, 190, 0.5)) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
}

.page-sidebar .nav-item>a:hover {
  /* สร้างเส้นโค้งสะท้อนแสงจากซ้ายไปขวาพาดขึ้นบน */
  background-image:
    /* ชั้นบน: วงรีสีขาวโปร่งแสง เพื่อทำเส้นโค้ง */
    radial-gradient(ellipse 170% 200% at 60% 120%,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0.3) 45%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%),
    /* ชั้นล่าง: ไล่สีน้ำเงินเทาที่เป็นพื้นหลังหลัก */
    linear-gradient(to bottom, #aab9d4 0%, #8395b7 100%) !important;

  /* ปรับขอบและเงาให้ดูสว่างขึ้น */
  /* border: 2px solid #FFC445 !important; */
  /* กดลง = ลด shadow และ transform */
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-3px);

  color: #ffffff !important;
}

body {
  --sidebar-gradient-dark: rgba(255, 255, 255, 0.3);
  --sidebar-gradient-light: rgba(255, 255, 255, 0.3);
}

.page-sidebar .nav-item.active>a,
.page-sidebar .nav-item.open>a {
  /* สร้างเส้นโค้งสะท้อนแสงจากซ้ายไปขวาพาดขึ้นบน */
  background-image:
    radial-gradient(ellipse 170% 200% at 60% 120%,
      rgba(255, 255, 255, 0) 45%,
      var(--sidebar-gradient-dark) 45%,
      var(--sidebar-gradient-light) 50%,
      rgba(240, 236, 236, 0.985) 100%),
    linear-gradient(to bottom, #aab9d4 0%, #8395b7 100%) !important;

  border-left: 2.5px solid #CD8D34 !important;
  border-right: 2.5px solid #CD8D34 !important;
  border-top: 2.5px solid #FFC445 !important;
  border-bottom: 2.5px solid #FFC445 !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(2px);

  color: #ffffff !important;
  /* gradient สีขาว ของ top bottom */
  /* border-top: 2.5px solid transparent !important; */
  /* border-bottom: 2.5px solid transparent !important; */
  /* background-image: */
  /* Top gradient border */
  /* linear-gradient(to right, #CD8D34, #FCFCFC, #CD8D34), */
  /* Bottom gradient border */
  /* linear-gradient(to right, #CD8D34, #FCFCFC, #CD8D34), */
  /* Radial gradient effect */
  /* radial-gradient(ellipse 170% 200% at 60% 120%, */
  /* rgba(255, 255, 255, 0) 45%, */
  /* var(--sidebar-gradient-dark) 45%, */
  /* var(--sidebar-gradient-light) 50%, */
  /* rgba(240, 236, 236, 0.985) 100%), */
  /* Base gradient */
  /* linear-gradient(to bottom, #aab9d4 0%, #8395b7 100%) !important; */
  /* background-size: 100% 2.5px, 100% 2.5px, 100% 100%, 100% 100% !important; */
  /* background-position: top, bottom, center, center !important; */
  /* background-repeat: no-repeat !important; */
}

.page-sidebar .page-sidebar-menu>li.active>a {
  font-size: initial;
}

.page-sidebar .sub-menu>li {
  margin-bottom: 8px !important;
}

.page-sidebar .sub-menu>li>a {
  display: flex;
  align-items: center;
  padding: 10px 18px 10px 28px !important;
  color: white !important;
  transition: all 0.3s ease;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(to bottom, #6a7b9d 0%, #3a4a6d 100%) !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    0 5px 10px rgba(0, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  position: relative;
}

.page-sidebar .sub-menu>li.active>a,
.page-sidebar .page-sidebar-menu .sub-menu>li.open>a,
.page-sidebar .sub-menu>li>a:hover {
  background-image:
    radial-gradient(ellipse 170% 200% at 60% 120%,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0.3) 45%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(to bottom, #aab9d4 0%, #8395b7 100%) !important;
  border: 2px solid #FFC445 !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2),
    0 2px 5px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(2px);
}

.page-sidebar .page-sidebar-menu>li>a>i[class*=icon-],
.page-sidebar .page-sidebar-menu>li>a>i[class^=icon-],
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>i[class*=icon-],
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>i[class^=icon-] {
  color: #A5B1C4 !important;
}

.page-sidebar .page-sidebar-menu {
  margin-top: 10px !important;
}

@media screen and (max-width: 992px) {
  .gold-sliver-bar {
    width: 50%;
    padding: 10px 0 0 0;
    margin-right: 3%;
  }
}

@media screen and (max-width: 768px) {
  .gold-sliver-bar {
    width: 100%;
    float: none;
  }

  .page-header.navbar .page-top {
    clear: none;
  }

  .page-header.navbar {
    height: 132px;
  }
}

@media screen and (max-width: 468px) {
  ul.nav.navbar-nav.pull-right li.dropdown.dropdown-user {
    width: 65px;
  }

  .page-header.navbar {
    height: 190px;
  }
}

.page-content-wrapper>.page-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Modal header styling */
.modal-header {
    background-color: #476A9E !important;
    color: #fff !important;
}

.modal-header .close {
    color: #000000 !important;
    opacity: 0.8 !important;
}

.modal-header .modal-title {
    color: #ffffff !important;
}