/* ═══════════════════════════════════════════════════════════════
   HR Egypt Localization — Web Form Theme Override
   Applies to all Frappe web pages (web forms, list pages, etc.)
   to match the custom HR Portal's look and feel.
   ═══════════════════════════════════════════════════════════════ */

:root {
	--wf-primary:       #4F46E5;
	--wf-primary-light: #EEF2FF;
	--wf-primary-dark:  #3730A3;
	--wf-success:       #10B981;
	--wf-bg:            #F3F4F6;
	--wf-surface:       #FFFFFF;
	--wf-border:        #E5E7EB;
	--wf-text:          #111827;
	--wf-muted:         #6B7280;
	--wf-danger:        #EF4444;
	--wf-radius:        0.75rem;
	--wf-radius-sm:     0.5rem;
	--wf-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
	--wf-shadow-md:     0 4px 12px rgba(0,0,0,.10);
	--wf-font:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--wf-font-ar:       'Cairo', 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

/* Only target web (non-desk) pages */
body.web-form-page,
body:not(.desk-page) {
	background: var(--wf-bg) !important;
}

html[lang="ar"] body { font-family: var(--wf-font-ar) !important; }
html:not([lang="ar"]) body { font-family: var(--wf-font) !important; }

/* ── Navbar: replace Bootstrap default with slim portal-style bar ── */
.navbar {
	background: var(--wf-surface) !important;
	border-bottom: 1px solid var(--wf-border) !important;
	box-shadow: none !important;
	padding: 0 1rem !important;
	min-height: 56px !important;
}
.navbar-brand,
.navbar .navbar-brand {
	font-weight: 700 !important;
	color: var(--wf-primary) !important;
	font-size: 1rem !important;
}
.navbar .nav-link,
.navbar .navbar-nav .nav-link {
	color: var(--wf-muted) !important;
	font-size: 0.875rem !important;
}
/* hide the "Home" breadcrumb text in nav — replaced by back button */
.navbar .container > a[href="/"] {
	font-size: 0 !important;
}
.navbar .container > a[href="/"]::before {
	content: "← بوابة الموارد البشرية / HR Portal";
	font-size: 0.875rem;
	color: var(--wf-primary);
}

/* ── Page wrapper ─────────────────────────────────────────────── */
.container,
.container-fluid {
	max-width: 560px !important;
	padding-inline: 1rem !important;
}

/* ── Footer: hide powered-by ──────────────────────────────────── */
footer.web-footer,
.web-footer { display: none !important; }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
	background: transparent !important;
	padding: 0.75rem 0 0 !important;
	margin-bottom: 0.5rem !important;
	font-size: 0.8rem !important;
}
.breadcrumb-item a { color: var(--wf-primary) !important; }
.breadcrumb-item.active { color: var(--wf-muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--wf-muted) !important; }

/* ── Form card ────────────────────────────────────────────────── */
.web-form-container,
.frappe-card,
.web-form-wrapper {
	background: var(--wf-surface) !important;
	border: none !important;
	border-radius: var(--wf-radius) !important;
	box-shadow: var(--wf-shadow) !important;
	padding: 1.5rem !important;
	margin-top: 0.5rem !important;
}

/* Page title inside the form card */
.web-form-container h1,
.web-form-wrapper h1,
.page-title {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: var(--wf-text) !important;
	margin-bottom: 1.25rem !important;
	padding-bottom: 0.75rem !important;
	border-bottom: 1px solid var(--wf-border) !important;
}

/* ── Form fields ──────────────────────────────────────────────── */
.form-group,
.frappe-control {
	margin-bottom: 1.1rem !important;
}
.form-group label,
.control-label,
.frappe-control label {
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	color: var(--wf-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	margin-bottom: 0.35rem !important;
	display: block !important;
}
.form-control,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
	border: 1px solid var(--wf-border) !important;
	border-radius: var(--wf-radius-sm) !important;
	padding: 0.6rem 0.85rem !important;
	font-size: 0.9rem !important;
	color: var(--wf-text) !important;
	background: #fff !important;
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	width: 100% !important;
	outline: none !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--wf-primary) !important;
	box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}

