/* ═══════════════════════════════════════════════════════════════
   DigiPlan Core Styles — Premium Design System
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
	/* ─── Brand Colors ─── */
	--dp-primary: #4F46E5;
	--dp-primary-light: #818CF8;
	--dp-primary-dark: #3730A3;
	--dp-primary-50: #EEF2FF;
	--dp-primary-100: #E0E7FF;
	--dp-success: #059669;
	--dp-success-light: #D1FAE5;
	--dp-warning: #D97706;
	--dp-warning-light: #FEF3C7;
	--dp-danger: #DC2626;
	--dp-danger-light: #FEE2E2;
	--dp-info: #0284C7;
	--dp-info-light: #E0F2FE;

	/* ─── Neutrals ─── */
	--dp-gray-50: #F9FAFB;
	--dp-gray-100: #F3F4F6;
	--dp-gray-200: #E5E7EB;
	--dp-gray-300: #D1D5DB;
	--dp-gray-400: #9CA3AF;
	--dp-gray-500: #6B7280;
	--dp-gray-600: #4B5563;
	--dp-gray-700: #374151;
	--dp-gray-800: #1F2937;
	--dp-gray-900: #111827;

	/* ─── Shadows ─── */
	--dp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
	--dp-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
	--dp-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
	--dp-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

	/* ─── Zone Colors ─── */
	--dp-zone-parking: #6366F1;
	--dp-zone-commercial: #F59E0B;
	--dp-zone-office: #3B82F6;
	--dp-zone-residential: #10B981;
	--dp-zone-hotel: #8B5CF6;
	--dp-zone-institutional: #EC4899;

	/* ─── Radius ─── */
	--dp-radius-sm: 6px;
	--dp-radius-md: 10px;
	--dp-radius-lg: 14px;
	--dp-radius-xl: 20px;
}


/* ═══════════════════════════════════════════════════════════════
   SITE STRUCTURE — Premium Tree View
   ═══════════════════════════════════════════════════════════════ */

/* ─── Toolbar ─── */
.dp-ss-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	margin-bottom: 12px;
	background: linear-gradient(135deg, var(--dp-gray-50) 0%, #fff 100%);
	border: 1px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-md);
	box-shadow: var(--dp-shadow-sm);
}

.dp-ss-toolbar .dp-ss-summary {
	display: flex;
	gap: 14px;
	align-items: center;
}

.dp-ss-toolbar .dp-ss-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--dp-gray-900);
	font-family: 'Inter', sans-serif;
}

.dp-ss-toolbar .dp-ss-counts {
	font-size: 12px;
	color: var(--dp-gray-500);
	background: var(--dp-gray-100);
	padding: 3px 10px;
	border-radius: 20px;
}

.dp-ss-toolbar .dp-toolbar-actions {
	display: flex;
	gap: 6px;
}

/* ─── Tree Container ─── */
.dp-ss-tree {
	border: 1px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-md);
	background: #fff;
	overflow: hidden;
	box-shadow: var(--dp-shadow-sm);
}

/* ─── Tree Node Row ─── */
.dp-row {
	display: flex;
	align-items: center;
	padding: 7px 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	font-size: 13px;
	border-bottom: 1px solid var(--dp-gray-100);
	position: relative;
}

.dp-row:hover {
	background: var(--dp-primary-50) !important;
}

.dp-row:hover .dp-actions {
	opacity: 1 !important;
}

/* ─── Depth Indicator ─── */
.dp-depth-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
}

/* ─── Toggle Arrow ─── */
.dp-toggle {
	cursor: pointer;
	font-size: 9px;
	color: var(--dp-gray-400);
	margin-right: 6px;
	user-select: none;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.15s;
}

.dp-toggle:hover {
	background: var(--dp-gray-200);
	color: var(--dp-gray-700);
}

/* ─── Location Icon ─── */
.dp-loc-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	margin-right: 8px;
	flex-shrink: 0;
}

/* ─── Status Dot ─── */
.dp-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 8px;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* ─── Location Name ─── */
.dp-loc-name {
	flex: 1;
	font-weight: 500;
	color: var(--dp-gray-800);
	cursor: pointer;
}

.dp-loc-name:hover {
	color: var(--dp-primary);
	text-decoration: underline;
}

