/* =============================================================================
   PORTOFOLIU — PANOU FRONT-END (LISTĂ + EDITARE)
   -----------------------------------------------------------------------------
   Paleta reia culorile folosite deja în servicii-form.css:
   albastru #293593 pentru acțiunile principale, auriu #d4af37 pentru salvare.
============================================================================= */

.pf-panou {
	--pf-albastru: #293593;
	--pf-albastru-inchis: #1f2f86;
	--pf-auriu: #d4af37;
	--pf-text: #1a1d2e;
	--pf-text-sters: #6c7393;
	--pf-linie: #e4e7f2;
	--pf-fundal-blând: #f8f9ff;

	max-width: 980px;
	margin: 40px auto;
	color: var(--pf-text);
	box-sizing: border-box;
}

.pf-panou *,
.pf-panou *::before,
.pf-panou *::after {
	box-sizing: border-box;
}

/* =============================================================================
   ANTET
============================================================================= */

.pf-antet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--pf-linie);
}

.pf-antet-titlu {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pf-text);
}

.pf-antet-sub {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--pf-text-sters);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* =============================================================================
   BUTOANE
============================================================================= */

.pf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.pf-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.pf-btn-principal {
	background: var(--pf-albastru);
	color: #fff !important;
}

.pf-btn-principal:hover {
	background: var(--pf-albastru-inchis);
}

.pf-btn-secundar {
	background: #f4f5ff;
	color: var(--pf-albastru) !important;
	border: 1px solid #d8dcff;
}

.pf-btn-secundar:hover {
	background: #eef1ff;
}

.pf-btn-editare {
	background: var(--pf-albastru);
	color: #fff !important;
	padding: 10px 20px;
	font-size: 14px;
}

.pf-btn-editare:hover {
	background: var(--pf-albastru-inchis);
}

.pf-btn-salvare {
	background: linear-gradient(135deg, #d4af37, #f2d680);
	color: #111 !important;
	padding: 15px 32px;
	font-size: 16px;
	box-shadow: 0 6px 20px rgba(212, 175, 55, .3);
}

.pf-btn-plus {
	font-size: 18px;
	line-height: 1;
}

.pf-link-mic {
	font-size: 13px;
	color: var(--pf-text-sters);
	text-decoration: underline;
}

.pf-link-mic:hover {
	color: var(--pf-albastru);
}

/* =============================================================================
   NOTIFICĂRI
============================================================================= */

.pf-notificare {
	padding: 14px 18px;
	border-radius: 12px;
	margin-bottom: 22px;
	font-size: 15px;
	font-weight: 600;
	border-left: 4px solid transparent;
}

.pf-notificare.succes {
	background: #e8f8ef;
	color: #17663c;
	border-left-color: #22c55e;
}

.pf-notificare.eroare {
	background: #fdecec;
	color: #8d1f1f;
	border-left-color: #e04444;
}

.pf-notificare.atentie {
	background: #fff6e5;
	color: #7a5410;
	border-left-color: var(--pf-auriu);
}

/* =============================================================================
   STARE GOALĂ
============================================================================= */

.pf-gol {
	text-align: center;
	padding: 60px 24px;
	background: var(--pf-fundal-blând);
	border: 1px dashed #d6dcff;
	border-radius: 16px;
}

.pf-gol-titlu {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
}

.pf-gol-text {
	color: var(--pf-text-sters);
	margin: 0 0 22px;
}

/* =============================================================================
   LISTA DE LUCRĂRI
============================================================================= */

.pf-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pf-lista-item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--pf-linie);
	border-radius: 16px;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.pf-lista-item:hover {
	border-color: #c9d0f5;
	box-shadow: 0 6px 22px rgba(41, 53, 147, .08);
}

.pf-lista-imagine {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--pf-fundal-blând);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pf-lista-imagine img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pf-fara-imagine {
	font-size: 11px;
	color: var(--pf-text-sters);
	text-align: center;
	padding: 6px;
	line-height: 1.3;
}

.pf-lista-continut {
	flex: 1 1 auto;
	min-width: 0;
}

.pf-lista-titlu {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	word-break: break-word;
}

.pf-lista-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--pf-text-sters);
}

.pf-separator {
	opacity: .5;
}

.pf-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	background: #eef1ff;
	color: var(--pf-albastru);
}

.pf-badge-publish {
	background: #e8f8ef;
	color: #17663c;
}

.pf-badge-pending {
	background: #fff6e5;
	color: #7a5410;
}

.pf-badge-draft {
	background: #f1f2f6;
	color: #5a5f70;
}

.pf-lista-actiuni {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

/* =============================================================================
   PAGINARE
============================================================================= */

.pf-paginare {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.pf-paginare-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid var(--pf-linie);
	font-weight: 600;
	font-size: 14px;
	color: var(--pf-text);
	text-decoration: none;
}

.pf-paginare-item.activ,
.pf-paginare-item:hover {
	background: var(--pf-albastru);
	border-color: var(--pf-albastru);
	color: #fff;
}

/* =============================================================================
   FORMULAR
============================================================================= */

.pf-form {
	background: #fff;
	border: 1px solid var(--pf-linie);
	border-radius: 18px;
	padding: 28px;
}

.pf-camp {
	margin-bottom: 28px;
}

.pf-camp:last-of-type {
	margin-bottom: 18px;
}

.pf-eticheta {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
}

.pf-ajutor {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pf-text-sters);
}

