:root {
	/* Member theme: magenta/red (selaras admin) */
	--main-bg-color: #d81b60;
	--second-bg-color: #ad1457;
	--font-color: #222;
}

body {
	color: var(--font-color) !important;
}

.table {
	color: var(--font-color) !important;
}

.carousel-control-next,
.carousel-control-prev {
	z-index: unset;
}
.navbar-nav {
	border-radius: 0px 30px 0px 0px;
	transition: all 0.3s ease;
}

.field-icon {
	float: right;
	bottom: 32px;
	right: 15px;
	position: relative;
	z-index: 2;
}

#page-content {
	flex: 1 0 auto;
}

/* Custom base Color */
.page-item.active .page-link {
	background-color: var(--main-bg-color);
	border-color: var(--main-bg-color);
}
.page-link {
	color: var(--main-bg-color);
}
.page-link:hover {
	background-color: #02a07170;
	color: #fff;
}
.bg-gradient-success {
	background-color: var(--main-bg-color) !important;
	background-image: linear-gradient(180deg, #f06292 10%, #d81b60 100%) !important;
}

.btn-success {
	background-color: var(--main-bg-color);
	border-color: var(--second-bg-color);
}

.btn-success:hover {
	background-color: var(--second-bg-color);
	border-color: var(--main-bg-color);
}

.btn-outline-success {
	border-color: var(--main-bg-color);
	color: var(--main-bg-color);
}

.btn-outline-success:hover {
	background-color: var(--second-bg-color);
	border-color: var(--main-bg-color);
}

/* Custom Sidebar */
.sidebar-dark .sidebar-brand {
	color: rgba(255, 255, 255, 0.95);
	/* margin: 20px !important; */
}

.sidebar-dark .nav-item.active .nav-link {
	color: #fff;
}
.sidebar-dark .nav-item.active .nav-link i {
	color: #fff;
}

.sidebar-dark .nav-item .nav-link {
	color: rgba(255, 255, 255, 0.92) !important;
	opacity: 1 !important; /* jangan transparan */
}
.sidebar-dark .nav-item .nav-link i {
	color: rgba(255, 255, 255, 0.85);
}
.sidebar-dark .nav-item .nav-link:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.12);
}
.sidebar-dark .nav-item .nav-link:hover i {
	color: #fff;
}

.sidebar-dark .sidebar-heading {
	color: rgba(255, 255, 255, 0.75);
}

.sidebar-dark #sidebarToggle {
	background-color: rgba(255, 255, 255, 0.22);
	/* color: var(--font-color); */
}

/* Layering: sidebar/topbar jangan ketiban content */
#accordionSidebar {
	position: relative;
	z-index: 1040;
}
#content-wrapper {
	position: relative;
	z-index: 1;
}
.topbar {
	position: sticky;
	top: 0;
	z-index: 1030;
}

/* Pastikan dropdown user (Logout, Profile, dll) selalu di atas konten */
.topbar .dropdown-menu {
	z-index: 1100 !important;
}

/* Modal: di atas semua elemen, backdrop di bawah modal agar tombol bisa diklik */
body .modal {
	z-index: 99999 !important;
	position: fixed !important;
}
body .modal-backdrop {
	z-index: 99998 !important;
}
body .modal .modal-dialog {
	position: relative;
	z-index: 1;
}

/* Navbar responsive - mobile-friendly */
.topbar {
	flex-wrap: nowrap;
	min-height: 4.375rem;
}
.topbar .navbar-nav {
	flex-direction: row;
	align-items: center;
}
.topbar .nav-link {
	padding: 0.5rem 0.75rem;
}
/* Username di topbar jangan ketabrak */
.topbar #userDropdown {
	min-width: 0;
	display: flex;
	align-items: center;
}
.topbar #userDropdown .img-profile {
	flex-shrink: 0;
}
.topbar #userDropdown span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 120px;
}
@media (min-width: 992px) {
	.topbar #userDropdown span {
		max-width: 180px;
	}
}
/* Level name: tetap tampil, font lebih kecil di mobile */
.nav-item-level span {
	font-size: 0.75rem;
}
@media (min-width: 576px) {
	.nav-item-level span {
		font-size: 0.875rem;
	}
}
@media (max-width: 768px) {
	.topbar .d-none.d-sm-inline-block {
		display: none !important;
	}
}

