/* Custom styles for the Google Workspace Migration Plan Generator */

body {
    /* Inter is a common sans-serif font often used with Tailwind.
       Tailwind typically handles body font, but it was in the inline styles. */
    font-family: 'Inter', sans-serif;
}

/* Styling for the preformatted text block where the migration plan is displayed */
#migrationPlanOutput pre {
    background-color: #f9fafb;
    /* Tailwind gray-50 equivalent */
    border: 1px solid #e5e7eb;
    /* Tailwind gray-200 equivalent */
    padding: 1rem;
    /* p-4 in Tailwind */
    border-radius: 0.375rem;
    /* rounded-md in Tailwind */
    font-size: 0.875rem;
    /* text-sm in Tailwind */
    line-height: 1.5;
    /* leading-relaxed in Tailwind */
    color: #374151;
    /* Tailwind gray-700 equivalent */
    white-space: pre-wrap;
    /* Ensures text wraps and newlines are preserved */
    word-wrap: break-word;
    /* Breaks long words to prevent overflow */
    overflow-x: auto;
    /* Adds scrollbar if content is too wide */
}

/* Basic loader animation styles (if you implement a loader element with this class) */
.loader {
    border: 4px solid #f3f3f3;
    /* Light grey */
    border-top: 4px solid #3498db;
    /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    /* Provides some spacing and centers it if it's a block element */
}

.hidden-view {
    display: none !important;
    /* !important to override Tailwind's display classes if needed */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.detailed-doc-link {
    color: #2563eb;
    /* blue-600 */
    text-decoration: underline;
    cursor: pointer;
}
/* Add any other global custom styles or overrides here if needed.
   However, it's generally recommended to leverage Tailwind utility classes
   as much as possible for consistency and to avoid specificity conflicts. */