/* ==========================================================================
   Phone Shop – app styles layered on the Preskool template
   ========================================================================== */

:root {
	--ps-primary: #3D5EE1;
	--ps-primary-soft: rgba(61, 94, 225, .1);
	--ps-radius: 12px;
	--ps-shadow: 0 6px 24px rgba(17, 24, 39, .06);
	--ps-shadow-hover: 0 12px 32px rgba(17, 24, 39, .12);
}

/* Brand in the header -------------------------------------------------------- */
/* The anchors keep the template's show/hide rules (light / dark / mini); only the inside is laid out here. */
.brand-wrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1.2;
	text-align: left;
}

.brand-mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	background: linear-gradient(135deg, #3D5EE1 0%, #6A3DE1 100%);
	box-shadow: 0 6px 16px rgba(61, 94, 225, .35);
	flex-shrink: 0;
}

.brand-text {
	font-weight: 700;
	font-size: 17px;
	color: #202C4B;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 160px;
}

.logo-small .brand-mark {
	width: 34px;
	height: 34px;
	font-size: 18px;
}

.header-alerts {
	min-width: 320px;
}

.header-alerts .alert-row:hover {
	background: var(--ps-primary-soft);
}

.sidebar-shop:hover {
	border-color: var(--ps-primary) !important;
}

/* Cards ------------------------------------------------------------------------- */
.card {
	border-radius: var(--ps-radius);
}

.stat-card {
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
	border: 0;
	box-shadow: var(--ps-shadow);
}

.stat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ps-shadow-hover);
}

.stat-card .stat-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex-shrink: 0;
}

.stat-card .stat-value {
	font-size: 22px;
	font-weight: 700;
	color: #202C4B;
	line-height: 1.2;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stat-card .stat-label {
	color: #6B7280;
	font-size: 13px;
	margin-bottom: 0;
}

.stat-card .stat-bg-icon {
	position: absolute;
	right: -12px;
	bottom: -18px;
	font-size: 96px;
	opacity: .05;
	pointer-events: none;
}

.hero-card {
	border: 0;
	border-radius: 16px;
	background: linear-gradient(120deg, #1e2a5a 0%, #3D5EE1 55%, #6A3DE1 100%);
	color: #fff;
	overflow: hidden;
	position: relative;
}

.hero-card::after {
	content: '';
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	right: -90px;
	top: -140px;
	background: rgba(255, 255, 255, .08);
}

.hero-card::before {
	content: '';
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	right: 140px;
	bottom: -150px;
	background: rgba(255, 255, 255, .06);
}

.hero-card .hero-chip {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 12px;
	padding: 10px 14px;
	min-width: 130px;
	position: relative;
	z-index: 1;
}

.hero-card .hero-chip small {
	opacity: .8;
	display: block;
}

.hero-card .hero-chip strong {
	font-size: 17px;
}

.quick-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 8px;
	border-radius: 12px;
	border: 1px dashed #E5E7EB;
	color: #202C4B;
	text-align: center;
	transition: all .2s ease;
	height: 100%;
}

.quick-action i {
	font-size: 24px;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
}

.quick-action:hover {
	border-color: var(--ps-primary);
	background: var(--ps-primary-soft);
	color: var(--ps-primary);
	transform: translateY(-2px);
}

/* Tables & lists ------------------------------------------------------------------ */
.table-modern thead th {
	background: #F8F9FA;
	font-weight: 600;
	font-size: 13px;
	color: #515B73;
	white-space: nowrap;
	border-bottom: 0;
}

.table-modern td {
	vertical-align: middle;
}

.table-modern tbody tr:hover {
	background: rgba(61, 94, 225, .03);
}

.empty-state {
	text-align: center;
	padding: 48px 16px;
	color: #6B7280;
}

.empty-state .empty-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ps-primary-soft);
	color: var(--ps-primary);
	font-size: 34px;
	margin-bottom: 12px;
}

.product-thumb {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ps-primary-soft);
	color: var(--ps-primary);
	font-size: 22px;
	flex-shrink: 0;
}

.imei {
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .3px;
	font-size: 13px;
}

.filter-bar .form-control,
.filter-bar .form-select {
	min-width: 150px;
}

.nav-pills-modern .nav-link {
	border-radius: 10px;
	color: #515B73;
	font-weight: 500;
	padding: 8px 14px;
}

.nav-pills-modern .nav-link.active {
	background: var(--ps-primary);
	color: #fff;
	box-shadow: 0 6px 16px rgba(61, 94, 225, .3);
}

.detail-list dt {
	color: #6B7280;
	font-weight: 500;
	font-size: 13px;
}

.detail-list dd {
	color: #202C4B;
	font-weight: 500;
	margin-bottom: 12px;
}

/* Timeline (IMEI history, repair status) ----------------------------------------------- */
.ps-timeline {
	position: relative;
	padding-left: 8px;
}

