/*
 * FACTURAREA — CE SE VEDE
 *
 * Culorile felurilor de hârtie sunt patru și stau într-un singur loc, aici
 * sus. Ele se folosesc în trei locuri deosebite — coloanele graficului,
 * inelul, bulinele din legendă și etichetele din tabel — iar dacă ar fi
 * scrise de patru ori, s-ar depărta una de alta la prima schimbare, și
 * atunci un abonament ar fi albastru în grafic și verde în listă.
 *
 * Sunt luate din paleta aplicației unde există. Cele care nu există acolo
 * sunt scrise cu o rezervă după ele: pe o temă care nu le definește, `var()`
 * fără rezervă lasă culoarea nescrisă și dreptunghiul iese negru.
 */

.fclms-bill {
	--bill-1: var(--fclms-accent, #4C8DFF);
	--bill-2: var(--fclms-good, #2FB67C);
	--bill-3: var(--fclms-warn, #E8A33D);
	--bill-4: var(--fclms-muted, #8A94A6);
	/* Stornarea. Roșul lucrului scăzut, nu al greșelii. */
	--bill-5: var(--fclms-bad, #E5484D);

	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ------------------------------------------------------------- FILTRELE */

.fclms-bill__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.fclms-bill__filters .fclms-field {
	margin: 0;
	min-width: 150px;
	flex: 1 1 150px;
}

.fclms-bill__filters-go {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.fclms-bill__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 100%;
}

.fclms-chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--fclms-line, rgba(128, 140, 160, .28));
	font-size: var(--fc-small);
	line-height: 1.6;
	text-decoration: none;
	color: inherit;
	opacity: .78;
	transition: opacity .15s ease, border-color .15s ease;
}

.fclms-chip:hover { opacity: 1; }

.fclms-chip.is-on {
	opacity: 1;
	border-color: var(--bill-1);
	color: var(--bill-1);
	font-weight: 600;
}

/* -------------------------------------------------------------- CIFRELE */

.fclms-bill__nums {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 12px;
}

.fclms-bill__num {
	background: var(--fclms-card, rgba(128, 140, 160, .07));
	border: 1px solid var(--fclms-line, rgba(128, 140, 160, .18));
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.fclms-bill__num-label {
	font-size: var(--fc-small);
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .68;
}

.fclms-bill__num-value {
	font-size: calc(var(--fc-h1) * 0.909);
	font-weight: 700;
	line-height: 1.2;
	/*
	 * O sumă lungă — „12.480,00 RON” — nu se rupe la mijloc și nu împinge
	 * caseta afară din grilă. Se micșorează literele, ceea ce se citește
	 * mai bine decât o cifră tăiată cu trei puncte.
	 */
	overflow-wrap: anywhere;
}

.fclms-bill__num.is-lead {
	/*
	 * `color-mix` lipsește din browserele mai vechi de 2023. Fără o rezervă
	 * scrisă înainte, declarația e aruncată cu totul și caseta rămâne fără
	 * fundal — nu stricat, dar șters, adică tocmai caseta cea mai importantă
	 * ar fi arătat ca celelalte. Rezerva e o culoare fixă, apropiată; unde
	 * `color-mix` merge, rândul de dedesubt o acoperă.
	 */
	background: rgba(76, 141, 255, .12);
	background: linear-gradient(135deg, color-mix(in srgb, var(--bill-1) 16%, transparent), transparent);
	border-color: rgba(76, 141, 255, .38);
	border-color: color-mix(in srgb, var(--bill-1) 38%, transparent);
}

.fclms-bill__num.is-lead .fclms-bill__num-value {
	font-size: calc(var(--fc-h1) * 1.091);
	color: var(--bill-1);
}

/* ------------------------------------------------------------ GRAFICELE */

/*
 * DOUĂ COLOANE CARE SIMT CUTIA, NU FEREASTRA
 *
 * Era o grilă de 3fr pe 2fr, cu o regulă `@media (max-width: 900px)` care o
 * trecea pe un singur rând. N-a lucrat niciodată acolo unde trebuia, și din
 * cea mai obișnuită pricină: `@media` măsoară **fereastra**, iar aici
 * strâmtorarea nu vine de la fereastră, ci de la ce stă lângă noi.
 *
 * În panoul WordPress, cu meniul din stânga desfăcut și cu bara filelor
 * pluginului lângă el, conținutul rămâne cu vreo șase sute de puncte, pe o
 * fereastră lată de două mii și jumătate. Regula se uita la cele două mii și
 * jumătate, hotăra că e loc berechet, și lăsa două coloane înghesuite una în
 * alta — tocmai pe ecranul mare, unde nimeni nu se așteaptă la asta. Pe
 * telefon mergea, fiindcă acolo fereastra strâmtă și cutia strâmtă se
 * întâmplă să fie același lucru.
 *
 * Flexbox-ul cu `wrap` nu are nevoie de niciun prag scris de mână: fiecare
 * casetă cere trei sute patruzeci de puncte, iar când nu încap două alături,
 * a doua trece singură pe rândul următor. Măsura e a cutiei, oricare ar fi ea,
 * și merge la fel în panou, în pagina de cont și pe ecran complet.
 */
.fclms-bill__split {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
}

.fclms-bill__split > * {
	flex: 1 1 340px;
	min-width: 0;
}

/* Graficul pe luni are nevoie de mai multă lățime decât inelul de lângă el. */
.fclms-bill__split > :first-child { flex-grow: 1.6; }

.fclms-bill__chart { min-width: 0; }

.fclms-bill__chart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.fclms-bill__chart-head .fclms-h3,
.fclms-bill__chart > .fclms-h3 { margin: 0 0 10px; }

.fclms-bill__chart-head .fclms-h3 { margin: 0; }

.fclms-bill__hint { margin: -4px 0 10px; font-size: var(--fc-small); }

/*
 * Înălțimea nu se mai scrie fixă. Legată de lățime prin raportul desenului,
 * graficul se micșorează întreg când cutia se strâmtează, în loc să rămână
 * înalt și să-și turtească literele. Măsura de jos îl ține citibil în cutiile
 * cele mai mici.
 */
.fclms-bill__svg {
	width: 100%;
	height: auto;
	aspect-ratio: 76 / 26;
	min-height: 170px;
	display: block;
	overflow: visible;
}

.fclms-bill__grid {
	stroke: var(--fclms-line, rgba(128, 140, 160, .2));
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

.fclms-bill__base {
	stroke: var(--fclms-line, rgba(128, 140, 160, .4));
	stroke-width: 1;
}

.fclms-bill__axis,
.fclms-bill__tick {
	fill: currentColor;
	opacity: .55;
	font-size: calc(var(--fc-small) * 0.88);
}

.fclms-bill__bar { transition: opacity .15s ease; }
.fclms-bill__bar:hover { opacity: .78; }

.fclms-bill__bar--1 { fill: var(--bill-1); }
.fclms-bill__bar--2 { fill: var(--bill-2); }
.fclms-bill__bar--3 { fill: var(--bill-3); }
.fclms-bill__bar--4 { fill: var(--bill-4); }
.fclms-bill__bar--5 { fill: var(--bill-5); }
.fclms-bill__bar--empty { fill: var(--fclms-line, rgba(128, 140, 160, .4)); }

.fclms-bill__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
	font-size: var(--fc-small);
}

.fclms-bill__key {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: .82;
}

.fclms-bill__dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
	flex: 0 0 auto;
}

.fclms-bill__dot--1 { background: var(--bill-1); }
.fclms-bill__dot--2 { background: var(--bill-2); }
.fclms-bill__dot--3 { background: var(--bill-3); }
.fclms-bill__dot--4 { background: var(--bill-4); }
.fclms-bill__dot--5 { background: var(--bill-5); }

/* ----------------------------------------------------------------- INEL */

.fclms-bill__donut-wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.fclms-bill__donut {
	width: 168px;
	height: 168px;
	flex: 0 0 auto;
}

.fclms-bill__arc--1 { stroke: var(--bill-1); }
.fclms-bill__arc--2 { stroke: var(--bill-2); }
.fclms-bill__arc--3 { stroke: var(--bill-3); }
.fclms-bill__arc--4 { stroke: var(--bill-4); }
.fclms-bill__arc--5 { stroke: var(--bill-5); }

.fclms-bill__donut-mid {
	fill: currentColor;
	font-size: var(--fc-h1);
	font-weight: 700;
}

.fclms-bill__donut-sub {
	fill: currentColor;
	opacity: .6;
	font-size: var(--fc-small);
}

.fclms-bill__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 180px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fclms-bill__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fc-p);
	min-width: 0;
}

.fclms-bill__list-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fclms-bill__list-num,
.fclms-bill__rank-num {
	opacity: .55;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

/* --------------------------------------------------------- CLASAMENTUL */

.fclms-bill__ranks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * Aceeași poveste ca la coloane: pragul de fereastră ascundea bara de
 * proporție pe telefon, dar o lăsa să înghesuie numele în panou. Bara are
 * acum o lățime care se poate strânge singură, iar sub o anumită măsură se
 * stinge de la sine, fără să întrebe fereastra.
 */
.fclms-bill__ranks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fc-small);
	min-width: 0;
}

.fclms-bill__ranks li strong {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fclms-bill__rank-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fclms-bill__rank-bar {
	flex: 0 1 84px;
	min-width: 0;
	height: 8px;
	border-radius: 999px;
	background: var(--fclms-line, rgba(128, 140, 160, .2));
	overflow: hidden;
}

.fclms-bill__rank-bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bill-1);
}

