/* app.css */

/*
    This CSS file provides global styles for the application.
    It includes color schemes and styles that apply across the entire site.
*/

/* Bootstrap and MudBlazor Color Scheme Alignment */
.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

/* Global Utility Classes */

/* Utility class to make elements full width */
.full-width {
    width: 100%;
}

/* Utility class for aligning items to the top */
.align-top {
    vertical-align: top !important;
}

/* Button Styling */
button.mud-button {
    margin: 5px 5px; /* Adjust as needed */
}

/* Expandable Panel Content */
.mud-expand-panel-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Card Content Adjustments */
.mud-card-content > :last-child {
    margin-bottom: 0 !important;
}

/* List Item Density */
.mud-list-item-dense {
    min-height: 32px;
}

/* Description Text Styling */
.description-text ::deep br {
    display: block;
    margin: 10px 0;
    content: "";
}

/* Read-Only Field Styling */
.read-only-field {
    background-color: #f0f0f0; /* Example style */
}

/* Editable Field Styling */
.editable-field {
    border: 2px solid blue; /* Example style */
}

/* Full-Screen Editor Styling */
.full-screen-editor {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: var(--mud-palette-background);
    padding: 20px;
}

/* Chat Component Styling */
/* Since the chat component has page-specific styles, move these to 'creator-layout.css' to avoid conflicts */

/* Markdown Content Styling */
.markdown-content {
    background-color: #4b5170;
    border-radius: 4px;
}

/* Interactive Card Styling */
.mud-card {
    transition: all 0.3s ease;
}

.mud-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-5);
}

.selected-card {
    border: 2px solid var(--mud-palette-primary);
    box-shadow: 0 0 15px var(--mud-palette-primary-lighten);
    transition: all 0.3s ease;
}

/* Dark Mode Text Color Overrides */
.mud-theme-dark {
    /* Override primary text color in dark mode */
    --mud-palette-text-primary: rgba(255, 255, 255, 0.95) !important;
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.7) !important;
}

.mud-theme-dark .mud-typography {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .mud-typography.mud-text-secondary {
    color: var(--mud-palette-text-secondary);
}

/* Specific overrides for headers and titles in dark mode */
.mud-theme-dark .mud-typography.mud-h5,
.mud-theme-dark .mud-typography.mud-h6 {
    color: var(--mud-palette-text-primary);
}

/* Field labels and values in dark mode */
.mud-theme-dark .mud-typography[class*="mud-primary-text"],
.mud-theme-dark .mud-typography.mud-primary-text {
    color: #A5D6FF !important;  /* Light blue tint */
}

/* Alternative colors for different types of fields (uncomment if you want to use them) */
.mud-theme-dark .mud-typography.mud-subtitle2[class*="mud-primary-text"] {
    color: #B4E6B4 !important;  /* Light green tint */
}

/* Optional: Style for the field values to ensure they're visible */
.mud-theme-dark .mud-typography.mud-body2 {
    color: rgba(255, 255, 255, 0.85) !important;
}