.ps-timeline::before {
	content: '';
	position: absolute;
	left: 25px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: #E9EDF4;
}

.ps-timeline .tl-item {
	position: relative;
	display: flex;
	gap: 14px;
	padding-bottom: 20px;
}

.ps-timeline .tl-item:last-child {
	padding-bottom: 0;
}

.ps-timeline .tl-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	border: 3px solid #fff;
}

.journey {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.journey .step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 30px;
	background: #F3F4F6;
	color: #6B7280;
	font-size: 13px;
	font-weight: 500;
}

.journey .step.done {
	background: var(--ps-primary-soft);
	color: var(--ps-primary);
}

.journey .arrow {
	color: #CBD5E1;
}

/* Status board (repairs) ------------------------------------------------------------- */
.status-pill {
	border-radius: 12px;
	padding: 12px;
	border: 1px solid #EEF0F5;
	background: #fff;
	text-align: center;
	transition: all .2s ease;
	display: block;
	color: inherit;
}

.status-pill:hover,
.status-pill.active {
	border-color: var(--ps-primary);
	box-shadow: var(--ps-shadow);
}

.status-pill .count {
	font-size: 22px;
	font-weight: 700;
	color: #202C4B;
}

/* POS -------------------------------------------------------------------------------- */
.pos-page .content {
	padding-bottom: 0;
}

.pos-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 20px;
	align-items: start;
}

.pos-products,
.pos-cart {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--ps-shadow);
}

.pos-products {
	padding: 18px;
	min-height: calc(100vh - 140px);
}

.pos-cart {
	position: sticky;
	top: 80px;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 100px);
}

.pos-scan {
	position: relative;
}

.pos-scan input {
	height: 52px;
	border-radius: 14px;
	padding-left: 48px;
	font-size: 15px;
	border: 2px solid #E5E7EB;
	transition: border-color .2s;
}

.pos-scan input:focus {
	border-color: var(--ps-primary);
	box-shadow: 0 0 0 4px rgba(61, 94, 225, .12);
}

.pos-scan .scan-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--ps-primary);
}

.pos-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.pos-chip {
	white-space: nowrap;
	border: 1px solid #E5E7EB;
	background: #fff;
	color: #515B73;
	border-radius: 30px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s;
}

.pos-chip:hover {
	border-color: var(--ps-primary);
	color: var(--ps-primary);
}

.pos-chip.active {
	background: var(--ps-primary);
	border-color: var(--ps-primary);
	color: #fff;
	box-shadow: 0 6px 14px rgba(61, 94, 225, .3);
}

.pos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}

.pos-item {
	border: 1px solid #EEF0F5;
	border-radius: 14px;
	padding: 12px;
	cursor: pointer;
	transition: all .18s ease;
	background: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}

.pos-item:hover {
	border-color: var(--ps-primary);
	transform: translateY(-3px);
	box-shadow: var(--ps-shadow-hover);
}

.pos-item.out {
	opacity: .55;
}