/* ------------------------------------------------------------- TABELELE */

.fclms-bill__papers-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.fclms-bill__papers-head .fclms-h3 { margin: 0; }

.fclms-bill__exports {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Tabelul de facturi are opt coloane și nu se poate strânge sub o anumită
 * lățime fără să devină de necitit. Pe telefon alunecă lateral, în cutia
 * lui, în loc să împingă pagina întreagă — vezi îndreptarea de la 8.3.21:
 * o lățime scăpată de sub control mută toată pagina, nu doar tabelul.
 */
.fclms-bill__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
	padding: 0 4px;
}

.fclms-bill__table { min-width: 720px; }

.fclms-bill__right {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * „Bază impozabilă” e un cap de coloană lung, iar lângă el mai stau trei.
 * Într-o cutie strâmtă se rupeau toate pe câte două rânduri și tabelul ajungea
 * mai înalt decât lat. Are acum o măsură sub care nu coboară și alunecă
 * lateral în cutia lui — ca tabelul de facturi, din aceeași pricină.
 */
.fclms-bill__vat {
	width: 100%;
	min-width: 380px;
}

.fclms-bill__vat th { white-space: nowrap; }

.fclms-bill__tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: var(--fc-small);
	font-weight: 600;
	white-space: nowrap;
}

.fclms-bill__tag--1 { background: rgba(76, 141, 255, .18); color: var(--bill-1); }
.fclms-bill__tag--2 { background: rgba(47, 182, 124, .18); color: var(--bill-2); }
.fclms-bill__tag--3 { background: rgba(232, 163, 61, .20); color: var(--bill-3); }
.fclms-bill__tag--4 { background: rgba(138, 148, 166, .20); color: var(--bill-4); }
.fclms-bill__tag--5 { background: rgba(229, 72, 77, .18); color: var(--bill-5); }

