/* ==========================================================================
   Job Applicant & Employee Data Web Forms - Modern Mobile Responsive Styles
   ========================================================================== */

/* Universal Box-Sizing & Layout Protection */
[data-doctype="Web Form"],
[data-doctype="Web Form"] body,
[data-doctype="Web Form"] .page-content-wrapper,
[data-doctype="Web Form"] .web-form-container,
[data-doctype="Web Form"] .web-form {
	box-sizing: border-box !important;
}

/* Page & Layout Container - Desktop */
[data-doctype="Web Form"] .page-content-wrapper,
[data-doctype="Web Form"] .page-content-wrapper .container,
[data-doctype="Web Form"] main.container,
[data-doctype="Web Form"] .container,
[data-doctype="Web Form"] .page_content,
.page-container,
.page-content,
.web-form-container,
.web-form {
	max-width: 1140px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

[data-doctype="Web Form"] .page-content-wrapper .container,
.web-form-container {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}

/* Form Header Styling */
.web-form-header {
	border-bottom: 1px solid #e5e7eb !important;
	padding-bottom: 1rem !important;
	margin-bottom: 2rem !important;
}

.web-form-header h1,
.web-form-title {
	font-size: 2rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	letter-spacing: -0.02em !important;
	line-height: 1.25 !important;
}

/* Form Section Headings */
.section-title,
.form-section .section-head {
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid #e2e8f0 !important;
	border-left: none !important;
	border-radius: 0 !important;
	padding: 0 0 0.5rem 0 !important;
	margin-top: 2.25rem !important;
	margin-bottom: 1.25rem !important;
	letter-spacing: -0.01em !important;
}

/* Labels & Standard Form Controls (Form Fields outside child tables) */
.form-group label,
.control-label {
	font-weight: 600 !important;
	color: #334155 !important;
	font-size: 0.875rem !important;
	margin-bottom: 0.4rem !important;
	display: inline-block !important;
}

.form-group > .form-control,
.form-group > .form-select,
.form-group > input[type="text"],
.form-group > input[type="email"],
.form-group > input[type="tel"],
.form-group > input[type="number"],
.form-group > input[type="password"],
.form-group > textarea,
.form-group > select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 8px !important;
	border: 1px solid #cbd5e1 !important;
	padding: 0.6rem 0.85rem !important;
	font-size: 0.9375rem !important;
	color: #0f172a !important;
	background-color: #ffffff !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
	transition: all 0.15s ease-in-out !important;
}

.form-group > .form-control:focus,
.form-group > .form-select:focus,
.form-group > input:focus,
.form-group > textarea:focus,
.form-group > select:focus {
	border-color: #0f172a !important;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1) !important;
	outline: none !important;
}