.pf-input,
.pf-textarea,
.pf-select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid #d8dcff;
	border-radius: 12px;
	font-size: 15px;
	font-family: inherit;
	color: var(--pf-text);
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.pf-input:focus,
.pf-textarea:focus,
.pf-select:focus {
	outline: none;
	border-color: var(--pf-albastru);
	box-shadow: 0 0 0 3px rgba(41, 53, 147, .12);
}

.pf-textarea {
	resize: vertical;
	min-height: 160px;
	line-height: 1.6;
}

/* Ascunde input-ul de fișier real, dar îl păstrează accesibil prin <label>. */
.pf-input-ascuns {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================================
   IMAGINE PRINCIPALĂ
============================================================================= */

.pf-featured {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 18px;
	background: var(--pf-fundal-blând);
	border: 1px solid #e8ebff;
	border-radius: 14px;
}

.pf-featured-preview {
	flex: 0 0 160px;
	width: 160px;
	height: 160px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--pf-linie);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pf-featured-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pf-featured-actiuni {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.pf-nume-fisier {
	font-size: 13px;
	color: var(--pf-text-sters);
	word-break: break-all;
}

/* =============================================================================
   ZONA DE UPLOAD GALERIE
============================================================================= */

.pf-dropzone {
	border: 2px dashed #d6dcff;
	border-radius: 16px;
	padding: 26px 20px;
	text-align: center;
	background: var(--pf-fundal-blând);
	transition: border-color .2s ease, background-color .2s ease;
}

.pf-dropzone.activ {
	border-color: var(--pf-albastru);
	background: #eef1ff;
}

.pf-dropzone-titlu {
	font-size: 16px;
	font-weight: 700;
	color: var(--pf-albastru-inchis);
}

.pf-dropzone-sub {
	font-size: 13px;
	color: var(--pf-text-sters);
	margin-top: 5px;
}

.pf-dropzone-actiuni {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 20px;
}

/* =============================================================================
   GRILA DE IMAGINI
============================================================================= */

.pf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
	margin-top: 18px;
}

.pf-item {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--pf-linie);
	background: #fff;
	cursor: grab;
	aspect-ratio: 1 / 1;
}

.pf-item:active {
	cursor: grabbing;
}

.pf-item.se-trage {
	opacity: .4;
}

.pf-item.tinta {
	outline: 3px solid var(--pf-albastru);
	outline-offset: -3px;
}

.pf-item-imagine {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter .25s ease, opacity .25s ease;
}

.pf-item.se-incarca .pf-item-imagine {
	filter: blur(4px) grayscale(60%);
	opacity: .5;
}

/* Suprapunerea afișată în timpul încărcării. */
.pf-item-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 8px;
}

.pf-item.eroare .pf-item-overlay {
	background: rgba(150, 25, 25, .7);
}

.pf-item-progres {
	font-size: 13px;
}

.pf-item-ordine {
	position: absolute;
	bottom: 6px;
	left: 6px;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 6px;
	pointer-events: none;
}

.pf-item-sterge {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .18s ease;
}

.pf-item-sterge:hover {
	background: #e04444;
}

/* Săgețile de reordonare — alternativă la drag & drop, utilă pe touch. */
.pf-item-mutare {
	position: absolute;
	bottom: 6px;
	right: 6px;
	display: flex;
	gap: 4px;
}

.pf-item-mut {
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.pf-item-mut:hover {
	background: var(--pf-albastru);
}

/* Ascunde controalele cât timp imaginea încă se încarcă. */
.pf-item.se-incarca .pf-item-sterge,
.pf-item.se-incarca .pf-item-mutare,
.pf-item.se-incarca .pf-item-ordine {
	display: none;
}

/* =============================================================================
   ACȚIUNI FORMULAR
============================================================================= */

.pf-actiuni-form {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid var(--pf-linie);
}

/* =============================================================================
   RESPONSIVE
============================================================================= */

@media (max-width: 782px) {

	.pf-panou {
		margin: 24px auto;
		padding: 0 14px;
	}

	.pf-antet {
		align-items: flex-start;
	}

	.pf-lista-item {
		flex-direction: column;
		align-items: stretch;
	}

	.pf-lista-imagine {
		flex: 0 0 auto;
		width: 100%;
		height: 180px;
	}

	.pf-lista-actiuni {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.pf-form {
		padding: 20px 16px;
	}

	.pf-featured {
		flex-direction: column;
		align-items: stretch;
	}

	.pf-featured-preview {
		flex: 0 0 auto;
		width: 100%;
		height: 220px;
	}

	.pf-featured-actiuni {
		align-items: stretch;
	}

	.pf-dropzone-actiuni {
		flex-direction: column;
	}

	.pf-dropzone-actiuni .pf-btn {
		width: 100%;
	}

	.pf-grid {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	}
}