/* CRM Pages - Full Width Alignment */
/* Remove Bootstrap container horizontal padding for CRM pages */
.container-full-width {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.category-card {
	transition: all 0.3s ease;
	border: none;
	border-radius: 1rem;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}

	.category-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	}

	.category-card .card-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.category-card:hover .card-overlay {
		opacity: 1;
	}

.category-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: 1rem;
	transition: transform 0.3s ease;
}

.category-card:hover .category-icon {
	transform: scale(1.1);
}

.category-performance .category-icon {
	background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.category-content .category-icon {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-collaboration .category-icon {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.category-accounting .category-icon {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-badge {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
}

.mini-chart {
	height: 60px;
	margin-top: 0.5rem;
}

.quick-link {
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	transition: all 0.2s ease;
	text-decoration: none;
	display: block;
}

	.quick-link:hover {
		background: rgba(105, 108, 255, 0.1);
		transform: translateX(5px);
	}

.category-card-body {
	/*min-height: 280px;*/
}

.pulse-dot {
	width: 8px;
	height: 8px;
	background: #28c76f;
	border-radius: 50%;
	animation: pulse 2s infinite;
}

@@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(40, 199, 111, 0.7);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(40, 199, 111, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(40, 199, 111, 0);
	}
}

.greeting-time {
	font-size: 0.875rem;
	opacity: 0.8;
}

.configure-btn {
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

	.configure-btn:hover {
		opacity: 1;
	}

/* Compact checkbox styling */
.compact-check {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

	.compact-check:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}
/* Highlight updated totals */
.totals-updated {
	animation: highlightTotal 1s ease-out;
}

@@keyframes highlightTotal {
	0% {
		background-color: rgba(40, 199, 111, 0.3);
	}

	100% {
		background-color: transparent;
	}
}

.portal-hero {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 1rem;
	position: relative;
	overflow: hidden;
}

	.portal-hero::before {
		/*content: '';*/
		position: absolute;
		top: -50%;
		right: -20%;
		width: 60%;
		height: 200%;
		background: rgba(255, 255, 255, 0.05);
		transform: rotate(30deg);
	}
.bg-gradient-primary {
	background: linear-gradient(135deg, #696cff 0%, #5f61e6 50%, #4c4fdb 100%) !important;
}
.bg-gradient-agencies {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.bg-gradient-red {
	background: linear-gradient(135deg, #e0124c 0%, #f5576c 100%) !important;
}
.bg-gradient-grey {
	background: linear-gradient(135deg, #aaaaaa 0%, #2b2e33 100%) !important;
}
.bg-gradient-info {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.bg-gradient-danger {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}
.bg-gradient-warning {
	background: linear-gradient(135deg, #f5af19 0%, #f12711 100%) !important;
}
.bg-gradient-success {
	background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}

.bg-gradient-blue {
	background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
}
.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.avatar-md {
	width: 48px;
	height: 48px;
}

.avatar-lg {
	width: 56px;
	height: 56px;
}
.avatar-xl {
	width:5.0rem;
	height: 5.0rem;
}

.step-badge {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #696cff;
	font-size: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-badge-primary {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #696cff;
	font-size: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-badge-info {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #4facfe;
	font-size: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-badge-danger {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #f5576c;
	font-size: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-badge-warning {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #f5af19;
	font-size: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-badge-success {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #11998e;
	font-size: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-badge-blue {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	color: #6a11cb;
	font-size: 1.25rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.step-badge-sm {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 1rem;
}

	.step-badge-sm.active {
		background-color: rgba(255, 255, 255, 0.9);
		color: #00cfe8;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

.hover-shadow {
	transition: all 0.3s ease;
}

	.hover-shadow:hover {
		transform: translateY(-2px);
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	}

.cursor-pointer {
	cursor: pointer;
}

#expenseHelpToggleBtn .help-btn-text {
	transition: all 0.2s ease;
}

#editPaymentHelpToggleBtn .help-btn-text {
	transition: all 0.2s ease;
}

.expense-row {
	transition: all 0.3s ease;
}

	.expense-row:hover {
		background-color: rgba(105, 108, 255, 0.05);
	}

	.expense-row.deleting {
		opacity: 0;
		transform: translateX(-20px);
	}

.header-info-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

	.header-info-card .form-label {
		color: rgba(255,255,255,0.8);
	}

	.header-info-card .form-control-plaintext {
		color: white;
	}

.expense-table th {
	background-color: #f8f9fa;
}


/* Small helper to ensure spinner + label alignment */
.btn .spinner-border {
	vertical-align: text-bottom;
}

.balance-positive {
	color: #28a745 !important;
}

.balance-negative {
	color: #dc3545 !important;
}

.balance-zero {
	color: #696cff !important;
}

.quick-add-input:focus {
	border-color: #696cff;
	box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
}

.expense-list {
	max-height: 400px;
	overflow-y: auto;
}

.add-expense-section {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	border-radius: 8px;
	padding: 1rem;
}

/* Fix dropdown menu z-index in tables */
.table .dropdown-menu,
.table-responsive .dropdown-menu,
#elementsTable .dropdown-menu,
#commissionelementsTable .dropdown-menu,
#commissionsettingsTable .dropdown-menu {
	z-index: 1050 !important;
	position: absolute !important;
}

/* Ensure dropstart menus appear correctly */
.btn-group.dropstart .dropdown-menu {
	z-index: 1050 !important;
}

/* Fix table-responsive overflow clipping dropdowns */
.table-responsive {
	overflow: visible !important;
}

/* Alternative: only show overflow on the specific card */
.card-body .table-responsive {
	overflow-x: auto;
	overflow-y: visible;
}

/* Ensure dropdown toggle buttons have proper stacking */
.btn-group .dropdown-toggle {
	position: relative;
	z-index: 1;
}

/* When dropdown is open, ensure it's above everything */
.btn-group.show .dropdown-menu,
.dropstart.show .dropdown-menu {
	z-index: 1060 !important;
}

.cost-row {
	transition: all 0.3s ease;
}

	.cost-row:hover {
		background-color: rgba(105, 108, 255, 0.05);
	}

	.cost-row.deleting {
		opacity: 0;
		transform: translateX(-20px);
	}

.card.totals-card {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-left: 4px solid #696cff;
}

.card.totals-card-primary {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-left: 4px solid #696cff;
}

.card.totals-card-info {
	/*background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);*/
	border-left: 4px solid #4facfe;
}

.quick-add-input:focus {
	border-color: #696cff;
	box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
}

.cost-list {
	max-height: 400px;
	overflow-y: auto;
}

.add-cost-section {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	border-radius: 8px;
	padding: 1rem;
}

.btn .spinner-border {
	vertical-align: text-bottom;
}


.cost-header-info {
	background: linear-gradient(135deg, #4facfe 00%, #00f2fe 60%);
	color: white;
	border-radius: 10px;
	border-left: 4px solid #3874a8;
}
.cost-header-warning {
	background: linear-gradient(135deg, #f5af19 00%, #f12711 60%);
	color: white;
	border-radius: 10px;
	border-left: 4px solid #c43538;
}
.payment-header-info {
	background: linear-gradient(135deg, #4facfe 00%, #00f2fe 60%);
	color: white;
	border-radius: 10px;
	border-left: 4px solid #3874a8;
}

.payment-header-success {
	background: linear-gradient(135deg, #11998e 00%, 38ef7d 60%);
	color: white;
	border-radius: 10px;
	border-left: 4px solid #3874a8;
}

.summary-card {
	border-left: 4px solid #696cff;
}

.cost-table th {
	background-color: #f8f9fa;
}

#paymentHelpToggleBtn .help-btn-text {
	transition: all 0.2s ease;
}
.hub-card {
	transition: all 0.3s ease;
	border: 1px solid transparent;
	cursor: pointer;
}

	.hub-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15) !important;
		border-color: #28c76f;
	}

	.hub-card .card-header {
		border-bottom: 2px solid #696cff ;
	}

.hub-icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	font-size: 1.75rem;
}

	/* Hub icon color classes with proper contrast */
	.hub-icon.bg-success {
		background-color: #28c76f !important;
	}

		.hub-icon.bg-success i {
			color: #fff !important;
		}

	.hub-icon.bg-info {
		background-color: #00cfe8 !important;
	}

		.hub-icon.bg-info i {
			color: #fff !important;
		}

	.hub-icon.bg-warning {
		background-color: #ff9f43 !important;
	}

		.hub-icon.bg-warning i {
			color: #fff !important;
		}

	.hub-icon.bg-primary {
		background-color: #696cff !important;
	}

		.hub-icon.bg-primary i {
			color: #fff !important;
		}

.kpi-mini {
	display: flex;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid #f0f0f0;
}

	.kpi-mini:last-child {
		border-bottom: none;
	}

.kpi-mini-value {
	font-size: 1.1rem;
	font-weight: 600;
}

.quick-link {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	transition: background-color 0.2s;
	text-decoration: none;
	color: inherit;
}

	.quick-link:hover {
		background-color: rgba(40, 199, 111, 0.08);
	}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
}

	.section-header h4 {
		margin: 0;
	}

.client-selector-hero {
	background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1rem;
}

/* Button outline colors to match green theme */
.btn-outline-success {
	border-color: #28c76f;
	color: #28c76f;
}

	.btn-outline-success:hover {
		background-color: #28c76f;
		color: #fff;
	}

/* ========================================
HELP SECTION - Purple theme
======================================== */






.help-section .card-body {
	background: #fff;
}

.help-section .card-header {
	background: linear-gradient(135deg, #f3e8ff 0%, #ffffff 100%);
	border-bottom: 1px solid #e9ecef;
	border-left: 0px solid #6a11cb;
	transition: background-color 0.2s ease;
	cursor: pointer;
}

.help-section.card {
	border-left: 4px solid #6a11cb !important;
}

.help-section .card-header:hover {
	background: #f0f0f0;
}

.help-section .card-body {
	background: #fff;
}

.help-section .card-header:hover {
	background: #ede0ff;
}


/* Help section alert - Purple theme */
.help-section .alert[style*="background: linear-gradient(135deg, #ede7f6"],
.help-section .alert[style*="background: linear-gradient(135deg, #f8f5ff"] {
	background: linear-gradient(135deg, #f3e8ff 0%, #ede0ff 100%) !important;
	border: 1px solid rgba(106, 17, 203, 0.2) !important;
}

/* Help section icon color */
.help-section .card-header i.bx-help-circle {
	color: #6a11cb !important;
}

/* Help section border colors - Purple theme */
.help-section div[style*="border-color: #667eea"] {
	border-color: #6a11cb !important;
}

.help-section h6[style*="color: #667eea"],
.help-section i[style*="color: #667eea"] {
	color: #6a11cb !important;
}

/* Quick navigation alert - Purple theme */
.help-section .alert[style*="background: rgba(102, 126, 234"] {
	background: rgba(106, 17, 203, 0.1) !important;
	border: 1px solid rgba(106, 17, 203, 0.2) !important;
}
/* Tip badge */
.tip-badge {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background: linear-gradient(135deg, #ff9f43 0%, #ff6b00 100%);
	color: white;
	font-size: 0.65rem;
	font-weight: 600;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-left: 8px;
}
.tip-badge-no-border {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background: linear-gradient(135deg, #ff9f43 0%, #ff6b00 100%);
	color: white;
	font-size: 0.65rem;
	font-weight: 600;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-left: 0px;
}
.register-warning-link {
	color: #ffab00 !important;
}

/* ========================================
   BREADCRUMB NAVIGATION STYLING
   ======================================== */

/* Breadcrumb link styling */
.breadcrumb-link {
	color: #697a8d !important;
	text-decoration: none;
	transition: all 0.2s ease;
	position: relative;
	cursor: pointer;
}

.breadcrumb-link:hover {
	color: #6a11cb !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}

.breadcrumb-link:focus {
	color: #6a11cb !important;
	outline: none;
}

/* Breadcrumb separator styling */
.breadcrumb-separator {
	color: #a1acb8;
	margin: 0 0.25rem;
}

/* Current page (non-link) breadcrumb */
.breadcrumb-current {
	color: #566a7f;
	font-weight: 500;
}
/* btn hero */
.btn.btn-hero, .btn.btn-help, .btn.btn-assign {
	background: rgba(255,255,255,0.15);
	border: 1px solid rgba(255,255,255,0.3);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.85rem;
	transition: all 0.2s ease;
}

	.btn.btn-hero:hover, .btn.btn-help:hover, .btn.btn-assign:hover {
		background: rgba(255,255,255,0.25);
		border-color: rgba(255,255,255,0.5);
		color: white;
	}


.currency-code-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.5rem;
	background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
	border: 1px solid rgba(106, 17, 203, 0.2);
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 600;
	color: #6a11cb;
	letter-spacing: 0.5px;
}
.currency-code-nontransparent-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.5rem;
	background: linear-gradient(135deg, rgba(251, 248, 255, 0.89) 0%, rgb(255, 255, 255) 100%);
	border: 1px solid rgba(106, 17, 203, 0.2);
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 600;
	color: #6a11cb;
	letter-spacing: 0.5px;
}

/* ── Non-Standard / Custom Industry Badge ── */
.non-standard-badge {
	font-size: 0.65rem;
	background-color: #ffc107;
	color: #000;
	padding: 0.1rem 0.3rem;
	border-radius: 3px;
	margin-left: 0.25rem;
}

/* ============================================================
   Hero Glass Panel
   Frosted-glass container for content placed inside hero sections.
   Use on any element inside a .content-hero or similar gradient hero.

   EQUAL-HEIGHT STANDARD: To make side-by-side panels equal height,
   wrap them in a row with .align-items-stretch and put each panel
   inside a .col .d-flex wrapper. The panel itself uses d-flex +
   flex-column so its content can flex-grow to fill remaining space.
   ============================================================ */
.hero-glass-panel {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.375rem;
	overflow: hidden;
	backdrop-filter: blur(2px);
	min-height: 140px;
}

/* Clickable list item inside a hero glass panel */
.hero-latest-item {
	padding: 0.2rem 0.35rem;
	border-radius: 4px;
	transition: background 0.15s, padding-right 0.15s;
	position: relative;
}
.hero-latest-item:hover {
	background: rgba(255, 255, 255, 0.15);
	padding-right: 1.25rem;
}
/* Subtle arrow indicator on hover */
.hero-latest-item::after {
	content: "\203A"; /* single right-pointing angle (rsaquo) */
	position: absolute;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1rem;
	font-weight: bold;
	transition: opacity 0.15s;
	pointer-events: none;
}
.hero-latest-item:hover::after {
	opacity: 1;
}
/* Static variant — keeps base padding/radius but disables hover arrow + bg shift */
.hero-latest-item-static:hover {
	background: transparent;
	padding-right: 0.35rem;
}
.hero-latest-item-static::after {
	display: none;
}

/* ============================================
   HERO CROSSFADE TRANSITION (shared standard)
   Apply .hero-crossfade-target to any hero element
   that participates in a show/hide swap.
   Use window.heroCrossfade(hideEl, showEl) from
   clc-hero-crossfade.js to animate the transition.
   ============================================ */
.hero-crossfade-target {
	transition: opacity 0.3s ease;
}
.hero-crossfade-target.hero-fade-out {
	opacity: 0;
	pointer-events: none;
}
.hero-crossfade-target.hero-fade-in {
	opacity: 1;
}