.pos-item .pos-img {
	height: 96px;
	border-radius: 10px;
	background: linear-gradient(135deg, #F3F6FF 0%, #EEF0FB 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	overflow: hidden;
}

.pos-item .pos-img img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.pos-item .pos-img i {
	font-size: 42px;
	color: var(--ps-primary);
	opacity: .8;
}

.pos-item .pos-name {
	font-weight: 600;
	font-size: 13px;
	color: #202C4B;
	line-height: 1.3;
	min-height: 34px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pos-item .pos-price {
	font-weight: 700;
	color: var(--ps-primary);
	margin-top: auto;
	padding-top: 6px;
}

.pos-item .pos-stock {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 11px;
}

.pos-cart-head {
	padding: 16px 18px;
	border-bottom: 1px solid #EEF0F5;
}

.pos-cart-body {
	padding: 8px 18px;
	overflow-y: auto;
	flex: 1;
	min-height: 160px;
}

.pos-cart-foot {
	padding: 16px 18px;
	border-top: 1px solid #EEF0F5;
	background: #FAFBFE;
	border-radius: 0 0 16px 16px;
}

.cart-line {
	display: flex;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px dashed #EEF0F5;
	animation: cartIn .25s ease;
}

.cart-line:last-child {
	border-bottom: 0;
}

@keyframes cartIn {
	from {
		opacity: 0;
		transform: translateX(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.cart-line .cl-name {
	font-weight: 600;
	font-size: 13px;
	color: #202C4B;
}

.cart-line .cl-meta {
	font-size: 12px;
	color: #6B7280;
}

.qty-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	overflow: hidden;
}

.qty-control button {
	border: 0;
	background: #F8F9FA;
	width: 26px;
	height: 26px;
	line-height: 1;
}

.qty-control input {
	width: 38px;
	border: 0;
	text-align: center;
	font-size: 13px;
	height: 26px;
}

.cart-price-input {
	width: 110px;
	height: 28px;
	font-size: 13px;
	text-align: right;
	padding: 2px 6px;
}

.pos-totals .row-line {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 6px;
	color: #515B73;
}

.pos-totals .grand {
	font-size: 22px;
	font-weight: 800;
	color: #202C4B;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #DDE1EA;
}

.pos-pay-btn {
	height: 54px;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 700;
	box-shadow: 0 10px 22px rgba(61, 94, 225, .35);
}

.pay-method {
	border: 2px solid #EEF0F5;
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	transition: all .15s;
	user-select: none;
}

.pay-method i {
	font-size: 22px;
	display: block;
	margin-bottom: 4px;
}

.pay-method:hover,
.pay-method.active {
	border-color: var(--ps-primary);
	color: var(--ps-primary);
	background: var(--ps-primary-soft);
}

.unit-pick {
	border: 1px solid #EEF0F5;
	border-radius: 12px;
	padding: 12px;
	cursor: pointer;
	transition: all .15s;
}

.unit-pick:hover {
	border-color: var(--ps-primary);
	background: var(--ps-primary-soft);
}

.success-tick {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(26, 190, 23, .12);
	color: #1ABE17;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 46px;
	animation: pop .4s ease;
}

@keyframes pop {
	0% {
		transform: scale(.4);
		opacity: 0;
	}

	70% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@media (max-width: 1199.98px) {
	.pos-wrap {
		grid-template-columns: minmax(0, 1fr) 360px;
	}
}

@media (max-width: 991.98px) {
	.pos-wrap {
		grid-template-columns: 1fr;
	}

	.pos-cart {
		position: static;
		max-height: none;
	}

	.pos-products {
		min-height: 0;
	}
}

/* Toggle buttons: the template paints checked outline buttons in the same colour as their text. */
.btn-check:checked + .btn[class*="btn-outline-"],
.btn-check:active + .btn[class*="btn-outline-"] {
	color: #fff !important;
}

.btn-check:checked + .btn-outline-primary { background-color: var(--ps-primary) !important; border-color: var(--ps-primary) !important; }
.btn-check:checked + .btn-outline-success { background-color: #1ABE17 !important; border-color: #1ABE17 !important; }
.btn-check:checked + .btn-outline-danger { background-color: #E82646 !important; border-color: #E82646 !important; }
.btn-check:checked + .btn-outline-warning { background-color: #EAB300 !important; border-color: #EAB300 !important; }
.btn-check:checked + .btn-outline-info { background-color: #3DB2E1 !important; border-color: #3DB2E1 !important; }
.btn-check:checked + .btn-outline-secondary { background-color: #6c757d !important; border-color: #6c757d !important; }

/* Labels ------------------------------------------------------------------------------- */
.label-sheet {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.label-item {
	width: 50mm;
	height: 30mm;
	border: 1px dashed #CBD5E1;
	border-radius: 4px;
	padding: 2mm;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background: #fff;
	color: #000;
}

.label-item .lbl-name {
	font-size: 8pt;
	font-weight: 700;
	line-height: 1.1;
	max-height: 2.2em;
	overflow: hidden;
}

.label-item .lbl-price {
	font-size: 9pt;
	font-weight: 700;
}

.label-item svg {
	max-width: 100%;
	height: 11mm;
}

.label-item.qr {
	flex-direction: row;
	gap: 2mm;
	text-align: left;
}

.label-item.qr svg {
	width: 22mm;
	height: 22mm;
	flex-shrink: 0;
}

.label-item.qr .lbl-text {
	font-size: 7pt;
	line-height: 1.25;
	overflow: hidden;
}

@media print {

	.header,
	.sidebar,
	.no-print,
	.page-header-actions {
		display: none !important;
	}

	.page-wrapper {
		margin: 0 !important;
		padding: 0 !important;
	}

	.page-wrapper .content {
		padding: 0 !important;
	}

	.card {
		box-shadow: none !important;
		border: 0 !important;
	}

	.label-item {
		border: 0;
		page-break-inside: avoid;
	}
}

/* Dark mode tweaks --------------------------------------------------------------------- */
[data-theme="dark"] .pos-products,
[data-theme="dark"] .pos-cart,
[data-theme="dark"] .pos-item,
[data-theme="dark"] .status-pill {
	background: #1b2034;
	border-color: #2b3149;
}

[data-theme="dark"] .pos-cart-foot {
	background: #171b2d;
}

[data-theme="dark"] .pos-item .pos-name,
[data-theme="dark"] .cart-line .cl-name,
[data-theme="dark"] .pos-totals .grand,
[data-theme="dark"] .stat-card .stat-value,
[data-theme="dark"] .brand-text,
[data-theme="dark"] .status-pill .count {
	color: #fff;
}

[data-theme="dark"] .pos-item .pos-img {
	background: #232a44;
}

[data-theme="dark"] .table-modern thead th {
	background: #232a44;
	color: #cbd5e1;
}