/*
 * ======================================================================
 * CÂND CUTIA E STRÂMTĂ, DAR FEREASTRA E LATĂ
 * ======================================================================
 *
 * În panoul WordPress, conținutul pluginului n-are niciodată toată fereastra.
 * Din stânga îi iau lățime două lucruri deodată: meniul WordPress-ului și bara
 * de file a pluginului. Cu amândouă desfăcute, pe un ecran de două mii cinci
 * sute de puncte rămân pentru conținut vreo șase sute.
 *
 * Toate regulile de strâmtorare din foile pluginului sunt scrise cu `@media`,
 * iar `@media` măsoară **fereastra**. Ea vede două mii cinci sute, hotărăște
 * că e loc berechet și lasă așezarea largă — două coloane, tabele late, grile
 * de câte două câmpuri — înghesuite în șase sute de puncte. Pe telefon totul
 * era bine, fiindcă acolo fereastra strâmtă și cutia strâmtă se întâmplă să
 * fie același lucru. Tocmai pe ecranul mare se strica, adică acolo unde nimeni
 * nu se uită după o stricăciune de așezare.
 *
 * `@container` măsoară cutia. Regulile de mai jos sunt aceleași cu cele scrise
 * cu `@media` în celelalte foi — nu se schimbă nimic din cum arată — doar că
 * se aprind după lățimea care contează cu adevărat.
 *
 * ----------------------------------------------------------------------
 * DE CE ÎNTR-O FOAIE DE SINE STĂTĂTOARE
 *
 * În `app.css` sunt o sută nouă reguli `@media`. Rescrise toate deodată, pe
 * nevăzute, ar fi fost o sută nouă de prilejuri de a strica ceva care mergea.
 * Aici stau numai așezările care se repetă peste tot — grila de două câmpuri,
 * tabelele, bara de unelte, rândurile de casete — adică cele care se văd în
 * fiecare filă. Foaia se poate scoate din încărcare cu un singur rând dacă
 * ceva nu iese cum trebuie, fără să se atingă nimic din ce era.
 *
 * ----------------------------------------------------------------------
 * BROWSERELE CARE NU ȘTIU DE `@container`
 *
 * Nu pierd nimic: rămân cu purtarea de până acum, care e cea veche, nu una
 * stricată. Totul de aici stă înăuntrul unui `@container`, deci un browser
 * care nu-l cunoaște sare peste tot blocul.
 */

/*
 * CUTIA DE MĂSURAT
 *
 * `container-type: inline-size` spune „măsoară lățimea asta”. Se pune pe
 * învelișul filelor din panou, nu pe fiecare casetă: o cutie de măsurat nu se
 * poate întreba pe ea însăși, deci regulile de dedesubt trebuie să privească
 * în sus, la un strămoș.
 *
 * Se pune numai pe învelișul din panou. Pe paginile site-ului fiecare modul
 * are pagina lui, lată cât conținutul temei, iar acolo `@media` spune adevărul:
 * cutia și fereastra se strâmtează împreună.
 */
.fclms-panel-wrap {
	container-type: inline-size;
	container-name: fclms-panel;
}

/*
 * Rubricile din Contul meu au aceeași pățanie când stau într-o temă cu bară
 * laterală: pagina e lată, coloana de conținut nu.
 */
.fclms-account-pane {
	container-type: inline-size;
	container-name: fclms-panel;
}

