/* Base Form Card Component Styles */

/* Ensure fw-semibold text appears white in dark mode */
[data-bs-theme="dark"] .card .fw-semibold {
    color: #fff !important;
}

/* Additional card styling for better dark mode appearance */
[data-bs-theme="dark"] .card {
    background-color: #212529;
    border-color: #495057;
}

[data-bs-theme="dark"] .card-header {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: #495057;
}

/* Ensure good contrast for card content in dark mode */
[data-bs-theme="dark"] .card-body {
    color: #f8f9fa;
}

/* Style for the bordered items inside the card */
.card .border.rounded {
    transition: background-color 0.2s ease;
}

[data-bs-theme="dark"] .card .border.rounded {
    border-color: #495057 !important;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Hover effect for bordered items */
[data-bs-theme="dark"] .card .border.rounded:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Badge colors with better contrast in dark mode */
[data-bs-theme="dark"] .card .badge.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .card .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

[data-bs-theme="dark"] .card .badge.bg-primary {
    background-color: #0d6efd !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .card .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

/* Provider icon colors in dark mode */
[data-bs-theme="dark"] .card .bi-google.text-danger {
    color: #dc3545 !important;
}

[data-bs-theme="dark"] .card .bi-github.text-dark {
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .card .bi-link-45deg.text-primary {
    color: #0d6efd !important;
}

/* 
 * Theme-text utility class
 * -----------------------
 * A utility class that automatically adjusts text color based on the current theme:
 * - Black (#000) in light theme for good contrast against light backgrounds
 * - White (#fff) in dark theme for good contrast against dark backgrounds
 *
 * Usage: Add the 'theme-text' class to any text element that needs to maintain
 * proper contrast in both light and dark themes.
 *
 * Example: <p class="theme-text">This text will be black in light mode and white in dark mode</p>
 */
.theme-text {
    color: #000 !important; /* Black by default (light theme) */
}

[data-bs-theme="dark"] .theme-text {
    color: #fff !important; /* White in dark theme */
}