/* ─── Type Badge ─── */
.dp-type-badge {
	font-size: 10px;
	font-weight: 500;
	color: var(--dp-gray-500);
	background: var(--dp-gray-100);
	padding: 2px 8px;
	border-radius: 12px;
	margin-left: 8px;
}

/* ─── Item Count Badge ─── */
.dp-item-badge {
	font-size: 10px;
	font-weight: 600;
	background: var(--dp-info-light);
	color: var(--dp-info);
	padding: 1px 7px;
	border-radius: 10px;
	margin-left: 6px;
}

/* ─── Action Buttons ─── */
.dp-actions {
	margin-left: 8px;
	opacity: 0;
	transition: opacity 0.15s;
	display: flex;
	gap: 3px;
}

.dp-actions .btn {
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 6px;
	transition: all 0.15s;
	box-shadow: var(--dp-shadow-sm);
}

/* ─── Empty State ─── */
.dp-empty-state {
	text-align: center;
	padding: 60px 20px;
	border: 1px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-lg);
	background: linear-gradient(180deg, #fff 0%, var(--dp-gray-50) 100%);
}

.dp-empty-state .dp-empty-icon {
	font-size: 56px;
	margin-bottom: 20px;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.dp-empty-state h4 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--dp-gray-800);
	margin-bottom: 8px;
}

.dp-empty-state p {
	color: var(--dp-gray-500);
	font-size: 13px;
	max-width: 360px;
	margin: 0 auto 28px;
	line-height: 1.6;
}

.dp-empty-state .dp-cta-group {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.dp-wizard-cta {
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 10px 24px !important;
	border-radius: var(--dp-radius-md) !important;
	background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-primary-dark) 100%) !important;
	border: none !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(79,70,229,0.3) !important;
	transition: all 0.2s !important;
}

.dp-wizard-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(79,70,229,0.4) !important;
}


/* ═══════════════════════════════════════════════════════════════
   STRUCTURE WIZARD — Premium Dialog
   ═══════════════════════════════════════════════════════════════ */

/* ─── Dialog Override ─── */
.dp-wizard {
	padding: 12px 20px;
	font-family: 'Inter', -apple-system, sans-serif;
}

/* ─── Step Indicator ─── */
.dp-step-indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-bottom: 24px;
}

.dp-step-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.dp-step-pill.active {
	background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-primary-dark) 100%);
	color: #fff;
	box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}

.dp-step-pill.inactive {
	background: var(--dp-gray-100);
	color: var(--dp-gray-500);
}

.dp-step-pill .dp-step-num {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}

.dp-step-pill.active .dp-step-num {
	background: rgba(255,255,255,0.2);
}

.dp-step-pill.inactive .dp-step-num {
	background: var(--dp-gray-200);
}

.dp-step-connector {
	width: 24px;
	height: 2px;
	background: var(--dp-gray-200);
	border-radius: 1px;
}

/* ─── Project Type Cards ─── */
.dp-type-card {
	border: 2px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-lg);
	padding: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: #fff;
	text-align: center;
	min-width: 140px;
	position: relative;
	overflow: hidden;
}

.dp-type-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: transparent;
	transition: background 0.2s;
}

.dp-type-card:hover {
	border-color: var(--dp-primary-light);
	transform: translateY(-2px);
	box-shadow: var(--dp-shadow-lg);
}

.dp-type-card:hover::before {
	background: linear-gradient(90deg, var(--dp-primary-light), var(--dp-primary));
}

.dp-type-card.dp-selected {
	border-color: var(--dp-primary);
	background: var(--dp-primary-50);
	box-shadow: 0 0 0 3px rgba(79,70,229,0.1), var(--dp-shadow-md);
}

.dp-type-card.dp-selected::before {
	background: linear-gradient(90deg, var(--dp-primary), var(--dp-primary-dark));
}

.dp-type-card .dp-type-icon {
	font-size: 36px;
	margin-bottom: 10px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.dp-type-card .dp-type-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--dp-gray-800);
	margin-bottom: 4px;
}

.dp-type-card .dp-type-desc {
	font-size: 11px;
	color: var(--dp-gray-500);
	line-height: 1.4;
}

/* ─── Zone Cards ─── */
.dp-zone-card {
	border: 1px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-md);
	padding: 16px 18px;
	margin-bottom: 12px;
	background: #fff;
	position: relative;
	border-left: 4px solid var(--dp-gray-300);
	transition: all 0.2s;
	box-shadow: var(--dp-shadow-sm);
}