@container fclms-panel (max-width: 860px) {

	/*
	 * GRILELE DE CÂMPURI
	 *
	 * Cea mai des folosită așezare din tot pluginul: două câmpuri de formular
	 * alături. Sub lățimea asta, două câmpuri înseamnă două casete de vreo
	 * două sute de puncte fiecare, în care o etichetă ca „Registrul comerțului”
	 * se rupe pe trei rânduri. Cu trei coloane pățania e cu atât mai rea, deci
	 * și `fclms-grid-3` se strânge aici, nu abia la lățimea ferestrei.
	 */
	.fclms-grid-2,
	.fclms-grid-3,
	.fclms-auth,
	.fclms-editor-panels {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * TABELELE NU SE ATING AICI
	 *
	 * Prima scriere a acestei foi punea `display: block; overflow-x: auto` pe
	 * `.fclms-card > .fclms-table`, ca tabelele să alunece lateral. E greșit,
	 * și în două feluri deodată: un tabel căruia i se schimbă felul de
	 * afișare în `block` **își pierde alinierea coloanelor** — capetele nu mai
	 * stau deasupra celulelor lor — iar alunecarea trebuie oricum pusă pe un
	 * înveliș, nu pe tabelul însuși.
	 *
	 * Învelișul acela nu există în tot pluginul, ci doar unde a fost scris
	 * anume: `.fclms-bill__scroll`, la facturi. Cine adaugă altundeva un tabel
	 * lat îi scrie un înveliș la fel. O regulă care ar fi prins toate tabelele
	 * deodată le-ar fi stricat pe cele care erau bine.
	 */

	/* Bara de unelte se rupe pe rânduri în loc să-și taie butoanele. */
	.fclms-toolbar,
	.fclms-row,
	.fclms-box-row {
		flex-wrap: wrap;
	}

	/*
	 * Rândul de pastile alunecă lateral, cu toate pastilele întregi. Rupt pe
	 * mai multe rânduri, un rând de opt pastile ar fi ocupat un sfert de
	 * ecran înainte să înceapă conținutul.
	 */
	.fclms-subtabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.fclms-subtabs > * { flex: 0 0 auto; }
}

@container fclms-panel (max-width: 560px) {

	/*
	 * Casetele cu cifre coboară la două pe rând. Sub măsura asta, patru
	 * casete alături înseamnă patru sume rupte la mijloc.
	 */
	.fclms-bill__nums {
		grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
	}
}

/*
 * ----------------------------------------------------------------------
 * CE NU SE FACE AICI: LĂȚIMEA BAREI DIN STÂNGA
 *
 * Era ispititor de strâmtat bara pe panouri înguste. Nu se face, și e bine
 * scris de ce, ca să nu fie încercat a doua oară.
 *
 * `--fc-side-w` stă pe `:root`, iar din ea se socotește și lățimea barei, și
 * marginea din stânga a paginii (`body.fclms-has-side`), și cea a panoului
 * WordPress (`#wpcontent`). Schimbată numai pe bară, bara s-ar fi strâns iar
 * marginea ar fi rămas lată: o fâșie goală între ele. Schimbată pe `:root`,
 * ar fi bătut cu mânerul de lățime, care scrie tot acolo măsura aleasă de om
 * și ținută minte în browser — iar o măsură aleasă cu mâna care se schimbă
 * singură la fiecare redimensionare a ferestrei e mai supărătoare decât o
 * bară puțin prea lată.
 */

/*
 * ----------------------------------------------------------------------
 * LOCUL GOL LĂSAT DE SUBSOLUL PANOULUI
 *
 * Textele din `#wpfooter` sunt golite din PHP, prin filtrele pe care le dă
 * WordPress chiar pentru asta (vezi `hush_footer` din fișierul principal).
 * Golit, elementul rămâne totuși în pagină, cu înălțimea și marginile lui:
 * o fâșie albă sub aplicație, care pe ecranele scurte împinge o bară de
 * derulare fără niciun rost.
 *
 * Rândul de aici ia și locul. Numai pe paginile pluginului — `fclms-has-side`
 * se pune pe `body` doar acolo — deci restul panoului rămâne neatins.
 *
 * Dacă WordPress redenumește vreodată `#wpfooter`, aici nu se strică nimic:
 * ar rămâne o fâșie albă, adică exact ce era înainte, nu un ecran stricat.
 * De aceea stingerea textelor s-a făcut prin filtre, nu prin stil.
 */
body.wp-admin.fclms-has-side #wpfooter {
	display: none;
}