body {
    background-color: #f3f4f6; /* tw-bg-gray-100 */
    overflow-y: scroll;
    font-family: sans-serif;
}

/* For Blazor Validation Messages */
.validation-message {
    color: #dc2626; /* tw-text-red-600 */
    font-size: 0.875rem; /* tw-text-sm */
}

/* Style inputs on validation error (Blazor adds 'invalid' class) */
input.invalid, select.invalid, textarea.invalid {
    border-color: #dc2626 !important; /* tw-border-red-600 */
    box-shadow: 0 0 0 1px #dc2626 !important; /* tw-ring-red-600 */
}
/* Style radio group on error (might need custom handling in C# or JS interop if Blazor doesn't style the group) */
.radio-group.invalid label span { /* Example selector, adjust as needed */
    color: #dc2626 !important;
}


/* Styles for overlay and popup */
.popup-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    z-index: 40; /* Lower than popup */
}

.popup-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50; /* Above overlay */
}

/* Other styles from original file... */
.tab-item {
}

.tab-item:not(:last-child) {
    border-right-width: 2px;
    border-color: #d1d5db; /* gray-300 */
}

.icon-container svg {
    width: 2rem; /* tw-w-8 equivalent */
    height: 2rem; /* tw-h-8 equivalent */
}

/* Style for required field markers (can be added via CSS or manually in Razor) */
label.required::after {
    content: '*';
    color: red;
    margin-left: 0.25rem;
}

/* Base font sizes (Tailwind handles responsiveness) */
#gaid-form label, #gaid-form input, #gaid-form select, #gaid-form button { /* Consider removing if using Blazor Input* components */
    font-size: 0.875rem; /* tw-text-sm */
}

@media (min-width: 640px) { /* sm breakpoint */
    #gaid-form label, #gaid-form input, #gaid-form select, #gaid-form button {
        font-size: 1rem; /* tw-text-base */
    }
}

/* Radio group styling */
.radio-group label {
    margin-right: 1rem;
}

/* Ensure pointer events none for icon container */
.icon-container {
    pointer-events: none;
}

/* Tailwind Color Definition (ensure Tailwind config includes this or define in CSS) */
:root {
    --gaid-blue: #1f6ea5;
}

.tw-text-gaid-blue {
    color: var(--gaid-blue);
}

.tw-bg-gaid-blue {
    background-color: var(--gaid-blue);
}