body {
	font-family: 'Inter', sans-serif;
	background-color: #f8fafc;
}
/* Prevent text selection during drag */
body.is-dragging {
	user-select: none;
	-webkit-user-select: none;
}
/* Custom scrollbar for webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
	background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}
/* Sidebar transition */
.sidebar {
	transition: width 0.3s ease-in-out;
}
.sidebar-collapsed .nav-text,
.sidebar-collapsed .logo-text {
	display: none;
}
.sidebar-collapsed .justify-center {
	justify-content: center;
}
/* Modal styles */
.modal-overlay {
	transition: opacity 0.3s ease-in-out;
}
.modal-container {
	transition: transform 0.3s ease-in-out;
}
#toast {
	position: fixed;
	bottom: -100px;
	left: 50%;
	transform: translateX(-50%);
	transition: bottom 0.5s ease-in-out;
	z-index: 1050;
}
/* --- NEW, EXPLICIT TAB STYLES --- */
/* Base styles for all tab buttons */
.notification-tab-btn {
	padding: 0.5rem 1.25rem; /* Equivalent to py-2 px-5 */
	font-weight: 600; /* Equivalent to font-semibold */
	font-size: 0.875rem; /* Equivalent to text-sm */
	border-radius: 9999px; /* Equivalent to rounded-full */
	transition: background-color 0.2s, color 0.2s;
}
/* Style for the ACTIVE tab */
.active-notification-tab {
	background-color: #1f2937; /* A dark gray, equivalent to bg-gray-800 */
	color: #ffffff; /* White text */
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
/* Style for INACTIVE tabs */
.inactive-notification-tab {
	background-color: #e5e7eb; /* A light gray, equivalent to bg-gray-200 */
	color: #4b5563; /* A medium gray text, equivalent to text-gray-600 */
}
.inactive-notification-tab:hover {
	background-color: #d1d5db; /* A slightly darker gray on hover */
}

.notification-content {
	display: none;
}
.notification-content-active {
	display: block;
}
.notification-item.unread {
	background-color: #eff6ff;
	border-left-color: #3b82f6;
}
/* Chatbot styles */
#chat-bubble {
	transition: transform 0.2s ease-in-out;
}
#chat-bubble:hover {
	transform: scale(1.1);
}
#chat-window {
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	transform-origin: bottom right;
}

/* Main Tab styles */
.main-tab-btn {
	@apply py-3 px-5 font-semibold text-gray-600 border-b-2;
}
.active-main-tab {
	@apply border-blue-600 text-blue-600;
}
.inactive-main-tab {
	@apply border-transparent hover:border-gray-300 hover:text-gray-800;
}
.main-tab-content {
	display: none;
}
.main-tab-content-active {
	display: block;
}
/* Sub-tab styles */
.integration-tab-btn {
	@apply py-2 px-4 font-medium text-sm rounded-md;
}
.active-integration-tab {
	@apply bg-blue-600 text-white;
}
.inactive-integration-tab {
	@apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}
.integration-content {
	display: none;
}
.integration-content-active {
	display: block;
}

/* Tab styles */
.tab-btn {
	@apply py-3 px-4 font-medium text-sm rounded-t-lg border-b-2;
}
.active-tab {
	@apply border-blue-600 text-blue-700 bg-white;
}
.inactive-tab {
	@apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
}
.payment-content {
	display: none;
}
.payment-content-active {
	display: block;
}

/* Drag and Drop placeholder */

.toggle-checkbox:checked {
	right: 0;
	border-color: #3b82f6;
}
.toggle-checkbox:checked + .toggle-label {
	background-color: #3b82f6;
}
/* For multi-select dropdown */
.multi-select-dropdown {
	display: none;
}

/* Drag and Drop Styles */

.workflow-item {
	position: absolute;
	z-index: 10;
}
.connection-anchor {
	position: absolute;
	width: 12px;
	height: 12px;
	background: white;
	border: 2px solid #60a5fa;
	border-radius: 50%;
	cursor: pointer;
	z-index: 11;
}
.connection-anchor:hover {
	background: #60a5fa;
}
.connection-anchor.top { top: -6px; left: 50%; transform: translateX(-50%); }
.connection-anchor.bottom { bottom: -6px; left: 50%; transform: translateX(-50%); }
.connection-anchor.left { left: -6px; top: 50%; transform: translateY(-50%); }
.connection-anchor.right { right: -6px; top: 50%; transform: translateY(-50%); }
.connection-anchor.selected {
	background: #2563eb;
	border-color: #1d4ed8;
}
#workflow-canvas-container {
	position: relative;
}
#connection-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
}

