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

	BARCODE SCANNER & READER — MODULE CSS


	Yahan SIRF wo cheez hai jo global-custom-web.css me nahi mili.

	Dropzone, haalat ki patti, panel ke unwan, segmented button, table aur
	tag sab global me hain (sections 104, 108, 113, 122, 125). Ye module un
	me se kisi ki naql nahi banata.

	Bache paanch hisse: camera ka safha, nateeje ki patti, check digit ka
	dabba, prefix ka dabba, aur history.

	Rang, radius aur shadow sirf --wiz-* se.

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


/*----------------------------------------------------------------------------------
	001 — CAMERA KA SAFHA

	QR wale module se ek asal farq hai, aur wo qasdan hai: yahan nishan
	ek CHAURI LAKEER hai, chaar kone nahi.

	1D barcode chaurai me parha jata hai. Poori chaurai frame me na aaye
	to kuch nahi milta, chahe barcode kitna hi saaf ho. Chaukhata aankh ko
	batata hai "andar rakho", lakeer batati hai "is par se guzaro" — aur
	yahan doosri baat sahih hai.

	object-fit: cover LAZMI hai. Camera ka apna tanasub screen se kabhi
	nahi milta, aur us ke bagair tasveer khinch kar bigar jati hai — aur
	bigri hui tasveer me patli lakeerein aapas me mil jati hain.
----------------------------------------------------------------------------------*/

.bs-stage{
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	max-height: 26rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: #0b0b16;
}

.bs-stage video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* camera band ho to yahi nazar aata hai */
.bs-stage-wait{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: var(--wiz-text-muted);
	font-size: .86rem;
	background: #0b0b16;
}

.bs-stage-wait i{
	font-size: 2rem;
	opacity: .5;
}

.bs-frame{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/*
	Lakeer chaurai ka 86% leti hai, poori 100% nahi. Bacha hua kinara
	yaad dilata hai ke barcode ke dono taraf thora safed hissa bhi frame
	me hona chahiye — us ke bagair decoder shuruaat aur ikhtitam pehchan
	hi nahi pata.
*/
.bs-frame-line{
	width: 86%;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 0 12px rgba(0, 0, 0, .55);
}

/* mil jane par lakeer ek lamhe ke liye sabz — bina awaaz ke bhi pata chal jaye */
.bs-stage.is-hit .bs-frame-line{
	background: var(--wiz-success);
}

.bs-cam-tools{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}


/*----------------------------------------------------------------------------------
	002 — NATEEJE KI PATTI AUR NUMBER

	Number MONO font me aur bara. Ye wahi cheez hai jise aadmi kisi doosri
	jagah likhta ya milata hai, is liye har adad alag alag ginne layak
	hona chahiye — aam font me 0 aur O, 1 aur l aapas me milte hain.
----------------------------------------------------------------------------------*/

.bs-head{
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card) var(--wiz-radius-card) 0 0;
	border-bottom: 0;
	background: var(--wiz-surface-2);
}

.bs-head-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--wiz-radius-btn);
	font-size: 1.05rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

.bs-head-label{
	font-size: .88rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.bs-body{
	padding: .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: 0 0 var(--wiz-radius-card) var(--wiz-radius-card);
	background: var(--wiz-surface);
}

/*
	letter-spacing yahan mano se zyada kaam ki hai: barcode ke neeche
	chhape adad bhi khule hue hote hain, aur aadmi dono ko aankh se
	milata hai.

	user-select: all ek press me poora number chun leta hai — copy ka
	button hai, magar log aksar chun kar bhi lete hain.
*/
.bs-number{
	margin-top: .35rem;
	padding: .8rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface-2);
	color: var(--wiz-text);
	font-family: var(--wiz-font-mono);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .06em;
	word-break: break-all;
	user-select: all;
}


/*----------------------------------------------------------------------------------
	003 — CHECK DIGIT KA DABBA

	Do haalatein, do rang. Ye .wiz-note ki naql NAHI hai: wahan icon
	hamesha ek hi rang ka hota hai, yahan rang hi asal khabar hai.
----------------------------------------------------------------------------------*/

.bs-check{
	margin-top: .9rem;
	padding: .8rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface-2);
}

.bs-check.is-ok{
	border-color: color-mix(in srgb, var(--wiz-success) 45%, transparent);
	background: color-mix(in srgb, var(--wiz-success) 10%, transparent);
}

