/* Specialized CSS file to fix the Blazor reconnection dialog styles
   This ensures text is properly visible regardless of theme */

/* Base styles for reconnection UI */
#components-reconnect-modal,
.components-reconnect-modal,
#blazor-error-ui,
div[id*="reconnect"],
div[class*="reconnect"] {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #333333 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    padding: 10px !important;
    margin: 10px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Style all text elements within reconnection UI */
#components-reconnect-modal *,
.components-reconnect-modal *,
#blazor-error-ui *,
div[id*="reconnect"] *,
div[class*="reconnect"] * {
    color: #333333 !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

/* Style headers in reconnection UI */
#components-reconnect-modal h1, #components-reconnect-modal h2, 
#components-reconnect-modal h3, #components-reconnect-modal h4, 
#components-reconnect-modal h5, #components-reconnect-modal h6,
.components-reconnect-modal h1, .components-reconnect-modal h2,
.components-reconnect-modal h3, .components-reconnect-modal h4,
.components-reconnect-modal h5, .components-reconnect-modal h6,
div[id*="reconnect"] h1, div[id*="reconnect"] h2,
div[id*="reconnect"] h3, div[id*="reconnect"] h4,
div[id*="reconnect"] h5, div[id*="reconnect"] h6 {
    color: #333333 !important;
    font-weight: bold !important;
}

/* Handle specific reconnection states */
.components-reconnect-hide,
.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected {
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 8px !important;
    border-radius: 4px !important;
    margin: 8px auto !important;
    max-width: 400px !important;
    text-align: center !important;
    border: 1px solid #cccccc !important;
}

/* Style text in reconnect-show state */
.components-reconnect-show {
    font-weight: bold !important;
}

/* Style buttons in reconnection UI */
#components-reconnect-modal button,
.components-reconnect-modal button,
div[id*="reconnect"] button,
div[class*="reconnect"] button {
    background-color: #0078d4 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    margin: 5px !important;
}

#components-reconnect-modal button:hover,
.components-reconnect-modal button:hover,
div[id*="reconnect"] button:hover,
div[class*="reconnect"] button:hover {
    background-color: #005a9e !important;
}

/* Override any theme-based styling */
.dark-theme #components-reconnect-modal,
.dark-theme .components-reconnect-modal,
.dark-theme #blazor-error-ui,
.dark-theme div[id*="reconnect"],
.dark-theme div[class*="reconnect"],
.dark-theme .components-reconnect-hide,
.dark-theme .components-reconnect-show,
.dark-theme .components-reconnect-failed,
.dark-theme .components-reconnect-rejected {
    background-color: #ffffff !important;
    color: #333333 !important;
}

.dark-theme #components-reconnect-modal *,
.dark-theme .components-reconnect-modal *,
.dark-theme #blazor-error-ui *,
.dark-theme div[id*="reconnect"] *,
.dark-theme div[class*="reconnect"] * {
    color: #333333 !important;
}