@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.fclms-bill__tag--1 { background: color-mix(in srgb, var(--bill-1) 18%, transparent); }
	.fclms-bill__tag--2 { background: color-mix(in srgb, var(--bill-2) 18%, transparent); }
	.fclms-bill__tag--3 { background: color-mix(in srgb, var(--bill-3) 20%, transparent); }
	.fclms-bill__tag--4 { background: color-mix(in srgb, var(--bill-4) 20%, transparent); }
	.fclms-bill__tag--5 { background: color-mix(in srgb, var(--bill-5) 18%, transparent); }
}

/* --------------------------------------------------------- FIȘA FISCALĂ */

.fclms-bill__warn {
	background: rgba(232, 163, 61, .14);
	background: color-mix(in srgb, var(--fclms-warn, #E8A33D) 14%, transparent);
	border: 1px solid rgba(232, 163, 61, .40);
	border: 1px solid color-mix(in srgb, var(--fclms-warn, #E8A33D) 40%, transparent);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 14px;
	font-size: var(--fc-p);
}

.fclms-bill__preview {
	border: 1px dashed var(--fclms-line, rgba(128, 140, 160, .35));
	border-radius: 12px;
	padding: 12px 14px;
	margin: 14px 0;
	font-size: var(--fc-p);
	line-height: 1.6;
}

.fclms-field--wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------ TIPĂRIREA */

@media print {
	.fclms-bill__filters,
	.fclms-bill__exports,
	.fclms-cell-actions { display: none !important; }

	.fclms-bill__scroll { overflow: visible; }
	.fclms-bill__table { min-width: 0; }

	/*
	 * Graficele rămân. Sunt SVG scris din server, deci se tipăresc; iar
	 * un raport dus la contabil fără graficul de care s-a discutat e o
	 * hârtie din care lipsește tocmai partea care s-a ținut minte.
	 */
	.fclms-bill__chart { break-inside: avoid; }
}

/* ------------------------------------------------- AGĂȚĂTOARE FOLOSITE */

/*
 * Clasele de mai jos sunt scrise în PHP ca puncte de prindere. Au nevoie de
 * puțin, dar au nevoie de ceva: o clasă pusă în HTML și nedefinită nicăieri
 * arată, la următoarea citire, ca o regulă ștearsă din greșeală.
 */

.fclms-bill__arc { transition: opacity .15s ease; }
.fclms-bill__arc:hover { opacity: .8; }

.fclms-bill__chart--donut .fclms-h3 { margin-bottom: 14px; }

.fclms-bill__papers { min-width: 0; }

.fclms-bill__fiscal .fclms-check { margin: 14px 0; display: block; }

/* ------------------------------------------------------------------ */
/* RESTITUIREA CERUTĂ DE VÂNZĂTOR                                      */
/*                                                                     */
/* Formularul stă pliat sub butonul lui. Deschis, are două purtări, și  */
/* deosebirea dintre ele nu e o toană, ci locul în care se află.        */
/*                                                                     */
/* ÎN CELULA DE ACȚIUNI A UNEI FACTURI, formularul e o fereastră        */
/* plutitoare: e scos din firul tabelului și așezat peste el, agățat cu */
/* marginea din dreapta de butonul lui. O coloană lățită cât un         */
/* formular ar fi împins celelalte coloane afară din ecran, iar pe      */
/* telefon ar fi scos tabelul cu totul.                                 */
/*                                                                     */
/* ORIUNDE ALTUNDEVA, curge sub buton și împinge ce urmează în jos, ca  */
/* orice alt formular.                                                  */
/*                                                                     */
/* Purtarea de plutire era, până la 1.22.0, singura. Scrisă așa, ea     */
/* pleca de la o presupunere pe care n-o spunea nimeni: că butonul stă  */
/* la marginea din dreapta a unui tabel lat. Într-un card, unde butonul */
/* stă la stânga, `right: 0` agăța o fereastră de 280px de un buton de  */
/* 120px — deci fereastra pornea cu 160px în afara lui, spre stânga, și */
/* ieșea din ecran. Iar fiind plutitoare, cădea peste cardul de         */
/* dedesubt în loc să-l împingă. Așa arăta rubrica Vânzări la           */
/* deschiderea unei restituiri: două carduri unul peste altul și un     */
/* formular tăiat de marginea ferestrei.                                */
/*                                                                     */
/* De aceea plutirea se cere acum de la locul unde chiar e nevoie de    */
/* ea, nu de peste tot.                                                 */
/* ------------------------------------------------------------------ */
.fclms-refund { position: relative; display: block; }
.fclms-refund > summary { cursor: pointer; list-style: none; }
.fclms-refund > summary::-webkit-details-marker { display: none; }

.fclms-refund__form {
	max-width: 420px;
	margin-top: 10px;
	padding: 14px;
	display: grid;
	gap: 10px;
	text-align: left;
	background: var(--fc-surface, #fff);
	border: 1px solid var(--fc-line, rgba(0, 0, 0, .12));
	border-radius: var(--fc-radius, 12px);
}

.fclms-refund__form .fclms-muted { margin: 0; font-size: var(--fc-small); }
.fclms-refund__form .fclms-field { margin: 0; }

/* În celula de acțiuni, și numai acolo: fereastra plutitoare.
 *
 * `display: grid` se scrie din nou aici, deși e scris și mai sus. Celula
 * de acțiuni pune `inline-flex` pe orice formular din ea — vezi `app.css`
 * — iar regula aceea, fiind mai anume decât `.fclms-refund__form`, bătea
 * grila și așeza câmpurile formularului unul lângă altul, pe un rând.
 * Scrisă aici, unde selectorul e la fel de anume ca al ei, grila își ia
 * locul înapoi. */
.fclms-cell-actions .fclms-refund { display: inline-block; }
.fclms-cell-actions .fclms-refund__form {
	display: grid;
	position: absolute;
	right: 0;
	z-index: 5;
	width: min(280px, 78vw);
	max-width: none;
	margin-top: 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

/* ------------------------------------------------------------------ */
/* CELE DOUĂ FELURI DE DESFACERE, UNUL LÂNGĂ ALTUL                     */
/*                                                                     */
/* Pliate, stau alături: sunt două alegeri pentru aceeași faptă, iar    */
/* una sub alta ar fi părut doi pași ai ei. Deschisă, cea apăsată ia    */
/* rândul întreg — un formular strâns pe jumătate de lățime, lângă un   */
/* buton, se citește mai greu decât unul întreg.                        */
/* ------------------------------------------------------------------ */
.fclms-undo { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.fclms-undo > .fclms-refund { flex: 0 0 auto; }
.fclms-undo > .fclms-refund[open] { flex: 1 1 100%; }