/* =========================================================
   REAL ESTATE CRM
   FRONTEND ONE-PAGE APPLICATION
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

.recrm-app {
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	background: #f5f7fb;
	color: #172033;
	font-family: inherit;
}

.recrm-app *,
.recrm-app *::before,
.recrm-app *::after {
	box-sizing: border-box;
}

.recrm-app a {
	text-decoration: none;
}

.recrm-app button,
.recrm-app input,
.recrm-app select,
.recrm-app textarea {
	font-family: inherit;
}


/* =========================================================
   LOGIN
========================================================= */

.recrm-login-app {
	min-height: 650px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 50px 20px;
	background: #f5f7fb;
}

.recrm-login-card {
	width: 100%;
	max-width: 440px;
	padding: 40px;
	background: #ffffff;
	border: 1px solid #e6eaf0;
	border-radius: 18px;
	box-shadow: 0 15px 45px rgba(20, 35, 60, 0.08);
}

.recrm-login-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 22px;
}

.recrm-logo-icon {
	width: 62px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: #2563eb;
	color: #ffffff;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 1px;
}

.recrm-login-heading {
	text-align: center;
	margin-bottom: 28px;
}

.recrm-login-heading h1 {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: #172033;
}

.recrm-login-heading p {
	margin: 0;
	font-size: 14px;
	color: #718096;
}

.recrm-alert {
	padding: 12px 14px;
	margin-bottom: 18px;
	border-radius: 8px;
	font-size: 14px;
}

.recrm-alert-error {
	background: #fff1f2;
	border: 1px solid #fecdd3;
	color: #be123c;
}

.recrm-form-field {
	margin-bottom: 18px;
}

.recrm-form-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.recrm-form-field input,
.recrm-form-field select,
.recrm-form-field textarea {
	width: 100%;
	height: 46px;
	padding: 0 13px;
	border: 1px solid #dce2ea;
	border-radius: 8px;
	background: #ffffff;
	color: #172033;
	font-size: 14px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.recrm-form-field textarea {
	height: auto;
	min-height: 100px;
	padding-top: 12px;
	padding-bottom: 12px;
	resize: vertical;
}

.recrm-form-field input:focus,
.recrm-form-field select:focus,
.recrm-form-field textarea:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.recrm-login-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 3px 0 20px;
}

.recrm-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #64748b;
	cursor: pointer;
}

.recrm-remember input {
	margin: 0;
}

.recrm-login-submit {
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 9px;
	background: #2563eb;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.recrm-login-submit:hover {
	background: #1d4ed8;
	transform: translateY(-1px);
}

.recrm-login-footer {
	margin-top: 25px;
	padding-top: 18px;
	border-top: 1px solid #edf0f4;
	text-align: center;
	font-size: 12px;
	color: #94a3b8;
}


/* =========================================================
   APPLICATION LAYOUT
========================================================= */

.recrm-app:not(.recrm-login-app) {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
}


/* =========================================================
   SIDEBAR
========================================================= */

.recrm-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 999;
	width: 255px;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-right: 1px solid #e7ebf0;
}

.recrm-sidebar-brand {
	height: 72px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	border-bottom: 1px solid #edf0f4;
}

.recrm-brand-icon {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #2563eb;
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.5px;
}

.recrm-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.recrm-brand-text strong {
	font-size: 15px;
	color: #172033;
}

.recrm-brand-text span {
	margin-top: 3px;
	font-size: 11px;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.recrm-sidebar-user {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 16px 14px;
	padding: 12px;
	border-radius: 10px;
	background: #f7f9fc;
}

.recrm-user-avatar,
.recrm-topbar-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #2563eb;
	color: #ffffff;
	font-weight: 700;
}

.recrm-user-avatar {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	font-size: 12px;
}

.recrm-user-details {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.recrm-user-details strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: #172033;
}

.recrm-user-details span {
	margin-top: 3px;
	font-size: 11px;
	color: #94a3b8;
}

.recrm-sidebar-menu {
	flex: 1;
	overflow-y: auto;
	padding: 4px 12px 15px;
}

.recrm-menu-title {
	padding: 14px 10px 8px;
	font-size: 10px;
	font-weight: 700;
	color: #a0a9b8;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.recrm-menu-title-bottom {
	margin-top: 8px;
}

.recrm-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 43px;
	margin-bottom: 3px;
	padding: 9px 11px;
	border-radius: 8px;
	color: #64748b;
	font-size: 13px;
	font-weight: 500;
	transition: background 0.2s ease, color 0.2s ease;
}