/* Select arrow styling */
select.form-control,
select {
	appearance: auto !important;
}

/* Textarea */
textarea.form-control,
textarea {
	min-height: 90px !important;
	resize: vertical !important;
}

/* ── Info/alert banner (e.g. Monthly Limit bar) ───────────────── */
.web-form-container .alert,
.alert-info,
.alert-warning {
	border-radius: var(--wf-radius-sm) !important;
	border: none !important;
	font-size: 0.82rem !important;
	padding: 0.6rem 0.9rem !important;
	margin-bottom: 1.25rem !important;
}
.alert-info {
	background: var(--wf-primary-light) !important;
	color: var(--wf-primary-dark) !important;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn,
button[type="submit"] {
	border-radius: var(--wf-radius-sm) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	padding: 0.6rem 1.4rem !important;
	transition: all 0.15s !important;
	border: none !important;
	cursor: pointer !important;
}
.btn-primary,
button[type="submit"],
.btn-dark {
	background: var(--wf-primary) !important;
	color: #fff !important;
}
.btn-primary:hover,
button[type="submit"]:hover {
	background: var(--wf-primary-dark) !important;
}
.btn-secondary,
.btn-default,
.btn-discard {
	background: var(--wf-bg) !important;
	color: var(--wf-text) !important;
	border: 1px solid var(--wf-border) !important;
}
.btn-secondary:hover { background: var(--wf-border) !important; }
.btn-danger { background: var(--wf-danger) !important; color: #fff !important; }

/* Submit / Discard row */
.web-form-footer,
.web-form-actions {
	display: flex !important;
	gap: 0.75rem !important;
	justify-content: flex-end !important;
	margin-top: 1.5rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid var(--wf-border) !important;
}

/* ── Required asterisk ────────────────────────────────────────── */
.reqd,
.required {
	color: var(--wf-danger) !important;
}

/* ── Success / Error messages ─────────────────────────────────── */
.alert-success {
	background: #D1FAE5 !important;
	color: #065F46 !important;
	border: none !important;
	border-radius: var(--wf-radius-sm) !important;
}
.alert-danger,
.alert-error {
	background: #FEE2E2 !important;
	color: #991B1B !important;
	border: none !important;
	border-radius: var(--wf-radius-sm) !important;
}

/* ── Datepicker calendar ──────────────────────────────────────── */
.datepicker {
	border-radius: var(--wf-radius) !important;
	box-shadow: var(--wf-shadow-md) !important;
	border: 1px solid var(--wf-border) !important;
	font-size: 0.85rem !important;
}
.datepicker td.active,
.datepicker td.active:hover {
	background: var(--wf-primary) !important;
	border-radius: 50% !important;
}

/* ── List page table ──────────────────────────────────────────── */
.web-list-container table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: var(--wf-surface) !important;
	border-radius: var(--wf-radius) !important;
	overflow: hidden !important;
	box-shadow: var(--wf-shadow) !important;
}
.web-list-container th {
	background: var(--wf-bg) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--wf-muted) !important;
	border-bottom: 1px solid var(--wf-border) !important;
	padding: 0.75rem 1rem !important;
}
.web-list-container td {
	font-size: 0.875rem !important;
	padding: 0.75rem 1rem !important;
	border-bottom: 1px solid var(--wf-border) !important;
	color: var(--wf-text) !important;
}
.web-list-container tr:last-child td { border-bottom: none !important; }
.web-list-container tr:hover td { background: var(--wf-primary-light) !important; }

/* ── New button on list pages ─────────────────────────────────── */
.web-list-container .btn-new,
.new-doc-btn {
	background: var(--wf-primary) !important;
	color: #fff !important;
}

/* ── Mobile-friendly bottom padding ──────────────────────────── */
@media (max-width: 576px) {
	.container { padding-inline: 0.75rem !important; }
	.web-form-container,
	.frappe-card,
	.web-form-wrapper { padding: 1.25rem !important; }
}