body {background: #f5f7fb !important;}

.fw-lighter {font-weight: lighter !important;}
.fw-light {font-weight: 300 !important;}
.fw-normal {font-weight: 400 !important;}
.fw-medium {font-weight: 500 !important;}
.fw-semibold {font-weight: 600 !important;}
.fw-bold {font-weight: 700 !important;}
.fw-bolder {font-weight: bolder !important;}
/* DEFAULT (DESKTOP FIRST) */
.kpi-swiper,
.chart-swiper,
.insight-swiper,
.swiper-div {
	display: none;
}

/* MOBILE */
@media (max-width: 768px) {
	.row-kpi,
	.row-insight,
	.row-chart {
		display: none;
	}
	.kpi-swiper,
	.chart-swiper,
	.insight-swiper,
	.swiper-div {
		display: block;
		overflow: hidden;
	}
}

.swiper-wrapper {
	box-sizing: border-box;
}
.swiper-slide {
	width: 100% !important;
}

#login-container {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f4f6f9;
}

.user-card {
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	transition: 0.2s;
}
.user-card:hover {
	transform: translateY(-2px);
}
.user-avatar {
	width: 60px;
	height: 60px;
	object-fit: cover;
}
.user-name {
	font-weight: 600;
}
.kpi-total {
	font-weight: bold;
	font-size: 16px;
}
/*
.tree-level-1 { margin-left: 0px; }
.tree-level-2 { margin-left: 20px; }
.tree-level-3 { margin-left: 40px; }
*/

.modal-fullscreen {
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}
.modal-fullscreen .modal-content {
	height: 100%;
	border-radius: 0;
	border: 0;
}
.modal-fullscreen .modal-body {
	overflow-y: auto;
}

.transaksi thead th {
	position: sticky;
	top: 0;
	background: white;
	z-index: 2;
}

#tab-header {
	overflow-x: auto;
	white-space: nowrap;
}
#tab-header .nav-item {
	display: inline-flex;
	align-items: center;
	background: #f4f6f9;
	border-radius: 4px;
	margin-right: 5px;
}
#tab-header .nav-link {
	padding: 6px 10px;
}
.close-tab {
	border: none;
	background: transparent;
	font-size: 16px;
	line-height: 1;
	padding: 0 5px;
	margin-left: 5px;
	color: #dc3545;
	font-weight: bold;
}
.close-tab:hover {
	color: #ff0000;
	transform: scale(1.2);
}

tr:nth-child(odd) {
	background: #fafafa;
}
.table-wrapper {
	height: 65vh;
	overflow: hidden;
}
.transaksi {
	min-width: 1800px;
}

.link-buka {
	cursor: pointer;
	color: #007bff;
	font-weight: 700;
}
.link-buka:hover {
	text-decoration: underline;
}

.form-floating {
	position: relative;
	margin-bottom: 10px;
}
.form-floating input {
	height: 56px;
	padding: 1rem 0.75rem;
}
.form-floating label {
	position: absolute;
	top: 3px;
	left: 0.75rem;
	padding: 1rem 0.25rem;
	pointer-events: none;
	transition: 0.2s ease;
	color: #6c757d;
	background: transparent !important;
}
.form-floating input:focus + label,
.form-floating input:not(:placeholder-shown) + label {
	transform: scale(0.85) translateY(-0.5rem);
	background: white;
	padding: 0 5px;
}

.icon-link {
	text-align: center;
	background: #fafafa;
	border: 1px solid #cfdbdf;
	border-radius: 4px;
}
.icon-link a {color: #6c757d;}
.icon-link i {font-size: 2rem;}
.icon-link p {font-size: 0.6rem; padding: 0; margin: 0;}

@media (min-width: 769px) {
	.row-icon {
		display: none;
	}
}

#pos-page {padding-bottom: 50px;}
.pos-bottom-bar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;}
#product-result {max-height: 50vh; overflow-y: auto;}
.product-item:hover {background: #f8f9fa;}
.product-card {transition: .15s ease;}
.product-card:hover {transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08)!important;}
.product-card:active {transform: scale(.98);}
.cart-detail {display:flex;}

@media (min-width:768px){
	#pos-page .container-fluid {
		max-width: 900px;
	}
}

.card {
	border-radius: 16px;
	border: 0;
	box-shadow:
		0 1px 3px rgba(0,0,0,.04),
		0 8px 24px rgba(0,0,0,.06);
}
.card-header {
	border-bottom: 1px solid rgba(0,0,0,.05);
}

/* =========================================================
   METRIC CARD
========================================================= */
.metric-card {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	padding: 18px;
	min-height: 120px;
	background: #fff;
	box-shadow:
		0 1px 3px rgba(0,0,0,.04),
		0 8px 24px rgba(0,0,0,.06);
	transition:
		transform .2s ease,
		box-shadow .2s ease;
}

/* =========================================================
   HOVER
========================================================= */
.metric-card:hover {
	transform: translateY(-2px);
	box-shadow:
		0 4px 12px rgba(0,0,0,.08),
		0 16px 32px rgba(0,0,0,.08);
}

/* =========================================================
   BODY
========================================================= */
.metric-body {
	position: relative;
	z-index: 2;
}

/* =========================================================
   VALUE
========================================================= */
.metric-value {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: #111827;
}

/* =========================================================
   LABEL
========================================================= */
.metric-label {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	letter-spacing: .2px;
}

/* =========================================================
   ICON
========================================================= */
.metric-icon {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 1;
	color: rgba(0,0,0,.06);
	transition:
		transform .25s ease,
		opacity .25s ease;

}
.metric-icon i {
	font-size: 72px;
	line-height: 1;
}

/* =========================================================
   ICON HOVER
========================================================= */
.metric-card:hover .metric-icon {
	transform: scale(1.08);
}

/* =========================================================
   COLOR VARIANTS
========================================================= */
.metric-info {
	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#17a2b8 100%
		);
}
.metric-success {
	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#28a745 100%
		);
}
.metric-warning {
	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#ffc107 50%
		);
}
.metric-danger {
	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#dc3545 100%
		);
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
	.metric-card {
		min-height: 100px;
		padding: 16px;
	}
	.metric-value {
		font-size: 26px;
	}
	.metric-label {
		font-size: 12px;
	}
	.metric-icon i {
		font-size: 52px;
	}
}

/* =========================================================
   FORM COMPONENTS
========================================================= */
.form-control,
.custom-select,
textarea {
	height: auto;
	min-height: 46px;
	border-radius: 14px;
	border: 1px solid #e5e7eb;
	background: #fff;
	padding: 12px 14px;
	font-size: 14px;
	box-shadow: none;
	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		background .2s ease;
}
.form-control:focus,
.custom-select:focus,
textarea:focus {
	border-color: #5b6cff;
	box-shadow: 0 0 0 4px rgba(91,108,255,.12);
	background: #fff;
}
.form-label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
}
select.form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,...");
	background-position: right 14px center;
	background-repeat: no-repeat;
	padding-right: 42px;
}
textarea.form-control {
	min-height: 90px;
	resize: vertical;
	line-height: 1.5;
}
.input-group-text {
	border-radius: 14px 0 0 14px;
	background: #f9fafb;
	border-color: #e5e7eb;
}

/* =========================================================
   GUDANG TABLE
========================================================= */
#gudang-wrapper table {
	font-size:12px;
	white-space:nowrap;
}
#gudang-wrapper .sticky-col {
	position:sticky;
	left:0;
	z-index:5;
	background:#fff;
}
#gudang-wrapper thead .sticky-col {
	z-index:10;
}