#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #8A67FF;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.toast {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    color: white;
    opacity: 0.9;
}

.toast-info {
    background-color: blue;
}

.toast-success {
    background-color: green;
}

.toast-warning {
    background-color: orange;
}

.toast-error {
    background-color: red;
}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Ensure this is higher than any other z-index in your application */
    display: flex; /* Use flexbox to center the loader */
}

.loaderdiv {
    display: flex;
    justify-content: space-around;
    width: 80px;
}

.circle {
    width: 20px;
    height: 20px;
    background-color: #774EFF;
    border-radius: 50%;
    animation: hop 0.6s infinite ease-in-out;
}

.circle:nth-child(2) {
    animation-delay: 0.2s;
}

.circle:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes hop {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Adjust hop height */
    }
}

/* Tailwind CSS classes for ConfirmationComponent */
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.hidden { display: none; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.relative { position: relative; }
.sticky { position: sticky; }
.mobile-header {
    position: sticky;
    top: 0;
    z-index: 50;
}
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-transparent { border-color: transparent; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.bg-white { background-color: #ffffff; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-500 { background-color: #6b7280; }
.bg-blue-600 { background-color: #2563eb; }
.bg-opacity-50 { background-color: rgba(107, 114, 128, 0.5); }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.font-medium { font-weight: 500; }
.text-white { color: #ffffff; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.focus\:ring-offset-2:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(59, 130, 246, 0.5); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }

/* Additional Tailwind classes for modal styling */
.max-w-lg { max-width: 32rem; }
.p-8 { padding: 2rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.text-lg { font-size: 1.125rem; }
.h-10 { height: 2.5rem; }
.inline-flex { display: inline-flex; }
.gap-2 { gap: 0.5rem; }
.whitespace-nowrap { white-space: nowrap; }
.ring-offset-background { --tw-ring-offset-color: #ffffff; }
.disabled\:pointer-events-none:disabled { pointer-events: none; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.border-input { border-color: #e4e4e7; }
.bg-background { background-color: #ffffff; }
.bg-primary { background-color: #8b5cf6; }
.text-primary-foreground { color: #ffffff; }
.hover\:bg-accent:hover { background-color: #f4f4f5; }
.hover\:text-accent-foreground:hover { color: #09090b; }
.hover\:bg-primary\/90:hover { background-color: rgba(139, 92, 246, 0.9); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-purple-600 { --tw-gradient-from: #9333ea; --tw-gradient-to: rgb(147 51 234 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-purple-700 { --tw-gradient-to: #7c3aed; }
.hover\:from-purple-700:hover { --tw-gradient-from: #7c3aed; --tw-gradient-to: rgb(124 58 237 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.hover\:to-purple-800:hover { --tw-gradient-to: #6b21a8; }
.shadow-medium { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.hover\:shadow-large:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5); }
.focus-visible\:ring-ring:focus-visible { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5); }
.focus-visible\:ring-offset-2:focus-visible { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(139, 92, 246, 0.5); }

/* Remove focus outline from heading elements */
h1:focus, h1:focus-visible {
    outline: none;
    box-shadow: none;
}

h2:focus, h2:focus-visible {
    outline: none;
    box-shadow: none;
}

h3:focus, h3:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Additional Tailwind classes for invoice page styling */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.animate-fade-in { animation: fadeIn 0.5s ease-in; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.leading-none { line-height: 1; }
.tracking-tight { letter-spacing: -0.025em; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.gap-4 { gap: 1rem; }
.h-9 { height: 2.25rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-0.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.px-2.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.text-xs { font-size: 0.75rem; }
.font-semibold { font-weight: 600; }
.rounded-full { border-radius: 9999px; }
.bg-green-100 { background-color: #dcfce7; }
.text-green-800 { color: #166534; }
.hover\:bg-green-100:hover { background-color: #dcfce7; }
.bg-card { background-color: #ffffff; }
.text-card-foreground { color: #0f172a; }
.text-foreground { color: #0f172a; }
.text-muted-foreground { color: #64748b; }
.border { border-width: 1px; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pointer cursor for all buttons and links */
button {
    cursor: pointer;
}

a {
    cursor: pointer;
}

/* Ensure disabled buttons have default cursor */
button:disabled {
    cursor: not-allowed;
}

/* Validation error styling */
.validation-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.field-validation-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.input-validation-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* Tailwind classes for InfoComponent */
.relative { position: relative; }
.absolute { position: absolute; }
.inline-flex { display: inline-flex; }
.z-50 { z-index: 50; }
.w-64 { width: 16rem; }
.p-3 { padding: 0.75rem; }
.border-gray-200 { border-color: #e5e7eb; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.left-6 { left: 1.5rem; }
.top-0 { top: 0; }
.top-2 { top: 0.5rem; }
.-left-2 { left: -0.5rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.transform { transform: var(--tw-transform); }
.rotate-45 { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.border-l { border-left-width: 1px; }
.border-t { border-top-width: 1px; }

/* Active navigation link styling */
.active {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    color: #111827 !important; /* text-gray-900 */
}

/* Additional Tailwind classes for new layout */
.text-gray-600 { color: #4b5563; }
.min-h-0 { min-height: 0px; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.overflow-auto { overflow: auto; }
.w-64 { width: 16rem; }
.bg-background { background-color: #ffffff; }
.border-r { border-right-width: 1px; }
.mt-auto { margin-top: auto; }
.gap-3 { gap: 0.75rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:text-gray-900:hover { color: #111827; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.mt-8 { margin-top: 2rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.min-w-0 { min-width: 0px; }
.rounded-md { border-radius: 0.375rem; }

/* Custom utility to hide elements on md screens and up */
@media (min-width: 768px) {
    .hide-on-md {
        display: none !important;
    }
}

/* Custom utilities for container logs */
.max-w-full { max-width: 100%; }
.overflow-x-auto { overflow-x: auto; }
.block { display: block; }

/* Width utilities */
.w-3\/4 { width: 75%; }
.w-full { width: 100%; }