.recrm-menu-item:hover {
	background: #f2f6ff;
	color: #2563eb;
}

.recrm-menu-item.active {
	background: #eff6ff;
	color: #2563eb;
	font-weight: 600;
}

.recrm-menu-item.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 4px 4px 0;
	background: #2563eb;
}

.recrm-menu-icon {
	width: 22px;
	flex: 0 0 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.recrm-menu-label {
	white-space: nowrap;
}

.recrm-logout-link:hover {
	background: #fff1f2;
	color: #dc2626;
}

.recrm-sidebar-footer {
	padding: 15px 18px;
	border-top: 1px solid #edf0f4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 10px;
	color: #a0a9b8;
}

.recrm-sidebar-footer small {
	font-size: 10px;
}


/* =========================================================
   MAIN
========================================================= */

.recrm-main {
	width: calc(100% - 255px);
	min-height: 100vh;
	margin-left: 255px;
	background: #f5f7fb;
}

.recrm-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid #e7ebf0;
	backdrop-filter: blur(8px);
}

.recrm-topbar-left,
.recrm-topbar-right {
	display: flex;
	align-items: center;
}

.recrm-topbar-left {
	gap: 15px;
}

.recrm-topbar-right {
	gap: 18px;
}

.recrm-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.recrm-breadcrumb span:first-child {
	color: #94a3b8;
}

.recrm-breadcrumb strong {
	color: #cbd5e1;
	font-weight: 400;
}

.recrm-breadcrumb span:last-child {
	color: #334155;
	font-weight: 600;
}

.recrm-topbar-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: #64748b;
	font-size: 16px;
	transition: background 0.2s ease, color 0.2s ease;
}

.recrm-topbar-icon:hover {
	background: #f1f5f9;
	color: #2563eb;
}

.recrm-topbar-user {
	display: flex;
	align-items: center;
	gap: 9px;
}

.recrm-topbar-avatar {
	width: 34px;
	height: 34px;
	font-size: 11px;
}

.recrm-topbar-user-name {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.recrm-mobile-menu {
	display: none;
	width: 38px;
	height: 38px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	color: #334155;
	font-size: 18px;
	cursor: pointer;
}


/* =========================================================
   CONTENT
========================================================= */

.recrm-content {
	padding: 28px;
}

.recrm-page {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}

.recrm-page-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 25px;
}

.recrm-page-heading h1 {
	margin: 0 0 6px;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 700;
	color: #172033;
}

.recrm-page-heading p {
	margin: 0;
	color: #718096;
	font-size: 13px;
}

.recrm-dashboard-date {
	padding: 9px 13px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	color: #64748b;
	font-size: 12px;
	font-weight: 600;
}


/* =========================================================
   STAT CARDS
========================================================= */

.recrm-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 17px;
	margin-bottom: 20px;
}

.recrm-stat-card {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 125px;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #e7ebf0;
	border-radius: 13px;
	box-shadow: 0 4px 14px rgba(20, 35, 60, 0.025);
}

.recrm-stat-icon {
	width: 45px;
	height: 45px;
	flex: 0 0 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #eff6ff;
	color: #2563eb;
	font-size: 18px;
	font-weight: 700;
}

.recrm-stat-card > div:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.recrm-stat-card span {
	font-size: 12px;
	color: #718096;
}

.recrm-stat-card strong {
	margin: 4px 0;
	font-size: 24px;
	line-height: 1;
	color: #172033;
}

.recrm-stat-card small {
	font-size: 10px;
	color: #a0a9b8;
}


/* =========================================================
   DASHBOARD GRID
========================================================= */

.recrm-dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

.recrm-panel {
	margin-bottom: 20px;
	padding: 21px;
	background: #ffffff;
	border: 1px solid #e7ebf0;
	border-radius: 13px;
	box-shadow: 0 4px 14px rgba(20, 35, 60, 0.025);
}

.recrm-dashboard-grid .recrm-panel {
	margin-bottom: 0;
}

.recrm-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 20px;
}

.recrm-panel-header h3 {
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 700;
	color: #172033;
}

.recrm-panel-header p {
	margin: 0;
	font-size: 11px;
	color: #94a3b8;
}


/* =========================================================
   PIPELINE
========================================================= */

.recrm-pipeline {
	display: grid;
	grid-template-columns: repeat(6, minmax(90px, 1fr));
	gap: 8px;
}

.recrm-pipeline-stage {
	min-height: 88px;
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid #e7ebf0;
	border-radius: 9px;
	background: #f8fafc;
	text-align: center;
}