.bs-check.is-bad{
	border-color: color-mix(in srgb, var(--wiz-danger) 45%, transparent);
	background: color-mix(in srgb, var(--wiz-danger) 10%, transparent);
}

.bs-check-top{
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.bs-check-top i{
	flex-shrink: 0;
	font-size: 1.05rem;
}

.bs-check.is-ok .bs-check-top i{	color: var(--wiz-success); }
.bs-check.is-bad .bs-check-top i{	color: var(--wiz-danger); }

.bs-check-rows{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	margin-top: .6rem;
}

.bs-check-row{
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-size: .82rem;
}

.bs-check-name{
	color: var(--wiz-text-muted);
}

.bs-check-value{
	font-family: var(--wiz-font-mono);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.bs-check-note{
	margin-top: .6rem;
	font-size: .82rem;
	line-height: 1.65;
	color: var(--wiz-text-muted);
}


/*----------------------------------------------------------------------------------
	004 — PREFIX KA DABBA

	Mulk ka naam KABHI akela nahi dikhaya jata. Us ke sath wo tasheeh
	hamesha hoti hai ke ye register karne ki jagah hai, banane ki nahi —
	warna ye page bhi wahi ghalati phaila raha hota jo theek karne aaya
	tha.

	Isi liye tasheeh markup me likhi hui hai, JS se nahi aati: JS ka koi
	raasta aisa nahi hona chahiye jis me naam to aa jaye aur tasheeh reh
	jaye.
----------------------------------------------------------------------------------*/

.bs-prefix{
	margin-top: .9rem;
	padding: .8rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface-2);
}

.bs-prefix-top{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .7rem;
}

.bs-prefix-code{
	padding: .15rem .5rem;
	border-radius: var(--wiz-radius-sm);
	background: color-mix(in srgb, var(--wiz-primary) 14%, transparent);
	color: var(--wiz-text);
	font-family: var(--wiz-font-mono);
	font-size: .85rem;
	font-weight: 700;
}

.bs-prefix-who{
	font-size: .9rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.bs-prefix-note{
	margin-top: .55rem;
	font-size: .82rem;
	line-height: 1.65;
	color: var(--wiz-text-muted);
}

.bs-prefix-note b{
	color: var(--wiz-text);
}


/*----------------------------------------------------------------------------------
	005 — DOOSRE TOOL KI TARAF

	QR nikal aaye to. Ye rasta band karne wali patti nahi, seedha aage ka
	darwaza hai.
----------------------------------------------------------------------------------*/

.bs-elsewhere{
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin-top: .9rem;
	padding: .7rem .85rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface-2);
	font-size: .84rem;
	line-height: 1.65;
	color: var(--wiz-text-muted);
}

.bs-elsewhere i{
	flex-shrink: 0;
	margin-top: .15rem;
	font-size: 1rem;
	color: var(--wiz-primary);
}


/*----------------------------------------------------------------------------------
	006 — HISTORY
----------------------------------------------------------------------------------*/

.bs-hist-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.bs-hist{
	display: flex;
	flex-direction: column;
	gap: .4rem;
	max-height: 18rem;
	overflow-y: auto;

	scrollbar-width: thin;
	scrollbar-color: var(--wiz-border-strong) var(--wiz-surface-2);
}

.bs-hist::-webkit-scrollbar{			width: 10px; }
.bs-hist::-webkit-scrollbar-track{		background: var(--wiz-surface-2); }
.bs-hist::-webkit-scrollbar-thumb{
	background: var(--wiz-border-strong);
	border: 3px solid var(--wiz-surface-2);
	border-radius: 999px;
}

.bs-hist-item{
	display: flex;
	align-items: center;
	gap: .65rem;
	width: 100%;
	padding: .55rem .75rem;
	cursor: pointer;
	text-align: left;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface-2);
	transition: border-color .15s ease, background .15s ease;
}

.bs-hist-item:hover{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 7%, transparent);
}

.bs-hist-item:focus-visible{
	outline: none;
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.bs-hist-item i{
	flex-shrink: 0;
	color: var(--wiz-primary);
	font-size: .95rem;
}

/* min-width: 0 flex ke andar text-truncate ke liye lazmi hai */
.bs-hist-text{
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wiz-font-mono);
	font-size: .8rem;
	letter-spacing: .03em;
	color: var(--wiz-text);
}

.bs-hist-kind{
	flex-shrink: 0;
	font-size: .72rem;
	color: var(--wiz-text-muted);
}