@charset "UTF-8";

html, body, * {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f3f4f6;
}

.dashboard-grid-areas-layout {
	grid-template-areas: "header" "main";
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.dashboard-grid-areas-layout {
		grid-template-areas: "aside header" "aside main";
		grid-template-columns: 4rem 1fr;
	}
}

@media (min-width: 1024px) {
	.dashboard-grid-areas-layout {
		grid-template-columns: 14rem 1fr;
	}
}

.input {
	width: 100%;
	padding: 0.5rem 1rem; /* Same as px-4 py-2 */
	border: 1px solid #e5e7eb; /* Same as border-gray-200 */
	border-radius: 0.5rem; /* Same as rounded-lg */
	background: #f9fafb; /* Same as bg-gray-50 */
	font-size: 0.875rem; /* Same as text-sm */
	color: #111827; /* Same as text-gray-900 */
	transition: border 0.2s, background 0.2s;
}

.input:focus {
	outline: none;
	border-color: #a78bfa; /* Same as focus:border-purple-500 */
	background: #fff; /* Same as focus:bg-white */
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-text-fill-color: #171717 !important;
	caret-color: #171717;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.scroll-hidden {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.scroll-hidden::-webkit-scrollbar {
	display: none;
}

.notification-btn {
  position: relative;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgb(237 233 254), rgb(221 214 254));
  color: #9333EA;
  font-weight: 600;
  border: 1px solid rgb(229 231 235);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notification-btn:hover {
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
  transform: translateY(-2px);
}

@keyframes indicatorPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
  }
  50% {
    transform: scale(1.40);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.6);
  }
}



.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #7C3AED;  /* black spinner */
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

.assistant-text::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 1em;
	background: #ccc;
	margin-left: 3px;
	animation: blink 1s infinite;
	vertical-align: middle;
}
@keyframes blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

.blocked-btn {
    filter: grayscale(100%);       
}

/* Dialog container */
.tg-dialog {
  background: linear-gradient(135deg, #f5f0ff, #fef6ff) !important;
  color: #1f1235 !important;
  border-radius: 1=8px !important;
/*  border: 1px solid #e0d3ff !important;*/
  box-shadow: 0 18px 45px rgba(93, 63, 211, 0.25) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
}

.tg-dialog .tg-dialog-footer {
    padding: 12.5px 25px 25px 7px !important;
}

/* Body */
.tg-dialog-body {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #4b3b7a !important;
  margin-bottom: 16px !important;
}


/* Buttons */
.tg-dialog-btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  min-width: 84px !important;
}

/* Left / Back button */
#tg-dialog-prev-btn {
  background: transparent !important;
  color: #7c3aed !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
}

/* Right / Next button */
#tg-dialog-next-btn {
  background: linear-gradient(135deg, #7c3aed, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

/* Step dots */
.tg-dialog-dots .tg-dot {
  background-color: rgba(148, 163, 184, 0.5) !important;
}
.tg-dialog-dots .tg-dot-active {
  background-color: #7c3aed !important;
}

/* Highlighted target */
.tg-highlight {
  border-radius: 10px !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.65) !important;
  z-index: 9999 !important;
}

.tg-dialog-dots {
    display: block !important;
}

@keyframes modal-show {
	0% {
		opacity: 0;
		transform: translateY(1rem) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.animate-modal-show {
	animation: modal-show 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-modal-hide {
	animation: modal-hide 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes modal-hide {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(0.5rem) scale(0.95);
	}
}