/* Submenu collapse - responsive, tidak fixed */
.collapse-inner {
	position: static !important;
	max-height: 70vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Khusus menu Laporan: batasi tinggi supaya tidak nabrak footer */
#laporanCollapse .collapse-inner {
	max-height: 50vh;
	overflow-y: auto;
}

/* Legacy form fields: banyak view pakai <span class="field"><input ...> */
.field input,
.field select,
.field textarea {
	display: block;
	width: 100%;
	max-width: 520px;
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #222;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.35rem;
}
.field select {
	height: calc(1.5em + 1rem + 2px);
}
@media (max-width: 576px) {
	.field input,
	.field select,
	.field textarea {
		max-width: 100%;
	}
}

/* Form consistency - card & form-group */
.card .form-control,
.card .form-group input,
.card .form-group select,
.card .form-group textarea {
	width: 100%;
	max-width: 100%;
}
.card .card-body {
	padding: 1.25rem;
}
@media (max-width: 768px) {
	.card .card-body {
		padding: 1rem;
	}
}
.form-group label {
	font-weight: 500;
	color: var(--font-color);
	margin-bottom: 0.35rem;
}
/* Custom Login */
.bg-login-image {
	background-size: cover !important;
}

.custom-form-login {
	padding: 30px 0px !important;
}

/* Carousel */
.carousel-item {
	/* width: 1200px; */
	height: 500px;
}
.carousel_img {
	width: 100%;
	height: 500px;
	object-fit: cover;
}

img {
	border-radius: 10px;
}

.caption {
	display: flex;
	align-items: center;
	justify-content: center;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* ================================== */

/* Sponsor Tree */
.icon {
	padding: 0px 10px;
	width: 80px;
}
#loading-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.list-group {
	list-style-type: none; /* Remove list item bullets */
	padding-left: 0; /* Remove default left padding */
}

.list-group-item.folder {
	position: relative;
	margin-bottom: 10px; /* Add some space between folder items */
	border: none; /* Remove the border */
}

.list-group-item.folder > a {
	text-decoration: none; /* Remove the underline */
	display: block;
	padding: 10px; /* Add padding for better appearance */
}

.list-group-item.folder:before {
	content: "";
	position: absolute;
	top: 0;
	left: 5px; /* Adjust the position based on your design */
	width: 4px; /* Adjust the thickness of the line */
	height: 100%;
	background-color: var(--main-bg-color); /* Adjust the color of the line */
}

.list-group-item.file {
	position: relative;
	margin-bottom: 5px; /* Add some space between file items */
	border: none; /* Remove the border */
	margin-left: 50px;
}

.list-group-item.file > a {
	text-decoration: none; /* Remove the underline */
	display: block;
	padding: 5px; /* Add padding for better appearance */
}

.list-group-item.file:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -65px; /* Adjust the position based on your design */
	height: 4px; /* Adjust the thickness of the line */
	width: 150px; /* Adjust the length of the line */
	background-color: var(--main-bg-color); /* Adjust the color of the line */
}
.node-link {
	text-decoration: none !important;
	width: 100%;
	cursor: pointer;

	border: 1px solid #098b5b;
	color: var(--font-color);
	font-family: arial, verdana, tahoma;
	display: inline-block;
	background: var(--main-bg-color);
	border-radius: 5px;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.node-link .row {
	align-items: center;
}

.node-link:hover {
	background: var(--second-bg-color);
	color: #fff !important;
	border: 1px solid var(--main-bg-color);
}

.table.table-sponsor {
	color: var(--font-color) !important;
}
.table.table-sponsor:hover {
	color: #fff !important;
}

.container-fluid.sponsor-tree {
	/* Set a max-width for the container */
	max-width: 100%;
	overflow: hidden;
}
#treeview {
	/* Add styles for the treeview container */
	overflow-x: auto;
}
/* ================================== */

/* Tree */
/* Tree */
/*Now the CSS*/
* {
	margin: 0;
	padding: 0;
}

.img-nodes {
	width: 7rem;
	object-fit: contain;
}
.img-nodes-2 {
	width: 5rem;
	object-fit: contain;
}

