/* ==========================================================
   Custom native-control replacements (see js/core/native-controls.js)
   Date / time / month pickers, file, range, color, number stepper.
   Neumorphic + liquid-glass, theme-token driven.
   ========================================================== */

/* Hide the native input but keep it submittable / focusable. */
.nm-native-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* ── shared field display (date/time/etc.) ─────────────────────────────── */
.nm-field { position: relative; }

.nm-field-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	text-align: left;
	cursor: pointer;
}
.nm-field-display:disabled { cursor: not-allowed; opacity: 0.6; }

.nm-field-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-field-text.nm-placeholder { color: var(--nm-muted); opacity: 0.75; }
.nm-field-icon { color: var(--nm-accent); flex: 0 0 auto; font-size: 0.95em; }

/* ── floating popover (calendar / time / color) ────────────────────────── */
.nm-popover {
	position: fixed;
	z-index: 1080;
	background: var(--glass-bg-strong);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--nm-radius-sm);
	box-shadow: var(--glass-shadow), var(--nm-raised-sm);
	padding: 12px;
	animation: nm-pop-in 0.14s ease-out;
}
@keyframes nm-pop-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* ── calendar ───────────────────────────────────────────────────────────── */
.nm-cal { width: 268px; }
.nm-cal.nm-time { width: auto; }

.nm-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.nm-cal-nav, .nm-cal-title {
	background: transparent;
	border: none;
	color: var(--nm-text);
	border-radius: var(--nm-radius-xs);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.nm-cal-nav {
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
}
.nm-cal-title { font-weight: 700; padding: 4px 10px; font-size: 0.95rem; }
.nm-cal-nav:hover, .nm-cal-title:hover { background: rgba(110, 168, 74, 0.14); color: var(--nm-accent); }

.nm-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.nm-cal-grid.nm-cal-months { grid-template-columns: repeat(3, 1fr); gap: 6px; }

.nm-cal-dow {
	text-align: center;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--nm-muted);
	padding-bottom: 4px;
}

.nm-cal-cell {
	background: transparent;
	border: none;
	color: var(--nm-text);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.nm-cal-months .nm-cal-cell { aspect-ratio: auto; border-radius: var(--nm-radius-xs); padding: 8px 0; }
.nm-cal-cell.is-empty { pointer-events: none; }
.nm-cal-cell.is-disabled,
.nm-cal-cell:disabled {
	color: var(--nm-faint);
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}
.nm-cal-cell.is-disabled:hover { background: transparent; }
.nm-cal-cell:hover { background: rgba(110, 168, 74, 0.16); color: var(--nm-accent); }
.nm-cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--nm-accent); font-weight: 700; }
.nm-cal-cell.is-picked {
	background: var(--nm-accent);
	color: #fff;
	font-weight: 700;
}

/* time row */
.nm-cal-time {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--glass-edge);
	color: var(--nm-text);
}
.nm-cal.nm-time .nm-cal-time { margin-top: 0; padding-top: 0; border-top: none; }
.nm-cal-tsel {
	background: var(--nm-bg);
	border: none;
	border-radius: var(--nm-radius-xs);
	box-shadow: var(--nm-inset-sm);
	color: var(--nm-text);
	padding: 4px 8px;
	font-variant-numeric: tabular-nums;
}
.nm-cal-tcolon { font-weight: 700; }
.nm-cal-tap { margin-left: 6px; font-weight: 600; }

.nm-cal-foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--glass-edge);
}
.nm-cal.nm-time .nm-cal-foot { border-top: 1px solid var(--glass-edge); }
.nm-cal-action {
	background: var(--nm-bg);
	border: none;
	border-radius: var(--nm-radius-xs);
	box-shadow: var(--nm-raised-sm);
	color: var(--nm-accent);
	font-weight: 600;
	font-size: 0.8rem;
	padding: 6px 14px;
	cursor: pointer;
	transition: box-shadow 0.15s;
}
.nm-cal-action:hover { box-shadow: var(--nm-inset-sm); }
.nm-cal-action.nm-cal-clear { color: var(--nm-muted); }

