/* Custom CSS with Tailwind-like utilities for the authentication app */

/* Base styles */
html, body {
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light theme (default) */
:root {
    --primary: #0B5FE0; /* Global brand blue */
    --primary-dark: #0A51C9;
    --secondary: #8B5CF6;
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
    --background: #F9FAFB;
    --surface: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-tertiary: #6B7280;
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    --shadow: rgba(0, 0, 0, 0.05);
}

/* Dark theme */
[data-theme="dark"] {
    --primary: #60A5FA; /* Dark theme brand blue */
    --primary-dark: #3B82F6;
    --secondary: #A78BFA;
    --success: #34D399;
    --error: #F87171;
    --warning: #FBBF24;
    --background: #111827;
    --surface: #1F2937;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    --border: #374151;
    --border-light: #1F2937;
    --shadow: rgba(0, 0, 0, 0.3);
}

/* Layout utilities */
.min-h-screen { min-height: 100vh; }
.max-w-2xl { max-width: 42rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.max-w-md { max-width: 28rem; margin-left: auto; margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.p-6 { padding: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mr-3 { margin-right: 0.75rem; }
.-ml-1 { margin-left: -0.25rem; }

/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }

/* Spacing utilities */
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.gap-3 { gap: 0.75rem; }

/* Text utilities */
.text-center { text-align: center; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Color utilities */
.text-gray-900 { color: var(--text-primary); }
.text-gray-600 { color: var(--text-secondary); }
.text-gray-500 { color: var(--text-tertiary); }
.text-gray-700 { color: var(--text-secondary); }
.text-white { color: #ffffff; }
.text-green-700 { color: #047857; }
.text-red-700 { color: #B91C1C; }
.text-blue-600 { color: #2563EB; }
.text-orange-500 { color: #F97316; }

/* Background utilities */
.bg-background { background-color: var(--background); }
.bg-white { background-color: var(--surface); }
.bg-primary { background-color: var(--primary); }
.bg-green-50 { background-color: #F0FDF4; }
.bg-red-50 { background-color: #FEF2F2; }
.bg-yellow-50 { background-color: #FEFCE8; }
.bg-blue-50 { background-color: #EFF6FF; }

/* Border utilities */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-gray-200 { border-color: var(--border); }
.border-gray-300 { border-color: var(--border); }
.border-green-200 { border-color: #BBF7D0; }
.border-red-200 { border-color: #FECACA; }
.border-yellow-200 { border-color: #FEF3C7; }
.border-blue-200 { border-color: #DBEAFE; }
.border-orange-300 { border-color: #FDBA74; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }

/* Shadow utilities */
.shadow-sm { box-shadow: 0 1px 2px 0 var(--shadow); }

/* Size utilities */
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.h-16 { height: 4rem; }

/* Animation utilities */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* List utilities */
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* Button styles */
.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--surface);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid #D1D5DB;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: var(--background);
}

.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}

/* Form utilities */
.form-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-primary);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.form-input.form-input-error,
.form-input.form-input-error:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 1px var(--error);
}

.auth-field-error,
.validation-message {
    color: #B91C1C;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    margin: 0.375rem 0 0;
}

.auth-field-error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.auth-field-error-icon {
    flex: none;
    height: 1rem;
    width: 1rem;
}

[data-theme="dark"] .auth-field-error,
[data-theme="dark"] .validation-message {
    color: #FCA5A5;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* Responsive utilities */
@media (min-width: 640px) {
    .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
    .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Utility classes */
.min-h-screen { min-height: 100vh; }
.bg-background { background-color: var(--background); }
.bg-white { background-color: var(--surface); }
.bg-primary { background-color: var(--primary); }
.bg-primary\/90 { background-color: rgba(99, 102, 241, 0.9); }
.bg-primary\/10 { background-color: rgba(99, 102, 241, 0.1); }

[data-theme="dark"] .bg-primary\/90 { background-color: rgba(129, 140, 248, 0.9); }
[data-theme="dark"] .bg-primary\/10 { background-color: rgba(129, 140, 248, 0.1); }

/* Green colors - Light theme */
.bg-green-50 { background-color: #f0fdf4; }
.border-green-200 { border-color: #bbf7d0; }
.text-green-400 { color: #4ade80; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }

/* Green colors - Dark theme */
[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.1); }
[data-theme="dark"] .border-green-200 { border-color: rgba(34, 197, 94, 0.3); }
[data-theme="dark"] .text-green-400 { color: #4ade80; }
[data-theme="dark"] .text-green-600 { color: #22c55e; }
[data-theme="dark"] .text-green-700 { color: #22c55e; }
[data-theme="dark"] .text-green-800 { color: #4ade80; }

/* Red colors - Light theme */
.bg-red-50 { background-color: #fef2f2; }
.border-red-200 { border-color: #fecaca; }
.text-red-400 { color: #f87171; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }

/* Red colors - Dark theme */
[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.1); }
[data-theme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, 0.3); }
[data-theme="dark"] .text-red-400 { color: #f87171; }
[data-theme="dark"] .text-red-700 { color: #ef4444; }
[data-theme="dark"] .text-red-800 { color: #f87171; }

/* Yellow colors - Light theme */
.bg-yellow-50 { background-color: #fefce8; }
.border-yellow-200 { border-color: #fde047; }
.text-yellow-400 { color: #facc15; }
.text-yellow-700 { color: #a16207; }
.text-yellow-800 { color: #854d0e; }

/* Yellow colors - Dark theme */
[data-theme="dark"] .bg-yellow-50 { background-color: rgba(250, 204, 21, 0.1); }
[data-theme="dark"] .border-yellow-200 { border-color: rgba(250, 204, 21, 0.3); }
[data-theme="dark"] .text-yellow-400 { color: #facc15; }
[data-theme="dark"] .text-yellow-700 { color: #eab308; }
[data-theme="dark"] .text-yellow-800 { color: #facc15; }

/* Blue colors - Light theme */
.bg-blue-50 { background-color: #eff6ff; }
.border-blue-200 { border-color: #bfdbfe; }
.text-blue-400 { color: #60a5fa; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }

/* Blue colors - Dark theme */
[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1); }
[data-theme="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.3); }
[data-theme="dark"] .text-blue-400 { color: #60a5fa; }
[data-theme="dark"] .text-blue-700 { color: #3b82f6; }
[data-theme="dark"] .text-blue-800 { color: #60a5fa; }

/* Gray colors */
.text-gray-500 { color: var(--text-tertiary); }
.text-gray-600 { color: var(--text-secondary); }
.text-gray-700 { color: var(--text-secondary); }
.text-gray-900 { color: var(--text-primary); }
.border-gray-200 { border-color: var(--border); }
.border-gray-300 { border-color: var(--border); }

/* Text colors */
.text-white { color: white; }

/* Layout utilities */
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.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-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.p-6 { padding: 1.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-3 { margin-left: 0.75rem; }
.mr-3 { margin-right: 0.75rem; }
.-ml-1 { margin-left: -0.25rem; }

/* Flexbox utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.gap-3 { gap: 0.75rem; }

/* Border utilities */
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-transparent { border-color: transparent; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Shadow utilities */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* Typography utilities */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }

/* Size utilities */
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-16 { height: 4rem; }

/* Display utilities */
.block { display: block; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* Interactive utilities */
.cursor-not-allowed { cursor: not-allowed; }
.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; }

/* Focus utilities */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; }
.focus\:ring-primary:focus { --tw-ring-color: var(--primary); }

/* Hover utilities */
.hover\:bg-gray-50:hover { background-color: var(--background); }
.hover\:bg-primary\/90:hover { background-color: rgba(99, 102, 241, 0.9); }

/* Disabled utilities */
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Animation utilities */
.animate-spin { animation: spin 1s linear infinite; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive utilities */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Custom button styles */
/* Official-style OAuth buttons (visual only, keep our handlers) */
.oauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 10px; font-size: 16px; font-weight: 600; border: 1.5px solid transparent; cursor: pointer; padding: 0 16px; }
.oauth-btn .oauth-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.oauth-btn .oauth-icon svg, .oauth-btn .oauth-icon img { width: 18px; height: 18px; display: block; }
.oauth-btn .oauth-label { line-height: 1; }

/* Google button: light theme per guidelines (white bg, gray border) */
.google-btn { background-color: #FFFFFF; color: #1F1F1F; border-color: #747775; }
.google-btn:hover { background-color: #F7F8F8; }
.google-btn:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(116,119,117,.35); }

/* Apple button: white variant with black border; switch in dark mode */
.apple-btn { background-color: #FFFFFF; color: #000000; border-color: #000000; }
:root .dark .apple-btn, .dark .apple-btn { background-color: #000000; color: #FFFFFF; border-color: #FFFFFF; }
.apple-btn:hover { background-color: #f7f7f7; }

/* Image-based OAuth buttons */
.oauth-btn-img{border:none;background:none;padding:0;cursor:pointer;display:block}
.oauth-btn-img img{display:block;width:100%;height:auto}
.oauth-btn-img:disabled{opacity:.6;cursor:not-allowed}

.apple-btn:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(0,0,0,.2); }

/* Flutter-parity OAuth variants */
.oauth-full{width:100%}
.oauth-google{background: var(--primary); color:#fff; border-color: var(--primary)}
.oauth-google:hover{background: var(--primary-dark)}
.oauth-apple{background: #fff; color: var(--primary); border-color: var(--primary)}
.oauth-apple:hover{background:#f7f7f7}
.oauth-btn:disabled{opacity:.6; cursor:not-allowed}
.oauth-logo{width:22px;height:22px;display:block}
.oauth-label{line-height:1}
/* Simple spinner for optional IsLoading */
.oauth-spinner{width:18px;height:18px;border:2px solid rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.6);border-radius:50%;animation:oauth-spin 1s linear infinite}
@keyframes oauth-spin{to{transform:rotate(360deg)}}

.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: white;
    background-color: var(--primary);
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover:not(:disabled) {
    background-color: rgba(99, 102, 241, 0.9);
}

.btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--primary);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    color: var(--text-secondary);
    background-color: var(--surface);
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--background);
}

.btn-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--primary);
}

/* Full width button utility - overrides inline-flex */
.btn-full-width {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

/* Form utilities */
.form-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 var(--shadow);
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: var(--surface);
    box-sizing: border-box;
}

.form-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.form-input.invalid,
.form-input.form-input-error,
.form-input.form-input-error:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 1px var(--error);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Theme transition support */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: var(--background);
}

.theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-secondary);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle-sun,
.theme-toggle-moon {
    position: absolute;
}

/* Light theme shows sun icon */
:root:not([data-theme="dark"]) .theme-toggle-sun {
    opacity: 1;
    transform: rotate(0deg);
}

:root:not([data-theme="dark"]) .theme-toggle-moon {
    opacity: 0;
    transform: rotate(180deg);
}

/* Dark theme shows moon icon */
[data-theme="dark"] .theme-toggle-sun {
    opacity: 0;
    transform: rotate(180deg);
}

[data-theme="dark"] .theme-toggle-moon {
    opacity: 1;
    transform: rotate(0deg);
}

/* Auto mode indicator */
.theme-toggle-auto-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--background);
}

.theme-toggle-auto-indicator svg {
    width: 4px;
    height: 4px;
    color: white;
}

/* Override default Blazor error UI */
#blazor-error-ui {
    background: var(--warning);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--shadow);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--text-primary);
}

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