secubox-openwrt/luci-theme-secubox/htdocs/luci-static/resources/secubox-theme/components/forms.css

/* ===== BASE FORM INPUTS ===== */

.cyber-input,
.cyber-select,
.cyber-textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background: rgba(14, 18, 45, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--cyber-radius-sm);
	color: var(--cyber-text-primary);
	font-family: var(--cyber-font-body);
	font-size: 1rem;
	transition: border var(--cyber-transition), box-shadow var(--cyber-transition);
}

.cyber-input:focus,
.cyber-select:focus,
.cyber-textarea:focus {
	outline: none;
	border-color: var(--cyber-accent-secondary);
	box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

.cyber-input::placeholder {
	color: var(--cyber-text-muted);
	opacity: 0.6;
}

.cyber-textarea {
	resize: vertical;
	min-height: 100px;
}

/* ===== FORM FIELD ===== */

.cyber-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.cyber-field label {
	font-size: 0.85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cyber-text-secondary);
}

.cyber-field-helper {
	font-size: 0.75rem;
	color: var(--cyber-text-muted);
	margin-top: 0.25rem;
}

.cyber-field-error {
	font-size: 0.75rem;
	color: var(--cyber-danger);
	margin-top: 0.25rem;
}

/* ===== FORM LAYOUTS ===== */

.cyber-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cyber-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

.cyber-form-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== RESPONSIVE FORMS - TABLET ===== */

@media (max-width: 768px) {
	.cyber-form-row {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.cyber-field {
		margin-bottom: 0.85rem;
	}

	.cyber-field label {
		font-size: 0.8rem;
	}

	.cyber-input,
	.cyber-select,
	.cyber-textarea {
		padding: 0.7rem 0.9rem;
		font-size: 0.95rem;
	}

	.cyber-form-actions {
		flex-direction: column-reverse;
	}

	.cyber-form-actions .cyber-btn {
		width: 100%;
	}
}

/* ===== RESPONSIVE FORMS - MOBILE (Touch-Friendly) ===== */

@media (max-width: 480px) {
	.cyber-input,
	.cyber-select,
	.cyber-textarea {
		/* iOS touch target size minimum: 44px */
		min-height: 44px;
		padding: 0.65rem 0.85rem;
		font-size: 16px; /* Prevents iOS zoom on focus */
	}

	.cyber-select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
		background-size: 12px;
		padding-right: 2.5rem;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	.cyber-field {
		margin-bottom: 1rem;
	}

	.cyber-field label {
		font-size: 0.75rem;
		margin-bottom: 0.35rem;
	}

	.cyber-textarea {
		min-height: 120px;
	}

	.cyber-form-actions {
		position: sticky;
		bottom: 0;
		background: var(--cyber-bg-primary);
		padding: 1rem;
		margin: 0 -1rem;
		border-top: 2px solid var(--cyber-border-strong);
		gap: 0.5rem;
	}
}

/* ===== FORM STATES ===== */

.cyber-input:disabled,
.cyber-select:disabled,
.cyber-textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: rgba(14, 18, 45, 0.3);
}

.cyber-input.error,
.cyber-select.error,
.cyber-textarea.error {
	border-color: var(--cyber-danger);
}

.cyber-input.error:focus,
.cyber-select.error:focus,
.cyber-textarea.error:focus {
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.cyber-input.success,
.cyber-select.success,
.cyber-textarea.success {
	border-color: var(--cyber-success);
}

/* ===== CHECKBOX & RADIO ===== */

.cyber-checkbox,
.cyber-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	padding: 0.5rem 0;
}

.cyber-checkbox input[type="checkbox"],
.cyber-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

@media (max-width: 480px) {
	.cyber-checkbox input[type="checkbox"],
	.cyber-radio input[type="radio"] {
		width: 22px;
		height: 22px;
	}
}

/* ===== INPUT GROUPS ===== */

.cyber-input-group {
	display: flex;
	align-items: stretch;
}

.cyber-input-group .cyber-input {
	border-radius: var(--cyber-radius-sm) 0 0 var(--cyber-radius-sm);
	border-right: none;
}

.cyber-input-group-append {
	background: rgba(14, 18, 45, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0 var(--cyber-radius-sm) var(--cyber-radius-sm) 0;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	color: var(--cyber-text-secondary);
	font-size: 0.9rem;
}

@media (max-width: 480px) {
	.cyber-input-group {
		flex-direction: column;
	}

	.cyber-input-group .cyber-input {
		border-radius: var(--cyber-radius-sm) var(--cyber-radius-sm) 0 0;
		border-right: 1px solid rgba(255, 255, 255, 0.12);
		border-bottom: none;
	}

	.cyber-input-group-append {
		border-radius: 0 0 var(--cyber-radius-sm) var(--cyber-radius-sm);
		border-top: none;
		justify-content: center;
	}
}