details > summary {
	list-style: none;
	cursor: pointer;
}
details > summary::-webkit-details-marker {
	display: none;
}
details > summary .category-arrow {
	transition: transform 0.2s;
}
details[open] > summary .category-arrow {
	transform: rotate(90deg);
}

/* Drag and Drop Styles */
.sortable-ghost {
	opacity: 0.4;
	background: #dbeafe;
	border: 2px dashed #60a5fa;
}
/* Collapsible category styles */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.sidebar { transition: width 0.3s ease-in-out; }
.sidebar-collapsed .nav-text, .sidebar-collapsed .logo-text { display: none; }

/* Drag and Drop Styles */
.sortable-ghost {
	opacity: 0.6;
	background: #dbeafe;
	border: 2px dashed #60a5fa;
	/* Fix for ghost element width */
	width: 250px !important; 
}
.workflow-item {
	position: absolute;
	z-index: 10;
	width: 250px;
}
.connection-anchor {
	position: absolute;
	width: 16px;
	height: 16px;
	background: white;
	border: 2px solid #93c5fd;
	border-radius: 50%;
	cursor: pointer;
	z-index: 11;
	transition: background-color 0.2s, border-color 0.2s;
}
.connection-anchor:hover {
	background: #60a5fa;
	border-color: #3b82f6;
}
.connection-anchor.top { top: -8px; left: 50%; transform: translateX(-50%); }
.connection-anchor.bottom { bottom: -8px; left: 50%; transform: translateX(-50%); }
.connection-anchor.left { left: -8px; top: 50%; transform: translateY(-50%); }
.connection-anchor.right { right: -8px; top: 50%; transform: translateY(-50%); }
.connection-anchor.selected {
	background: #2563eb;
	border-color: #1d4ed8;
}
details > summary {
	cursor: pointer;
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}
.category-arrow {
	transition: transform 0.2s;
}
details[open] .category-arrow {
	transform: rotate(90deg);
}
.modal-overlay {
	transition: opacity 0.3s ease-in-out;
}
.modal-container {
	transition: transform 0.3s ease-in-out;
}
.move-handle {
	cursor: move;
}

.grid-stack-item-content { background-color: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }

.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-btn { padding: 8px 16px; border-bottom: 2px solid transparent; }
.tab-btn.active { border-color: #4f46e5; color: #4f46e5; background-color: #eef2ff; }
.form-section { background-color: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); }

:root { --fc-border-color: #e5e7eb; --fc-today-bg-color: rgba(59, 130, 246, 0.05); }
        .fc .fc-button-primary { background-color: #3b82f6; border-color: #3b82f6; }
		
		
		
:root {
	--primary-color: #4f46e5;
	--header-bg: #ffffff;
	--body-bg: #f3f4f6;
	--text-color: #111827;
	--card-bg: #ffffff;
}

body {
	font-family: 'Inter', sans-serif;
	background-color: var(--body-bg);
	color: var(--text-color);
}

.primary-button {
	background-color: var(--primary-color);
}

.main-header {
	background-color: var(--header-bg);
}

.hidden .modal-container {
	transform: scale(0.95);
	opacity: 0;
}

/* Custom Checkbox */
.rule-checkbox:checked + label {
	background-color: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}
.rule-checkbox:checked + label .fa-check {
	transform: scale(1);
}

/* Tab Styles */
.tab-btn.active {
	border-color: var(--primary-color);
	color: var(--primary-color);
	background-color: #eef2ff;
}

/* Modal Styles & Transitions */

.modal-overlay.hidden .modal-container { transform: scale(0.95); opacity: 0; }

/* Custom Selectable Button */
.selectable-checkbox:checked + label {
	background-color: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}
.selectable-checkbox:checked + label .fa-check {
	transform: scale(1);
}