.tree ul {
	padding-top: 20px;
	position: relative;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.tree li {
	float: left;
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 5px 0 5px;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
	content: "";
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 3px solid var(--second-bg-color);
	width: 50%;
	height: 20px;
}
.tree li::after {
	right: auto;
	left: 50%;
	border-left: 3px solid var(--second-bg-color);
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
	padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
	border-right: 3px solid var(--second-bg-color);
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 3px solid var(--second-bg-color);
	width: 0;
	height: 20px;
}

.tree li a {
	width: 200px;
	margin: 0px 10px;
	border: 1px solid #098b5b;
	padding: 5px 10px 10px 10px;
	text-decoration: none;
	color: #000;
	font-family: arial, verdana, tahoma;
	font-size: 15px;
	display: inline-block;
	background: var(--main-bg-color);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;

	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover + ul li a {
	background: var(--second-bg-color);
	color: #fff;
	border: 1px solid var(--main-bg-color);
}
/*Connector styles on hover*/
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
	border-color: var(--second-bg-color);
}

.tree-container {
	display: flex;
	/* overflow: scroll; */
	justify-content: center;
}

/* .tree-child {
	width: 1300px;
} */

.tree-child-reg {
	width: 2000px;
}

.tree-up {
	overflow-x: scroll;
}

.tree-nodes {
	height: 100px;
	margin-bottom: 30px;
}

.downline {
	width: 200px !important;
	height: 125% !important;
}

.add-btn-tree {
	height: 100px !important;
	padding: 40px !important;
}

.dataTables_processing {
	background-color: #28a745; /* Green color */
	color: #fff; /* Text color, you can adjust this as needed */
	font-size: 1.2em; /* Adjust the font size as needed */
	opacity: 0.9; /* Adjust the opacity as needed */
	border-radius: 5px; /* Adjust the border radius as needed */
	padding: 10px; /* Adjust the padding as needed */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a box shadow */
}

.zoom-sett {
	transform: scale(0.8);
}

.active {
	background-color: var(--main-bg-color) !important;
}
.inactive {
	background-color: #ff0000 !important;
	color: #fff !important;
}

@media (min-width: 781px) {
	.tree-user {
		position: relative;
		display: inline-block;
		text-align: center;
	}

	.tree-user .tree-detail {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease, opacity 0.3s ease;
		opacity: 0;
	}

	.tree-user:hover .tree-detail {
		max-height: fit-content;
		opacity: 1;
	}
}

@media (max-width: 780px) {
	/* Sidebar */
	.sidebar .sidebar-brand .sidebar-brand-text {
		display: inline !important;
		font-size: 13px !important;
	}
	.sidebar .sidebar-brand .sidebar-brand-text h1 {
		font-size: 13px !important;
	}
	/* Trinary */
	.zoom-sett {
		transform: scale(0.5);
	}

	.container-fluid.sponsor-tree {
		width: 2000px;
	}

	/* Carousel */
	.carousel-item {
		/* width: 1200px; */
		height: 200px;
	}
	.carousel_img {
		width: 100%;
		height: 200px;
		object-fit: contain;
	}
}
.sponsor-tree {
	overflow-x: scroll;
	width: 3000px;
}

.hr-custom-or {
	overflow: visible; /* For IE */
	padding: 0;
	border: none;
	border-top: medium double #333;
	color: #333;
	text-align: center;
}

hr.hr-custom-or:after {
	content: "atau";
	display: inline-block;
	position: relative;
	top: -0.7em;
	font-size: 1em;
	padding: 0 0.25em;
	background: white;
}

@media (min-width: 768px) {
	/* Sidebar */
	.sidebar.toggled .sidebar-brand h1 {
		font-size: 13px !important;
	}
	.sidebar.toggled .sidebar-brand .sidebar-brand-text {
		display: inline !important;
	}
}

/* ================================== */
/* Global Modal Fix */
body .modal {
    z-index: 99999 !important;
}
body .modal-backdrop {
    z-index: 99998 !important;
}

/* ================================== */
@media (max-width: 768px) {
    .sidebar {
        padding-bottom: 100px !important; /* Increased to accommodate dropups */
    }

    /* Fix for bottom sidebar menus to open to the RIGHT (flyout) */
    li.nav-item {
        position: relative; /* Ensure anchor */
    }

    #laporanCollapse,
    #promoCollapse {
        position: absolute !important;
        left: 100% !important; /* Fly out to the right */
        bottom: 0 !important;   /* Align bottom with parent link */
        top: auto !important;
        width: 18rem;           /* Wider width as requested */
        background-color: transparent; 
        z-index: 1000;
    }

    /* Style the inner container to look like a card/menu */
    #laporanCollapse .collapse-inner,
    #promoCollapse .collapse-inner {
        background-color: #fff; 
        color: var(--font-color);
        border-radius: 0 10px 10px 0; /* Rounded corners on right side */
        box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
        margin: 0; /* Clear default margin if any */
        max-height: 60vh; /* Ensure it fits on screen verticaly if needed */
        overflow-y: auto;
    }
}