.dp-zone-card:hover {
	box-shadow: var(--dp-shadow-md);
}

.dp-zone-card[data-zone-type="parking"] { border-left-color: var(--dp-zone-parking); }
.dp-zone-card[data-zone-type="commercial"] { border-left-color: var(--dp-zone-commercial); }
.dp-zone-card[data-zone-type="office"] { border-left-color: var(--dp-zone-office); }
.dp-zone-card[data-zone-type="residential"] { border-left-color: var(--dp-zone-residential); }
.dp-zone-card[data-zone-type="hotel"] { border-left-color: var(--dp-zone-hotel); }
.dp-zone-card[data-zone-type="institutional"] { border-left-color: var(--dp-zone-institutional); }

.dp-zone-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.dp-zone-number {
	font-weight: 700;
	font-size: 13px;
	color: var(--dp-primary);
}

.dp-zone-fields {
	display: grid;
	grid-template-columns: 1fr 90px 90px;
	gap: 10px;
	margin-bottom: 10px;
}

.dp-zone-fields-bottom {
	display: grid;
	grid-template-columns: 1fr 120px;
	gap: 10px;
}

.dp-field-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--dp-gray-400);
	margin-bottom: 4px;
}

/* ─── Template Card in Wizard ─── */
.dp-template-card {
	border: 2px solid var(--dp-gray-200);
	border-radius: var(--dp-radius-md);
	padding: 14px 16px;
	cursor: pointer;
	background: #fff;
	transition: all 0.2s;
}

.dp-template-card:hover {
	border-color: var(--dp-primary-light);
	box-shadow: var(--dp-shadow-md);
}

.dp-template-card.dp-selected {
	border-color: var(--dp-primary);
	background: var(--dp-primary-50);
	box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

/* ─── Summary Preview ─── */
.dp-summary-box {
	max-width: 420px;
	margin: 0 auto;
}

.dp-summary-detail {
	padding: 16px 18px;
	background: var(--dp-gray-50);
	border-radius: var(--dp-radius-md);
	border: 1px solid var(--dp-gray-200);
	margin-bottom: 14px;
}

.dp-summary-counts {
	padding: 24px;
	background: linear-gradient(135deg, var(--dp-primary-50) 0%, var(--dp-primary-100) 100%);
	border-radius: var(--dp-radius-md);
	border: 1px solid var(--dp-primary-100);
	text-align: center;
}

.dp-summary-counts .dp-big-number {
	font-size: 32px;
	font-weight: 800;
	color: var(--dp-primary);
	font-family: 'Inter', sans-serif;
}

.dp-summary-counts .dp-big-label {
	font-size: 14px;
	color: var(--dp-gray-600);
	font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

@keyframes dp-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes dp-scale-in {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

.dp-animate-in {
	animation: dp-fade-in 0.3s ease-out;
}

.dp-animate-scale {
	animation: dp-scale-in 0.2s ease-out;
}

/* ─── Children collapse animation ─── */
.dp-children {
	transition: max-height 0.2s ease;
	overflow: hidden;
}

/* ─── Progress bar ─── */
.dp-wizard-progress .progress {
	height: 6px;
	border-radius: 3px;
	background: var(--dp-gray-200);
}

.dp-wizard-progress .progress-bar {
	background: linear-gradient(90deg, var(--dp-primary), var(--dp-primary-light));
	transition: width 0.3s ease;
	border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════
   WHITE LABELING — Remove Frappe branding
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hide social login buttons on login page ─── */
.page-card .social-logins,
.page-card .social-logins + .or-separator,
.page-card [data-provider="frappe"],
.login-content .social-logins,
.login-content .or-separator,
.btn-login-with-email-link {
	display: none !important;
}

/* ─── Hide "Powered by Frappe" footer ─── */
.page-container footer,
.web-footer,
footer .pull-right,
footer .text-muted,
[title="Frappe Technologies"],
.powered-by-frappe {
	display: none !important;
}

/* ─── Hide Frappe "Help" menu items referencing Frappe ─── */
.dropdown-menu a[href*="frappe.io"],
.dropdown-menu a[href*="discuss.frappe.io"],
.dropdown-menu a[href*="frappeframework.com"] {
	display: none !important;
}