/* ── file input ─────────────────────────────────────────────────────────── */
.nm-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-file-previews {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.nm-file-previews:empty { display: none; }
.nm-file-thumb {
	width: 72px;
	height: 72px;
	border-radius: var(--nm-radius-xs);
	overflow: hidden;
	background: var(--nm-bg);
	box-shadow: var(--nm-inset-sm);
	flex: 0 0 auto;
}
.nm-file-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.nm-file-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--nm-bg);
	border: none;
	border-radius: var(--nm-radius-sm);
	box-shadow: var(--nm-raised-sm);
	color: var(--nm-text);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 8px 16px;
	cursor: pointer;
	transition: box-shadow 0.15s, color 0.15s;
	flex: 0 0 auto;
}
.nm-file-btn:hover { box-shadow: var(--nm-inset-sm); color: var(--nm-accent); }
.nm-file-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.nm-file-btn i { color: var(--nm-accent); }
.nm-file-label {
	color: var(--nm-muted);
	font-size: 0.85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nm-file-label.has-file { color: var(--nm-text); font-weight: 600; }

/* ── range slider ───────────────────────────────────────────────────────── */
.nm-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(to right,
		var(--nm-accent) 0%, var(--nm-accent) var(--nm-range-pct, 0%),
		var(--nm-bg) var(--nm-range-pct, 0%), var(--nm-bg) 100%);
	box-shadow: var(--nm-inset-sm);
	outline: none;
	cursor: pointer;
}
.nm-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--nm-surface);
	box-shadow: var(--nm-raised-sm);
	border: 2px solid var(--nm-accent);
	cursor: pointer;
}
.nm-range::-moz-range-thumb {
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--nm-surface);
	box-shadow: var(--nm-raised-sm);
	border: 2px solid var(--nm-accent);
	cursor: pointer;
}
.nm-range::-moz-range-track { background: transparent; }
.nm-range-bubble {
	display: inline-block;
	margin-left: 10px;
	min-width: 2.5em;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--nm-accent);
}

/* ── color picker ───────────────────────────────────────────────────────── */
.nm-color { display: inline-block; }
.nm-color-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--nm-bg);
	border: none;
	border-radius: var(--nm-radius-sm);
	box-shadow: var(--nm-inset-sm);
	padding: 6px 14px 6px 6px;
	cursor: pointer;
	transition: box-shadow 0.15s;
}
.nm-color-btn:hover { box-shadow: var(--nm-inset); }
.nm-color-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.nm-color-swatch {
	width: 26px; height: 26px;
	border-radius: var(--nm-radius-xs);
	box-shadow: var(--nm-raised-sm);
	flex: 0 0 auto;
}
.nm-color-hex {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--nm-text);
	letter-spacing: 0.04em;
}
.nm-color-pop { width: 196px; }
.nm-color-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.nm-color-cell {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: none;
	border-radius: var(--nm-radius-xs);
	box-shadow: var(--nm-raised-sm);
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
}
.nm-color-cell:hover { transform: scale(1.08); }
.nm-color-cell.is-picked { box-shadow: 0 0 0 2.5px var(--nm-accent), var(--nm-raised-sm); }
.nm-color-hexrow {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--glass-edge);
}
.nm-color-hexrow .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── number stepper ─────────────────────────────────────────────────────── */
.nm-number {
	display: inline-flex;
	align-items: stretch;
	gap: 6px;
	width: 100%;
}
.nm-number-btn {
	flex: 0 0 auto;
	width: 40px;
	background: var(--nm-bg);
	border: none;
	border-radius: var(--nm-radius-sm);
	box-shadow: var(--nm-raised-sm);
	color: var(--nm-accent);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 0.12s;
}
.nm-number-btn:hover { box-shadow: var(--nm-inset-sm); }
.nm-number-btn:active { box-shadow: var(--nm-inset); }
.nm-number-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.nm-number-input { flex: 1 1 auto; text-align: center; }
/* hide native spinner arrows */
.nm-number-input::-webkit-outer-spin-button,
.nm-number-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nm-number-input[type=number] { -moz-appearance: textfield; appearance: textfield; }