/* ==========================================================================
   New Sponsor Tree (Vertical / Timeline Style)
   ========================================================================== */
.genealogy-scroll {
    overflow-x: auto;
    padding: 20px;
    background: #f8f9fc;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

.genealogy-tree ul {
    list-style-type: none;
    padding-left: 20px;
    position: relative;
}

/* Vertical line for hierarchy */
.genealogy-tree ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px; /* Aligns with the bullets/cards */
    bottom: 0;
    width: 2px;
    background: #e3e6f0;
    z-index: 1;
}

.genealogy-tree li {
    position: relative;
    padding-left: 40px; /* Space for the line and connector */
    margin-bottom: 15px;
}

/* Horizontal connector from vertical line to card */
.genealogy-tree li::before {
    content: '';
    position: absolute;
    top: 30px; /* Vertically center roughly with the top of card */
    left: 20px; /* Connect to the main vertical line */
    width: 20px;
    height: 2px;
    background: #e3e6f0;
    z-index: 1;
}

/* Remove vertical line for the last child's empty space below it? 
   Actually, the main line typically runs full height of UL. 
   We might need to hide the line after the last item if we want it perfect.
   But simpler is fine for now. */

/* Card Styling (Horizontal-ish Card for Vertical List) */
.member-card {
    background: #fff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: inline-flex; /* Use flex to put avatar and details side-by-side */
    align-items: center;
    padding: 15px;
    min-width: 280px;
    width: 100%;
    max-width: 600px; /* Don't stretch too wide on desktop */
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--font-color);
    z-index: 2;
}

.member-card:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    z-index: 100;
}

/* Rank Indicator Bar on the Left */
.member-card .card-indicator {
    width: 6px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px 0 0 8px;
}

/* Avatar styling */
.member-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #f8f9fc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-right: 15px;
    margin-top: 0; /* Reset from previous layout */
    background: #fff;
    object-fit: cover;
    flex-shrink: 0;
}

/* Details Section */
.member-details {
    flex-grow: 1;
}

.member-name {
    font-weight: 700;
    font-size: 1rem;
    color: #333;
    margin-top: 0;
}

.member-username {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 5px;
}

.member-stats {
    font-size: 0.8rem;
    color: #555;
    background: transparent;
    padding: 0;
    margin-top: 5px;
}

.member-stats table {
    width: auto;
}
.member-stats td {
    padding-right: 15px;
}

/* Rank Colors */
.bg-rank-1 { background: linear-gradient(to bottom, #6c757d, #adb5bd); } 
.bg-rank-2 { background: linear-gradient(to bottom, #ffd700, #fdb931); } 
.bg-rank-3 { background: linear-gradient(to bottom, #00c6ff, #0072ff); } 
.bg-rank-4 { background: linear-gradient(to bottom, #11998e, #38ef7d); } 
.bg-rank-5 { background: linear-gradient(to bottom, #ee0979, #ff6a00); } 
.bg-rank-default { background: linear-gradient(to bottom, #3f5efb, #fc466b); } 

/* Responsive adjustments */
@media (max-width: 576px) {
    .genealogy-scroll {
        padding: 10px 5px; /* Less padding on small screens */
    }
    
    .genealogy-tree ul {
        padding-left: 5px; /* Less indent on mobile */
    }
    .genealogy-tree ul::before {
        left: 5px;
    }
    .genealogy-tree li {
        padding-left: 20px; /* Adjust for tighter space */
    }
    .genealogy-tree li::before {
        left: 5px;
        width: 15px; /* Shorten connector */
    }

    .member-card {
        min-width: unset; /* Remove min-width constraint */
        width: 100%; /* Full width */
        max-width: 100%;
        padding: 12px;
        flex-direction: row; /* Keep side-by-side even on mobile if possible, or column if too tight */
        align-items: flex-start; /* Align top */
    }
    
    .member-avatar {
        width: 45px;
        height: 45px;
        margin-right: 12px; /* Reduce margin */
        margin-bottom: 0;
    }
    
    .member-name {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }
    
    .member-username {
        font-size: 0.75rem;
    }

    .member-stats {
        font-size: 0.75rem;
        margin-top: 3px;
    }
    
    .member-stats td {
        padding-right: 10px;
        display: inline-block; /* Inline again for space saving */
    }
}