.recrm-pipeline-stage span {
	font-size: 10px;
	color: #64748b;
}

.recrm-pipeline-stage strong {
	font-size: 22px;
	color: #172033;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.recrm-quick-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.recrm-quick-action {
	min-height: 75px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px;
	border: 1px solid #e7ebf0;
	border-radius: 9px;
	background: #fafbfc;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.recrm-quick-action:hover {
	background: #eff6ff;
	border-color: #bfdbfe;
}

.recrm-quick-action span {
	font-size: 18px;
	color: #2563eb;
	font-weight: 600;
}

.recrm-quick-action strong {
	margin-top: 4px;
	font-size: 12px;
	color: #334155;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.recrm-empty-state {
	min-height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 25px;
	text-align: center;
}

.recrm-empty-icon {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #94a3b8;
	font-size: 21px;
}

.recrm-empty-state h3,
.recrm-empty-state h4 {
	margin: 0 0 6px;
	font-size: 15px;
	color: #334155;
}

.recrm-empty-state p {
	max-width: 450px;
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: #94a3b8;
}


/* =========================================================
   MODULE PLACEHOLDER
========================================================= */

.recrm-module-placeholder {
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* =========================================================
   SIDEBAR OVERLAY
========================================================= */

.recrm-sidebar-overlay {
	display: none;
}


/* =========================================================
   TABLE FOUNDATION
========================================================= */

.recrm-table-wrapper {
	width: 100%;
	overflow-x: auto;
}

.recrm-table {
	width: 100%;
	border-collapse: collapse;
}

.recrm-table th,
.recrm-table td {
	padding: 13px 14px;
	border-bottom: 1px solid #edf0f4;
	text-align: left;
	font-size: 12px;
}

.recrm-table th {
	background: #f8fafc;
	color: #64748b;
	font-weight: 700;
}

.recrm-table td {
	color: #334155;
}


/* =========================================================
   FORM FOUNDATION
========================================================= */

.recrm-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.recrm-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.recrm-primary-button,
.recrm-secondary-button,
.recrm-danger-button {
	min-height: 42px;
	padding: 0 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
}

.recrm-primary-button {
	background: #2563eb;
	color: #ffffff;
}

.recrm-primary-button:hover {
	background: #1d4ed8;
}

.recrm-secondary-button {
	background: #ffffff;
	border: 1px solid #dce2ea;
	color: #475569;
}

.recrm-secondary-button:hover {
	background: #f8fafc;
}

.recrm-danger-button {
	background: #dc2626;
	color: #ffffff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px) {

	.recrm-stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.recrm-dashboard-grid {
		grid-template-columns: 1fr;
	}

	.recrm-pipeline {
		grid-template-columns: repeat(3, 1fr);
	}

}


@media (max-width: 800px) {

	.recrm-sidebar {
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		box-shadow: 10px 0 30px rgba(15, 23, 42, 0.12);
	}

	.recrm-sidebar.recrm-sidebar-open {
		transform: translateX(0);
	}

	.recrm-sidebar-overlay.recrm-overlay-visible {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 998;
		background: rgba(15, 23, 42, 0.45);
	}

	.recrm-main {
		width: 100%;
		margin-left: 0;
	}

	.recrm-mobile-menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.recrm-topbar {
		padding: 0 17px;
	}

	.recrm-content {
		padding: 20px 15px;
	}

	.recrm-topbar-user-name {
		display: none;
	}

}


@media (max-width: 600px) {

	.recrm-login-app {
		padding: 25px 15px;
	}

	.recrm-login-card {
		padding: 28px 20px;
	}

	.recrm-login-heading h1 {
		font-size: 24px;
	}

	.recrm-stat-grid {
		grid-template-columns: 1fr;
	}

	.recrm-pipeline {
		grid-template-columns: repeat(2, 1fr);
	}

	.recrm-page-heading {
		flex-direction: column;
	}

	.recrm-dashboard-date {
		align-self: flex-start;
	}

	.recrm-quick-actions {
		grid-template-columns: 1fr 1fr;
	}

	.recrm-form-grid {
		grid-template-columns: 1fr;
	}

}


@media (max-width: 420px) {

	.recrm-quick-actions {
		grid-template-columns: 1fr;
	}

	.recrm-pipeline {
		grid-template-columns: 1fr 1fr;
	}

	.recrm-stat-card {
		min-height: 105px;
		padding: 15px;
	}

	.recrm-stat-card strong {
		font-size: 21px;
	}

}