/* Form Action Buttons (Submit / Discard) */
.btn-primary.submit-btn,
button[type="submit"],
.btn-form-submit {
	background-color: #0f172a !important;
	background-image: none !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	padding: 0.75rem 2rem !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
	transition: all 0.15s ease !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.btn-primary.submit-btn:hover,
button[type="submit"]:hover,
.btn-form-submit:hover {
	background-color: #1e293b !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

.discard-btn {
	border-radius: 8px !important;
	border: 1px solid #cbd5e1 !important;
	background: #ffffff !important;
	color: #475569 !important;
	font-weight: 600 !important;
	padding: 0.75rem 1.5rem !important;
	transition: all 0.15s ease !important;
}

.discard-btn:hover {
	background: #f8fafc !important;
	color: #0f172a !important;
	border-color: #94a3b8 !important;
}

/* File Upload Controls */
.frappe-control[data-fieldtype="Attach"] {
	max-width: 100% !important;
}

.frappe-control[data-fieldtype="Attach"] .attached-file,
.frappe-control[data-fieldtype="Attach"] .attach-btn-area {
	word-break: break-all !important;
	overflow-wrap: anywhere !important;
	max-width: 100% !important;
}

.frappe-control[data-fieldtype="Attach"] .btn {
	white-space: normal !important;
	word-break: break-word !important;
	max-width: 100% !important;
	border-radius: 8px !important;
}

/* Responsive: Large Tablet & Small Laptop (max-width: 991px) */
@media (max-width: 991px) {
	[data-doctype="Web Form"] .page-content-wrapper .container,
	.web-form-container {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* Responsive: FULL WIDTH MOBILE SCREEN (max-width: 768px) */
@media (max-width: 768px) {
	html, body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	[data-doctype="Web Form"] .page-content-wrapper,
	[data-doctype="Web Form"] .page-content-wrapper .container,
	[data-doctype="Web Form"] main.container,
	[data-doctype="Web Form"] .container,
	[data-doctype="Web Form"] .page_content,
	.page-container,
	.page-content,
	.web-form-container,
	.web-form {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
	}

	.web-form-header,
	.form-section,
	.web-form-footer,
	.form-group,
	.web-form-wrapper {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.web-form-header {
		margin-bottom: 1.25rem !important;
		padding-bottom: 0.75rem !important;
	}

	.web-form-header h1,
	.web-form-title {
		font-size: 1.5rem !important;
	}

	.section-title,
	.form-section .section-head {
		font-size: 1rem !important;
		margin-top: 1.5rem !important;
		margin-bottom: 1rem !important;
	}

	.form-column,
	.form-section .section-body .form-column,
	.box-group .box-container,
	.col-sm-6,
	.col-md-6,
	.col-lg-6 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.section-body,
	.form-section .section-body {
		display: block !important;
		flex-direction: column !important;
	}

	.form-group {
		margin-bottom: 1rem !important;
	}

	.web-form-footer .web-form-actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.75rem !important;
		width: 100% !important;
	}

	.web-form-footer .web-form-actions .left-area,
	.web-form-footer .web-form-actions .right-area,
	.web-form-footer .web-form-actions .center-area {
		width: 100% !important;
		flex: 1 1 100% !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0.5rem !important;
	}

	.btn-primary.submit-btn,
	button[type="submit"],
	.btn-form-submit,
	.discard-btn {
		width: 100% !important;
		padding: 0.85rem 1rem !important;
		font-size: 1rem !important;
		text-align: center !important;
		justify-content: center !important;
	}
}

/* Responsive: Mobile Phones (max-width: 480px) */
@media (max-width: 480px) {
	.web-form-header,
	.form-section,
	.web-form-footer,
	.form-group,
	.web-form-wrapper {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	.web-form-header h1,
	.web-form-title {
		font-size: 1.25rem !important;
		letter-spacing: -0.01em !important;
	}

	.section-title,
	.form-section .section-head {
		font-size: 0.95rem !important;
		margin-top: 1.25rem !important;
	}

	.form-group label,
	.control-label {
		font-size: 0.85rem !important;
	}

	.form-group > .form-control,
	.form-group > .form-select,
	.form-group > input[type="text"],
	.form-group > input[type="email"],
	.form-group > input[type="tel"],
	.form-group > input[type="number"],
	.form-group > input[type="password"],
	.form-group > textarea,
	.form-group > select {
		font-size: 16px !important;
		padding: 0.65rem 0.75rem !important;
	}

	textarea.form-control {
		min-height: 90px !important;
	}

	.frappe-control[data-fieldtype="Attach"] .file-uploader,
	.frappe-control[data-fieldtype="Attach"] .btn {
		width: 100% !important;
		text-align: center !important;
	}
}

/* Touch Devices - Min 44px Touch Targets for Main Buttons and Outside Form Controls */
@media (pointer: coarse), (max-width: 768px) {
	.form-group > .form-control,
	.form-group > .form-select,
	.form-group > input[type="text"],
	.form-group > input[type="email"],
	.form-group > input[type="tel"],
	.form-group > input[type="number"],
	.form-group > input[type="password"],
	.form-group > select {
		min-height: 44px !important;
	}

	.btn-primary.submit-btn,
	button[type="submit"],
	.btn-form-submit,
	.discard-btn,
	.frappe-control[data-fieldtype="Attach"] .btn {
		min-height: 44px !important;
	}
}

/* Responsive: Child Table Fields (Academic Qualifications, Work Experience)
   Mobile only. Both interaction modes in Frappe's grid - inline "editable-row"
   cell editing and the fully expanded row form - reuse the very same
   .grid-static-col[data-fieldname] elements (see grid_row.js toggle_editable_row
   and toggle_view), so one set of rules below covers both without touching any
   overflow/display/position rules that could break the grid's own JS
   (add/edit/delete row, dropdowns, etc). Each row becomes a labeled, full-width
   stacked card instead of a cramped multi-column table. */
@media (max-width: 768px) {
	[data-doctype="Web Form"] .frappe-control[data-fieldtype="Table"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Hide the column header row - labels are now shown per-field below */
	[data-doctype="Web Form"] .grid-heading-row {
		display: none !important;
	}

	[data-doctype="Web Form"] .form-grid-container {
		border: none !important;
	}

	[data-doctype="Web Form"] .grid-row {
		display: block !important;
		background-color: #ffffff !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 10px !important;
		margin-bottom: 0.75rem !important;
		overflow: hidden !important;
	}

	[data-doctype="Web Form"] .grid-row .data-row.row {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Row checkbox + row number + edit icon: one compact top bar */
	[data-doctype="Web Form"] .grid-row .data-row.row > .row-check,
	[data-doctype="Web Form"] .grid-row .data-row.row > .row-index.grid-static-col,
	[data-doctype="Web Form"] .grid-row .data-row.row > .col:last-child {
		position: static !important;
		flex: 0 0 auto !important;
		max-width: none !important;
		height: auto !important;
		background-color: #f8fafc !important;
		border-bottom: 1px solid #e2e8f0 !important;
		padding: 0.5rem 0.6rem !important;
	}

	[data-doctype="Web Form"] .grid-row .data-row.row > .row-check {
		border-right: none !important;
	}

	[data-doctype="Web Form"] .grid-row .data-row.row > .row-index.grid-static-col {
		font-weight: 700 !important;
		color: #0f172a !important;
		border-right: none !important;
		flex-grow: 1 !important;
	}

	[data-doctype="Web Form"] .grid-row .data-row.row > .col:last-child {
		border-left: 1px solid #e2e8f0 !important;
	}

	/* Each real field becomes its own full-width, labeled block */
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname] {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		height: auto !important;
		position: static !important;
		padding: 0.6rem 0.75rem !important;
		border-bottom: 1px solid #f1f5f9 !important;
		background-color: #ffffff !important;
		text-align: left !important;
	}

	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname] .static-area,
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname] input.form-control {
		text-align: left !important;
	}

	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname]:last-of-type {
		border-bottom: none !important;
	}

	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname]::before {
		content: attr(data-fieldname);
		display: block !important;
		font-size: 0.7rem !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.02em !important;
		color: #64748b !important;
		margin-bottom: 0.3rem !important;
	}

	/* Friendly labels (Employee Data Education) - matched at the same
	   specificity as the fallback rule above so these win by source order */
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="qualification"]::before { content: "Qualification" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="level"]::before { content: "Level" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="institution"]::before { content: "School / College / University" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="year_of_passing"]::before { content: "Year of Passing" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="percentage_or_grade"]::before { content: "Percentage / Grade / Division" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="document"]::before { content: "Document" !important; }

	/* Friendly labels (Employee Data Work Experience) */
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="company_name"]::before { content: "Company / Organization" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="designation"]::before { content: "Designation" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="from_date"]::before { content: "From Date" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="to_date"]::before { content: "To Date" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="is_current_job"]::before { content: "Is Current Job" !important; }
	[data-doctype="Web Form"] .grid-row .data-row.row > .grid-static-col[data-fieldname="experience_letter"]::before { content: "Experience Letter" !important; }

	/* Make the field's own control/value fill the full card width */
	[data-doctype="Web Form"] .grid-static-col[data-fieldname] .static-area,
	[data-doctype="Web Form"] .grid-static-col[data-fieldname] input.form-control,
	[data-doctype="Web Form"] .grid-static-col[data-fieldname] select.form-control {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 16px !important;
		min-height: 40px !important;
	}

	[data-doctype="Web Form"] .grid-row-open .form-in-grid .form-column,
	[data-doctype="Web Form"] .grid-row-open .form-in-grid .col-sm-6,
	[data-doctype="Web Form"] .grid-row-open .form-in-grid .col-md-6,
	[data-doctype="Web Form"] .grid-row-open .form-in-grid .col-lg-6 {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	[data-doctype="Web Form"] .grid-row-open .form-in-grid .form-group {
		margin-bottom: 0.85rem !important;
	}

	[data-doctype="Web Form"] .grid-row-open .form-in-grid .control-label {
		font-size: 0.85rem !important;
		font-weight: 600 !important;
		color: #334155 !important;
	}

	[data-doctype="Web Form"] .grid-row-open .form-in-grid input.form-control,
	[data-doctype="Web Form"] .grid-row-open .form-in-grid select.form-control,
	[data-doctype="Web Form"] .grid-row-open .form-in-grid textarea.form-control {
		width: 100% !important;
		font-size: 16px !important;
		padding: 0.6rem 0.75rem !important;
		min-height: 44px !important;
	}
}