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

	SPLIT PDF — MODULE CSS


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

	Dropzone, haalat ki patti, panel ke unwan, progress bar, result card
	aur bara button sab global ke section 125 me hain. Wo hissa pehle nau
	PDF modules me alag alag naql ho kar para tha; ab ek jagah hai, aur
	ye module use bina kuch likhe istemal kar raha hai.

	Bache sirf teen cheezein jo waqai sirf isi module ki hain:
	modes ki qatar, file ki patti, aur safhon ka grid.

	Rang, radius aur shadow sirf --wiz-* se. Naya rang yahan kabhi nahi
	banta, warna light/dark aur aage aane wali koi bhi theme is module par
	nahi lagti.

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


/*----------------------------------------------------------------------------------
	001 — KAATNE KE TAREEQE

	Chhe modes. Tabs ki qatar (wiz-tabs) yahan jaan boojh kar nahi:
	wo scroll hoti hai aur chhe me se teen chhup jate hain. User ko
	pehli nazar me SAB tareeqe dikhne chahiyen, warna wo wahi chunta
	hai jo nazar aata hai.

	auto-fill + minmax se chaure screen par chhe ek qatar me, phone par
	do ya teen — bina kisi media query ke.
----------------------------------------------------------------------------------*/

.sp-modes{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .5rem;
}

.sp-mode{
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem .8rem;
	text-align: left;
	cursor: pointer;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	color: var(--wiz-text-muted);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.sp-mode:hover{
	border-color: var(--wiz-primary);
	color: var(--wiz-text);
}

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

.sp-mode.is-active{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 10%, transparent);
	color: var(--wiz-primary-ink);
}

.sp-mode-emoji{
	flex-shrink: 0;
	font-size: 1rem;
	line-height: 1;
}

/*
	"Split by ranges" jaise lambe naam ko lipatne dena parta hai. Bina is
	ke wo apne khane ko chaura kar deta hai aur poori qatar us ek button
	ke hisaab se ban jati hai.
*/
.sp-mode-name{
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
	.sp-pane ka apna koi rule JAAN BOOJH KAR nahi hai — us par sirf
	Bootstrap ki d-none lagti hatti hai. Ye satar isi liye likhi hai ke
	agli bar koi ye class dhoondte hue ye na samjhe ke rule gum ho gaya.
*/


/*----------------------------------------------------------------------------------
	002 — KAUNSI FILE KHULI HAI

	File aane ke baad dropzone chhup jata hai, is liye ek patti chahiye
	jo hamesha yaad dilaye ke kaam kis file par ho raha hai. Bina is ke
	do PDF ke darmiyan user bhool jata hai ke abhi kaunsi khuli hai.

	min-width: 0 flex ke andar text-truncate ke liye lazmi hai — us ke
	bagair lamba naam patti ko chaura kar deta hai bajaye kat-ne ke.
----------------------------------------------------------------------------------*/

.sp-file{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

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

.sp-file-meta{
	flex: 1 1 auto;
	min-width: 0;
	font-size: .86rem;
	color: var(--wiz-text);
}


/*----------------------------------------------------------------------------------
	003 — NATEEJE KA KHULASA

	Download se PEHLE batati hai ke kitne safhe aur kitni files banengi.
	Ek ghalat range yahan pakri jati hai, us waqt nahi jab file khul
	chuki ho.
----------------------------------------------------------------------------------*/

.sp-summary{
	font-size: .84rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
}

.sp-summary b{
	color: var(--wiz-text);
}

.sp-summary.is-bad b,
.sp-summary.is-bad{
	color: var(--wiz-danger);
}


/*----------------------------------------------------------------------------------
	004 — SAFHON KA GRID

	Preview on karne par har safhe ka chhota canvas. minmax me neechay
	wali hadd 7rem hai: is se chhota karne par safhe ka number to nazar
	aata hai magar us par kya likha hai wo nahi — aur grid ka poora
	maqsad yehi tha ke user parh kar chune.
----------------------------------------------------------------------------------*/

.sp-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: .6rem;
	max-height: 30rem;
	overflow-y: auto;
	padding: .6rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);

	/* grid apni scrollbar khud dikhaye — warna "aur bhi safhe hain" ka koi ishara nahi */
	scrollbar-width: thin;
	scrollbar-color: var(--wiz-border-strong) var(--wiz-surface-2);
}

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

.sp-page{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: .4rem;
	cursor: pointer;
	border: 2px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface);
	transition: border-color .15s ease, background .15s ease;
}

.sp-page:hover{			border-color: var(--wiz-primary); }

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

.sp-page.is-picked{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
}

/*
	Canvas ke sath aspect-ratio nahi lagayi ja sakti: har safha alag naap
	ka ho sakta hai (A4 ke sath ek landscape scan). Isi liye sirf oonchai
	ki hadd hai aur chaurai khud us ke tanasub se banti hai.
*/
.sp-page canvas{
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 9rem;
	border-radius: 2px;
	background: #fff;
	box-shadow: var(--wiz-shadow-sm);
}

/* render hone se pehle ki khali jagah — warna grid har safhe par uchhalta hai */
.sp-page-wait{
	width: 100%;
	height: 6.5rem;
	border-radius: 2px;
	background: var(--wiz-surface-2);
}

.sp-page-num{
	font-family: var(--wiz-font-mono);
	font-size: .75rem;
	font-weight: 700;
	color: var(--wiz-text-muted);
}

.sp-page.is-picked .sp-page-num{
	color: var(--wiz-primary-ink);
}

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


/*----------------------------------------------------------------------------------
	005 — GRID JAHAN CLICK KA KOI ASAR NAHI

	"Every N pages" jaise modes safhon ki fehrist nahi parhte. Wahan grid
	rehta hai — kahan kaatna hai ye faisla karne me wo waqai kaam aata
	hai — magar us par click nahi hota.

	Is liye click ka ishara hi hata dena zaroori hai. Cursor pointer
	rakhne par user click karta rehta hai aur samajhta hai ke tool toota
	hua hai; ye khamosh nakami sab se buri qism hai.
----------------------------------------------------------------------------------*/

.sp-grid.is-readonly .sp-page{
	cursor: default;
}

.sp-grid.is-readonly .sp-page:hover{
	border-color: var(--wiz-border);
}