/**
 * Zufuk'x — Client Records (expedientes)
 * Extends staff-dashboard.css.
 */

.zfx-rec-privacy-note {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fdf8ef;
	border: 1px solid #e8dcc6;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 18px;
	font-size: .84rem;
	color: #5a4a33;
}
.zfx-rec-privacy-note .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* ── Record cards ───────────────────────────────────────────────── */
.zfx-rec-list { display: flex; flex-direction: column; gap: 12px; }

.zfx-rec-card {
	background: #fff;
	border: 1px solid var(--zfx-border-color, #e4d8c8);
	border-radius: 8px;
	padding: 14px 16px;
}
.zfx-rec-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.zfx-rec-card-meta { font-size: .8rem; color: #8a8a8a; margin-top: 2px; }
.zfx-rec-card-goal {
	margin: 10px 0 0;
	font-size: .85rem;
	color: #555;
	line-height: 1.5;
}
.zfx-rec-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.zfx-rec-photo-count {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: .78rem;
	color: #8a8a8a;
	margin-right: 4px;
}
.zfx-rec-photo-count .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* ── Editor ─────────────────────────────────────────────────────── */
.zfx-modal-lg { max-width: 860px; width: 96vw; }

.zfx-rec-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 22px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--zfx-border-color, #e4d8c8);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b5a42;
}

.zfx-rec-mini-label {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a8a8a;
	margin-bottom: 3px;
}

/* ── Steps ──────────────────────────────────────────────────────── */
.zfx-rec-step {
	background: #faf8f5;
	border: 1px solid var(--zfx-border-color, #e4d8c8);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 12px;
}
.zfx-rec-step-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.zfx-rec-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #815f39;
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
}
.zfx-rec-step textarea { margin-bottom: 8px; }

/* Quantity / unit / product stay visibly separate — the layout mirrors how
   the formula is actually written on paper. */
.zfx-rec-comp {
	display: grid;
	grid-template-columns: 90px 70px 1fr auto;
	gap: 6px;
	margin-bottom: 6px;
}
@media (max-width: 640px) {
	.zfx-rec-comp { grid-template-columns: 70px 56px 1fr auto; }
}

/* ── Photos ─────────────────────────────────────────────────────── */
.zfx-rec-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
	margin-top: 10px;
}
.zfx-rec-photo {
	position: relative;
	border: 1px solid var(--zfx-border-color, #e4d8c8);
	border-radius: 6px;
	overflow: hidden;
	background: #faf8f5;
}
.zfx-rec-photo-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	background: #f1ece4;
}
.zfx-rec-photo-img img { width: 100%; height: 120px; object-fit: cover; display: block; }
.zfx-rec-photo-stage {
	display: block;
	padding: 5px 7px;
	font-size: .72rem;
	color: #6b5a42;
}
.zfx-rec-photo .js-photo-del {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 0 6px;
	line-height: 20px;
}

/* ── Note fields ────────────────────────────────────────────────── */
/* These hold the write-up — what a step is for, how it was applied, how it
   came out. They are the point of the record, so they get real room, and
   stay draggable for the times a note runs long. */
#zfxRecModal textarea {
	resize: vertical;
	line-height: 1.55;
	font-family: inherit;
}

.zfx-rec-textarea { min-height: 96px; }

#zfxRecResult { min-height: 170px; }

.zfx-rec-step .js-step-purpose { min-height: 92px; }
.zfx-rec-step .js-step-notes   { min-height: 116px; }