/* Stylesheet for Grant Management Web Portal Assets (especially Web Forms) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Scope styling specifically to the grant application page routes or containers */
body[data-route^="grant-application"],
body:has(.web-form-container) {
	background-color: #080b13 !important;
	color: #e2e8f0 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body[data-route^="grant-application"] header,
body[data-route^="grant-application"] footer,
body[data-route^="grant-application"] .navbar,
body[data-route^="grant-application"] .page-container,
body[data-route^="grant-application"] .web-page-content,
body:has(.web-form-container) header,
body:has(.web-form-container) footer,
body:has(.web-form-container) .navbar,
body:has(.web-form-container) .page-container,
body:has(.web-form-container) .web-page-content {
	background-color: #080b13 !important;
	border-color: #141b2d !important;
	color: #e2e8f0 !important;
}

body[data-route^="grant-application"] h1,
body[data-route^="grant-application"] h2,
body[data-route^="grant-application"] h3,
body[data-route^="grant-application"] h4,
body:has(.web-form-container) h1,
body:has(.web-form-container) h2,
body:has(.web-form-container) h3,
body:has(.web-form-container) h4 {
	font-family: 'Outfit', sans-serif !important;
	color: #ffffff !important;
}

/* Background overlay gradient for the application page */
body[data-route^="grant-application"] .page-content-wrapper,
body:has(.web-form-container) .page-content-wrapper {
	background: radial-gradient(circle at 10% 20%, rgba(244, 63, 94, 0.04) 0%, transparent 40%),
	            radial-gradient(circle at 90% 80%, rgba(251, 191, 36, 0.02) 0%, transparent 40%),
	            #080b13;
	min-height: 100vh;
	padding: 4rem 1rem;
}

/* Styled form wrapper */
.web-form-container {
	max-width: 800px !important;
	margin: 0 auto !important;
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(9, 13, 26, 0.75) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 24px !important;
	padding: 3rem !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Header style within form container */
.web-form-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding-bottom: 1.5rem !important;
	margin-bottom: 2rem !important;
}

.web-form-title {
	font-size: 2.2rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	background: linear-gradient(135deg, #ffffff 60%, #b3c5ef 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Input Fields styling */
.web-form-container input[type="text"],
.web-form-container input[type="password"],
.web-form-container input[type="email"],
.web-form-container input[type="number"],
.web-form-container input[type="tel"],
.web-form-container input[type="url"],
.web-form-container select,
.web-form-container textarea,
.web-form-container .form-control {
	background: rgba(9, 13, 26, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	border-radius: 12px !important;
	padding: 0.8rem 1.2rem !important;
	font-size: 0.95rem !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.web-form-container input:focus,
.web-form-container select:focus,
.web-form-container textarea:focus,
.web-form-container .form-control:focus {
	outline: none !important;
	border-color: rgba(244, 63, 94, 0.4) !important;
	box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12) !important;
	background: rgba(9, 13, 26, 0.85) !important;
}

/* Form Section Title & Label */
.web-form-container .control-label,
.web-form-container label {
	color: #94a3b8 !important;
	font-weight: 600 !important;
	font-size: 0.88rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	margin-bottom: 0.5rem !important;
}

.web-form-container .control-subtitle,
.web-form-container .help-box {
	color: #64748b !important;
	font-size: 0.8rem !important;
	margin-top: 0.25rem !important;
}

/* Rich Text Editor Editor override (Quill Editor) */
.web-form-container .ql-toolbar {
	background: rgba(15, 23, 42, 0.8) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
}

.web-form-container .ql-container {
	border-color: rgba(255, 255, 255, 0.08) !important;
	background: rgba(9, 13, 26, 0.6) !important;
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.web-form-container .ql-editor {
	color: #ffffff !important;
	min-height: 180px !important;
}

/* Select option styling fallback */
.web-form-container option {
	background-color: #0b0f19 !important;
	color: #ffffff !important;
}

/* Checkbox & Radio Alignment */
.web-form-container input[type="checkbox"] {
	accent-color: #f43f5e !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
}

.web-form-container .checkbox label {
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #cbd5e1 !important;
	font-weight: 500 !important;
	font-size: 0.92rem !important;
	cursor: pointer !important;
}

/* Form Action Buttons */
.web-form-actions {
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding-top: 2rem !important;
	margin-top: 2rem !important;
	display: flex !important;
	justify-content: flex-end !important;
	gap: 1rem !important;
}

.web-form-container .btn-primary,
.web-form-container .btn-form-submit {
	background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	padding: 0.85rem 2.2rem !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
}

.web-form-container .btn-primary:hover,
.web-form-container .btn-form-submit:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(244, 63, 94, 0.5) !important;
}

/* Secondary Button style */
.web-form-container .btn-default,
.web-form-container .btn-secondary {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #cbd5e1 !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	padding: 0.85rem 1.8rem !important;
	border-radius: 12px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
}

.web-form-container .btn-default:hover,
.web-form-container .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
}

/* Alert Boxes within Forms */
.web-form-container .alert {
	background: rgba(15, 23, 42, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 14px !important;
	color: #cbd5e1 !important;
}

/* Responsive Overrides */
@media (max-width: 768px) {
	.web-form-container {
		padding: 1.5rem !important;
		border-radius: 16px !important;
	}
	.web-form-title {
		font-size: 1.8rem !important;
	}
}