/**
 * PrintBox custom: Text Sheet — panoul modulului de TEXT ca foaie de jos (mobil),
 * la paritate vizuală cu Upload Sheet. 100% CSS — FĂRĂ JavaScript.
 *
 * Comutator: fpd_textSheet (FPD Settings → PrintBox → Upload Sheet → Text Sheet).
 * Oprit = panoul original FPD (alb, pe tot ecranul). Documentație: UPLOAD-SHEET-README.md
 *
 * ⚠ Lecțiile plătite pe Upload Sheet se aplică identic:
 *  - NU se injectează DOM în panourile FPD (componenta își reconciliază copiii →
 *    ping-pong infinit cu orice observer de-al nostru);
 *  - ancora de stare e pe CONTAINER (`fpd-module-visible`), NU pe `.fpd-active` din
 *    panou: `fpd-module-text` PĂSTREAZĂ `fpd-active` și după închidere, deci o regulă
 *    scopată doar pe ea ar rămâne aprinsă (X plutitor, bară transparentă permanent);
 *  - desktopul NU se atinge: acolo `.fpd-module-content` e coloana laterală permanentă.
 *
 * ⚠ Cât timp designerul se ÎNCARCĂ, foaia nu se aplică deloc — de aici
 * `:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden)))` în TOATE selectoarele.
 * Motivul (măsurat pe staging): FPD lasă starea `fpd-module-visible` aprinsă de la
 * init-ul din pagina de produs, deci fără gardă fundalul întunecat + X-ul rotund se
 * aprindeau ~0,5 s la deschiderea designerului, peste tabloul care abia se încărca.
 * (Aceeași ancoră ca garda anti-flash din fpd-upload-sheet.css — repetată mai jos ca
 * funcția să fie independentă de comutatorul Upload Sheet.)
 */

@media (max-width: 767px) {

	/* Garda anti-flash (duplicat intenționat din fpd-upload-sheet.css): panoul de modul
	   rămâne invizibil cât timp designerul se încarcă. visibility/opacity, NU display —
	   măsurătorile FPD pe element trebuie să funcționeze. */
	.fpd-container:has(> .fpd-loader-wrapper:not(.fpd-hidden)) fpd-main-bar > .fpd-module-content {
		visibility: hidden !important;
		opacity: 0 !important;
	}

	/* Înălțimea foii stă într-o variabilă, ca X-ul de pe buză să se calculeze din ea. */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) {
		--pbx-text-sheet-h: 56vh;
	}
	/* Fără șabloane de text configurate (grila e goală — cazul produselor PrintBox),
	   56vh ar însemna jumătate de foaie albă → foaia se strânge la conținut. Dacă
	   produsul ARE șabloane, rămâne 56vh și lista derulează în foaie. */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active):has(.fpd-text-templates .fpd-grid:empty) {
		--pbx-text-sheet-h: 40vh;
	}
	/* Când clientul intră în zona de scris, foaia crește: tastatura acoperă jumătatea de
	   jos a ecranului, iar textarea trebuie să rămână deasupra ei.
	   ⚠ A DOUA condiție (textarea are text = `:not(:placeholder-shown)`) e obligatorie:
	   la atingerea butonului „Adaugă text", textarea pierde focusul ÎNAINTE de click →
	   foaia s-ar micșora și butonul ar fugi de sub degetul clientului (verificat pe
	   staging: click ratat). Cu text scris, foaia rămâne mare până se închide panoul.
	   `!important` = scrisul câștigă mereu (regulile de mai sus pot fi mai specifice). */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active):has(.fpd-module-content:focus-within),
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active):has(.fpd-module-content textarea:not(:placeholder-shown)) {
		--pbx-text-sheet-h: 88vh !important;
	}

	/* ——— Foaia ——— */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-main-bar > .fpd-module-content {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: auto !important;
		height: var(--pbx-text-sheet-h, 56vh) !important;
		max-height: var(--pbx-text-sheet-h, 56vh);
		overflow: hidden;
		display: flex !important;
		flex-direction: column;
		background: #fff !important;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
		padding: 22px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
		z-index: 10;
	}

	/* Lanțul flex până la lista de șabloane: conținutul derulează ÎN foaie, nu o crește. */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-module-text.fpd-active,
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-module-text.fpd-active > div {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
	/* Plasă de siguranță: dacă un produs are mai multe controale în zona de scris decât
	   încape în foaie, derulează tot conținutul modulului (altfel ar fi tăiat de
	   overflow:hidden al foii). */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-module-text.fpd-active > div {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-module-text.fpd-active .fpd-scroll-area {
		flex: 1 1 auto;
		min-height: 0;
		height: auto !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	/* Tabloul rămâne VIZIBIL în spatele foii: pe layout-ul sidebar, fpd-main-bar (fundal
	   alb) acoperă scena cât timp panoul e deschis — îl facem transparent DOAR atunci. */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-main-bar {
		background: transparent !important;
	}

	/* Fundalul întunecat peste pânză: pe fpd-main-bar::before (foaia e natural deasupra
	   lui — FĂRĂ z-index negativ, care pe Safari/telefon ajungea PESTE foaie).
	   Primește clickurile → comportament modal, ca la Upload Sheet. */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-main-bar::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(24, 24, 27, 0.38);
	}

	/* Închiderea = X-ul nativ din fpd-main-bar (banda lui de sus, lată cât ecranul),
	   reașezat ca buton rotund centrat pe buza foii. Clickul rămâne al FPD-ului →
	   închidere nativă, fără desincronizări de stare.
	   Poziționat din JOS (nu cu 100vh): urmărește exact înălțimea foii, inclusiv când
	   crește la focus. */
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-main-bar > .fpd-close {
		position: fixed !important;
		left: 50% !important;
		right: auto !important;
		top: auto !important;
		bottom: calc(var(--pbx-text-sheet-h, 56vh) - 15px) !important;
		transform: translateX(-50%);
		width: 30px !important;
		height: 30px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #fff !important;
		border: 1px solid #e9e9ee;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
		cursor: pointer;
		z-index: 11;
	}
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-main-bar > .fpd-close .fpd-icon-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: 13px;
		line-height: 1 !important;
		color: #52525b;
	}
	.fpd-container.fpd-module-visible:not(:has(> .fpd-loader-wrapper:not(.fpd-hidden))):has(.fpd-module-content > fpd-module-text.fpd-active) fpd-main-bar > .fpd-close .fpd-icon-close::before {
		line-height: 1 !important;
	}

}