.info {
	font-weight: 700;
	text-decoration: none;
}

a { color: #084BAD; }

.collection-item { border: 1px solid #cccccc; margin: 5px; background: #eee; padding: 5px 0; font-size: 1.2em; }
#sortable {margin: 0;padding: 0;}

iframe {
	width: 100%;
	height: 100%;
	border: none;
}
#myDiv {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.box {
	font-family: 'Open Sans', sans-serif;
	position: fixed;
	bottom: 0;
	left: 0;
	width:100%;
	margin-bottom: 0px;
	padding: 10px;
	z-index: 9999;
	text-align: center;
}

.social-proof a { color: #fff; }
.social-proof-box { 
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
}

#downline1 {float:left; width:100%; max-width:600px; overflow: auto;}
.geserkanan {margin:0; padding: 0 0 0 15px; background:url('img/line.gif') repeat-y;}
.listmember {background:url('img/line.gif') repeat-y;}
#detilprofil {    
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* #detilprofil {display:inline-block; margin-left:20px; border-left:solid 1px #cccccc;padding:5px} */
a:hover {cursor:pointer;}
#themember {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  background-color: #ffffff;
  width: 100%;
  max-width: 500px;
  height: 80%;
  overflow-y: scroll;
  padding: 10px;
}
.close {
	position: fixed;
  top: 10px;
  right: 10px;
	padding: 5px;
	background-color: red;
	color: white;
}

.table {
  background:#ffffff;
}
.password-wrapper {
  position: relative;
}

.password-wrapper input[type="password"] {
  padding-right: 30px; /* Ruang untuk ikon */
}

.password-wrapper .toggle-password {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  cursor: pointer;
}

.card-body img {
  max-width: 100%;
}

/* New Dashboard Layout Styles */
html, body { /* Ensure html also takes full height for flex to work properly */
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll on body */
}

body.dashboard-active { /* Add a class to body when dashboard layout is active */
  display: flex;
  min-height: 100vh;
  flex-direction: row; /* Main layout direction */
  overflow: hidden; /* Prevent body scroll, let sidebar/content scroll */
}

.dashboard-wrapper {
  display: flex;
  flex-grow: 1;
  width: 100%; /* Ensure wrapper takes full width */
}

.sidebar {
  width: 260px;
  background-color: #1A2C42; /* Darker blue from example */
  color: #bdc3c7; /* Lighter text color for better contrast */
  padding: 0; 
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto; /* Allows scrolling of menu items if they exceed height */
  overflow-x: hidden; /* Prevent horizontal scroll within sidebar */
  z-index: 1030;
  transition: width 0.3s ease; /* Animate width change */
  border-right: 1px solid #34495e;
  display: flex; /* Use flex to push collapse trigger to bottom */
  flex-direction: column; /* Stack logo, menu, trigger vertically */
}

.sidebar .logo {
  padding: 15px; 
  text-align: center;
  border-bottom: 1px solid #34495e; 
  background-color: #243B55; 
  flex-shrink: 0; /* Prevent logo from shrinking */
}

.sidebar .logo img {
  max-height: 45px; 
  width: auto;
  transition: max-height 0.3s ease;
}

.sidebar-menu {
  list-style: none;
  padding: 15px; 
  margin: 0;
  flex-grow: 1; /* Allow menu to take available space */
  overflow-y: auto; /* Scroll for menu items if sidebar itself doesn't scroll enough */
}

.sidebar-menu .menu-header {
  padding: 15px 0px 8px 0px; 
  font-size: 0.85em; 
  color: #7f8c8d; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  white-space: nowrap; /* Prevent header text from wrapping */
}

.sidebar-menu li a {
  display: flex; 
  align-items: center; 
  padding: 10px 12px; 
  color: #bdc3c7; 
  text-decoration: none;
  border-radius: 5px;
  margin-bottom: 3px; 
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 0.95em;
  white-space: nowrap; /* Prevent link text from wrapping */
}
.sidebar-menu li a .menu-text { /* Added span in menu.php if needed, or target direct text */
    transition: opacity 0.2s ease;
}


.sidebar-menu li a:hover {
  background-color: #254A6D; 
  color: #ffffff;
}

.sidebar-menu li a.active {
  background-color: #3498db; 
  color: #ffffff;
  font-weight: 500;
}

.sidebar-menu li a i.fas,
.sidebar-menu li a i.fab,
.sidebar-menu li a i.far { 
  margin-right: 12px;
  width: 20px; 
  text-align: center;
  font-size: 1.1em; 
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.sidebar-menu .submenu {
  list-style: none;
  padding-left: 20px; 
  margin-top: 5px;
  margin-bottom: 10px;
  display: block; 
}

.sidebar-menu .submenu li a {
  padding: 8px 12px;
  font-size: 0.9em; 
  color: #95a5a6; 
}

.sidebar-menu .submenu li a:hover {
  color: #ffffff;
  background-color: #254A6D;
}
.sidebar-menu .submenu li a.active {
  color: #ffffff;
  font-weight: 500;
}

.sidebar-menu li a.has-submenu {
  position: relative; 
}

.sidebar-menu li a.has-submenu .arrow-icon {
  transition: transform 0.3s ease, opacity 0.2s ease;
  font-size: 0.8em; 
  position: absolute; 
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-menu li a.has-submenu[aria-expanded="true"] .arrow-icon {
  transform: translateY(-50%) rotate(180deg);
}

.sidebar-menu ul.submenu.collapse {
  display: none;
  padding-left: 10px; 
}
.sidebar-menu ul.submenu.collapse.show {
  display: block;
}
.sidebar-menu ul.submenu.collapse li a {
  font-size: 0.88em; 
  padding-left: 30px; 
}

.main-content-wrapper {
  flex-grow: 1;
  margin-left: 260px; 
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto; 
  transition: margin-left 0.3s ease;
}

.top-navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #dee2e6; 
  padding: 0 20px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px; 
  position: sticky;
  top: 0;
  z-index: 1020;
}
.top-navbar .sidebar-toggler {
   display: none; 
   font-size: 1.25rem;
   color: #333;
}

.top-navbar .page-title {
  font-size: 1.1rem; 
  font-weight: 600;
  color: #333;
}
.top-navbar .dropdown-toggle::after {
    display: none; 
}
.top-navbar .dropdown-menu {
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    border: none;
}
.top-navbar .dropdown-item i {
    width: 16px; 
    text-align: center;
}

.content-area {
  padding: 25px; 
  flex-grow: 1;
  background-color: #EAEDF1; 
}

/* Sidebar Collapse Trigger Button Styles */
.sidebar-collapse-trigger {
  /* position: sticky; // Not needed if sidebar is flex and this is last item */
  /* bottom: 0; // Not needed */
  /* left: 0; // Not needed */
  width: 100%; 
  background-color: #1A2C42; 
  border-top: 1px solid #34495e;
  padding: 0; 
  z-index: 10; 
  margin-top: auto; /* Pushes to bottom in flex column */
  flex-shrink: 0; /* Prevent from shrinking */
}
.sidebar-collapse-trigger a {
  display: flex;
  align-items: center;
  padding: 15px; 
  color: #bdc3c7;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.sidebar-collapse-trigger a:hover {
  background-color: #254A6D;
  color: #ffffff;
}
.sidebar-collapse-trigger a i {
  margin-right: 12px;
  width: 20px;
  text-align: center;
  font-size: 1.1em;
  transition: transform 0.3s ease; 
}
.sidebar-collapse-trigger a .collapse-text {
  transition: opacity 0.2s ease 0.1s, max-width 0.3s ease; /* Delay opacity for smoother text hide */
  overflow: hidden;
  max-width: 150px; /* Adjust as needed for "Sembunyikan Menu" */
}

/* Styles for Collapsed Sidebar State */
body.sidebar-collapsed .sidebar {
  width: 80px; 
}
body.sidebar-collapsed .sidebar .logo img {
   max-height: 35px; 
}
body.sidebar-collapsed .sidebar .logo {
    padding: 10px 0;
    margin-bottom: 15px;
}
body.sidebar-collapsed .sidebar-menu {
  padding: 15px 5px; 
}
body.sidebar-collapsed .sidebar-menu .menu-header,
body.sidebar-collapsed .sidebar-menu li a .menu-text, /* Target text specifically */
body.sidebar-collapsed .sidebar-menu li a .arrow-icon, 
body.sidebar-collapsed .sidebar-collapse-trigger .collapse-text {
  opacity: 0;
  max-width: 0;
  visibility: hidden; /* Ensure it's not focusable */
}
body.sidebar-collapsed .sidebar-menu li a {
  justify-content: center; 
  padding: 12px 10px;
}
body.sidebar-collapsed .sidebar-menu li a i {
  margin-right: 0; 
  font-size: 1.3em; 
}
body.sidebar-collapsed .sidebar-menu ul.submenu.collapse,
body.sidebar-collapsed .sidebar-menu ul.submenu.collapse.show {
  display: none !important; 
}
body.sidebar-collapsed .main-content-wrapper {
  margin-left: 80px; 
}

body.sidebar-collapsed .sidebar-collapse-trigger a {
  justify-content: center;
}
body.sidebar-collapsed .sidebar-collapse-trigger a i.fa-rotate-180 { 
    transform: rotate(0deg); /* Point right when collapsed */
}
/* When not collapsed, the icon should point left (fa-rotate-180 handles this) */


/* Mobile adjustments */
@media (max-width: 768px) {
  body.dashboard-active .sidebar { 
    left: -260px; /* Start off-screen */
    width: 260px; /* Ensure it's full width when open */
  }
  body.dashboard-active.sidebar-open .sidebar { /* Use a dedicated class for mobile open state */
    left: 0;
    box-shadow: 3px 0 15px rgba(0,0,0,0.1);
  }
  /* When mobile sidebar is open, content margin should not change based on desktop collapse state */
   body.dashboard-active.sidebar-open .main-content-wrapper {
    margin-left: 0; /* Or a blur/overlay effect */
  }
  .main-content-wrapper { /* Default for mobile */
    margin-left: 0;
  }
  .top-navbar .sidebar-toggler { /* This is the hamburger for mobile */
    display: inline-block; 
  }
  .top-navbar .page-title.d-none.d-md-inline { 
      display: none !important;
  }
  /* Hide desktop collapse trigger on mobile, mobile has its own toggle */
  .sidebar-collapse-trigger {
      display: none;
  }
}

/* Ensure breadcrumbs have some space */
.breadcrumb {
  margin-bottom: 1.5rem !important;
}

/* Custom WhatsApp Button Color */
.whatsapp-button-custom,
.whatsapp-button-custom:focus, /* Added focus state */
.whatsapp-button-custom:active { /* Added active state */
  background-color: #25D366 !important; 
  border-color: #25D366 !important;
  color: white !important; /* Ensure text is white */
}
.whatsapp-button-custom:hover {
  background-color: #1DA851 !important; 
  border-color: #1DA851 !important;
  color: white !important; /* Ensure text is white on hover */
}
/* Ensure icon color is also white if not inherited */
.whatsapp-button-custom i.fab.fa-whatsapp {
    color: white !important;
}