/* Netlinko – common fields (assets/forms.js): lists with a visible arrow, dates, file buttons,
   numbers. Lists and dates are styled in the member space (.nl-space) and in any .nl-forms
   block; .nl-file and .nl-select work anywhere (admin included). */

/* Lists: an arrow shows that there are other choices. */
.nl-space select:not([multiple]):not([size]):not(.nl-picker__native),
.nl-forms select:not([multiple]):not([size]):not(.nl-picker__native),
select.nl-select {
	-webkit-appearance: none; appearance: none;
	padding-right: 2.5em;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8em center;
	background-size: 1em 1em;
	cursor: pointer;
}
.nl-space select:not([multiple]):not([size]):hover,
.nl-forms select:not([multiple]):not([size]):hover,
select.nl-select:hover { border-color: color-mix(in srgb, var(--nl-primary, #0d2f4f) 45%, #d3d9e6); }
.nl-space select:disabled, .nl-forms select:disabled, select.nl-select:disabled { cursor: not-allowed; opacity: .65; }

/* Dates: a calendar icon, the whole field opens the calendar. */
.nl-space input[type=date], .nl-space input[type=datetime-local], .nl-space input[type=month],
.nl-forms input[type=date], .nl-forms input[type=datetime-local], .nl-forms input[type=month], input.nl-date {
	min-height: 2.75em; padding: .55em .8em; border: 1px solid #d3d9e6; border-radius: 10px;
	background: #fff; color: var(--nl-ink, #0b1a2b); font: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
}
.nl-space input[type=date]::-webkit-calendar-picker-indicator,
.nl-space input[type=datetime-local]::-webkit-calendar-picker-indicator,
.nl-forms input[type=date]::-webkit-calendar-picker-indicator,
.nl-forms input[type=datetime-local]::-webkit-calendar-picker-indicator,
input.nl-date::-webkit-calendar-picker-indicator {
	width: 1.1em; height: 1.1em; padding: .25em; margin-left: .4em; border-radius: 6px; cursor: pointer; opacity: .75;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2f4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / 1.1em;
	color: transparent;
}
.nl-space input[type=date]::-webkit-calendar-picker-indicator:hover,
.nl-forms input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--nl-primary-50, #e8eef5); }
.nl-space input[type=date]:focus, .nl-forms input[type=date]:focus, input.nl-date:focus { outline: none; border-color: var(--nl-primary, #0d2f4f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nl-primary, #0d2f4f) 15%, transparent); }
.nl-space input[type=date]:disabled, .nl-forms input[type=date]:disabled { cursor: not-allowed; opacity: .65; }

/* Numbers: no spinner arrows eating the room; a short shake when a letter is refused. */
.nl-space input[type=number], .nl-forms input[type=number] { font-variant-numeric: tabular-nums; }
.nl-space input[type=number]::-webkit-inner-spin-button { opacity: .45; }
.nl-refused { animation: nl-refused .35s; border-color: var(--nl-red, #d42f2f) !important; }
@keyframes nl-refused { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .nl-refused { animation: none; } }

/* Files: a real button, the name of the file chosen beside it; the field (invisible) covers
   the whole box, so a click or a dropped file works anywhere on it. */
label.nl-file {
	position: relative; display: flex; align-items: center; gap: .75em; width: 100%; max-width: 560px;
	min-height: 3em; margin: .2em 0; padding: .45em .6em .45em .45em;
	border: 1.5px dashed #c5cede; border-radius: 12px; background: #f9fbfd;
	color: var(--nl-muted, #5b6b7c); font: inherit; font-weight: 400; cursor: pointer;
	transition: border-color .15s, background .15s;
}
label.nl-file:hover, label.nl-file.is-over { border-color: var(--nl-primary, #0d2f4f); background: var(--nl-primary-50, #e8eef5); }
label.nl-file:focus-within { border-color: var(--nl-primary, #0d2f4f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nl-primary, #0d2f4f) 15%, transparent); }
label.nl-file.has-file { border-style: solid; border-color: color-mix(in srgb, var(--nl-mint, #0fa97a) 55%, #c5cede); background: var(--nl-mint-50, #e3f7ef); }
label.nl-file input[type=file] {
	position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; opacity: 0; cursor: pointer; font-size: 0;
}
label.nl-file .nl-file__btn {
	display: inline-flex; align-items: center; gap: .45em; flex: none; padding: .5em .95em; border-radius: 9px;
	background: var(--nl-primary, #0d2f4f); color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.2;
	box-shadow: 0 1px 2px rgba(13, 47, 79, .25); pointer-events: none; white-space: nowrap;
}
label.nl-file .nl-file__btn::before {
	content: ""; width: 1em; height: 1em; flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E") no-repeat center / contain;
}
label.nl-file:hover .nl-file__btn { background: var(--nl-primary-600, #071e33); }
label.nl-file .nl-file__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; pointer-events: none; }
label.nl-file.has-file .nl-file__name { color: var(--nl-ink, #0b1a2b); font-weight: 600; }
label.nl-file .nl-file__hint { display: block; font-size: .8rem; color: var(--nl-muted, #5b6b7c); }
@media (max-width: 480px) {
	label.nl-file { flex-wrap: wrap; }
	label.nl-file .nl-file__name { flex-basis: 100%; white-space: normal; padding: 0 .2em .1em; }
}