/**
 * حقل اختيار ملف (UI::field( 'file' ) → components/field.php، السلوك في js/components/file.js)
 * منطقة منقطة بأيقونة واسم الملف المختار، تقبل السحب والإفلات
 */

.tnt .tnt-file {
	position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
	border: 1.5px dashed var(--tnt-border-strong); border-radius: var(--tnt-radius); background: var(--tnt-surface-2);
	transition: border-color .18s, background .18s, box-shadow .18s;
}
.tnt .tnt-file:hover { border-color: var(--tnt-gold); background: var(--tnt-gold-50); }
.tnt .tnt-file.is-drag { border-color: var(--tnt-gold); background: var(--tnt-gold-50); box-shadow: var(--tnt-ring); }
.tnt .tnt-file:focus-within { border-color: var(--tnt-gold); box-shadow: var(--tnt-ring); }
.tnt .tnt-file.has-file { border-style: solid; border-color: rgba(var(--tnt-gold-rgb), .55); background: var(--tnt-surface); }

/* الحقل الأصلي مخفي بصرياً ويبقى قابلاً للتركيز والإرسال */
.tnt .tnt-file__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tnt .tnt-file__icon {
	width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; pointer-events: none;
	background: var(--tnt-surface); border: 1px solid var(--tnt-border); color: var(--tnt-gold-600); transition: background .18s, color .18s;
}
.tnt .tnt-file.has-file .tnt-file__icon { background: linear-gradient(135deg, var(--tnt-gold-400), var(--tnt-gold-600)); border-color: transparent; color: var(--tnt-navy-900); }
.tnt .tnt-file__text { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: right; pointer-events: none; }
.tnt .tnt-file__text strong { font-size: 13.5px; font-weight: 700; color: var(--tnt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnt .tnt-file:not(.has-file) .tnt-file__text strong { color: var(--tnt-text-2); font-weight: 600; }
.tnt .tnt-file__text small { font-size: 12px; color: var(--tnt-muted); }
.tnt .tnt-file__text small:empty { display: none; }
.tnt .tnt-file__btn {
	flex-shrink: 0; padding: 8px 14px; border-radius: 9px; font: 700 13px var(--tnt-font); pointer-events: none;
	background: var(--tnt-btn-primary-bg); color: #fff; box-shadow: var(--tnt-btn-primary-shadow);
}
.tnt .tnt-file.has-file .tnt-file__btn { background: var(--tnt-surface-2); color: var(--tnt-navy-800); box-shadow: none; border: 1px solid var(--tnt-border); }
.tnt .tnt-file__clear {
	position: relative; z-index: 2; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--tnt-border); flex-shrink: 0;
	display: grid; place-items: center; background: var(--tnt-surface); color: var(--tnt-muted); cursor: pointer;
}
.tnt .tnt-file__clear[hidden] { display: none; }
.tnt .tnt-file__clear:hover { color: var(--tnt-danger); border-color: var(--tnt-danger); background: var(--tnt-danger-50); }

@media (max-width: 480px) {
	.tnt .tnt-file__btn { display: none; }
}

/* أي حقل ملف آخر خارج المكوّن (نماذج قديمة أو من إضافات أخرى): زر الاختيار بنفس الهوية */
.tnt input[type="file"]:not(.tnt-file__input)::file-selector-button {
	margin-inline-end: 12px; padding: 8px 14px; border: 0; border-radius: 9px; cursor: pointer;
	background: var(--tnt-btn-primary-bg); color: #fff; font: 700 13px var(--tnt-font);
}