.loadScreen-fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.loadScreen-fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.loadScreen-initial-hidden {
    opacity: 0;
    visibility: hidden;
}
@media (max-width: 600px) {
    #headerDLEText {
        display: none;
    }
    #UserSearchRole{
        width:90px;
    }
    #UserSearch2 {
        width: 70px;
    }
    #AuditListViewStyle{
        min-width:60px;
    }
    #AuditSearch1 {
        width: 50px;
    }
    #AuditSearch2{
        width:50px;
    }
    #LogsListView1 {
        min-width: 60px;
    }
    #LogSearch1{
        width:90px;
    }
    #LogSearch2 {
        min-width: 30px;
    }
}

@media (min-width: 601px) {
    #headerDLEText {
        display: inline;
        font-size: 17px;
        font-weight: bold;
        padding: 10px;
        background-color: #cd0909;
        color: white;
        border-radius: 5px;
    }
    #UserSearchRole {
        width: 150px;
    }
    #UserSearch2 {
        width:150px;
    }
    #AuditListViewStyle {
        min-width: 200px;
    }
    #AuditSearch1 {
        width: 150px;
    }
    #AuditSearch2 {
        width: 100px;
    }
    #LogsListView1 {
        min-width: 200px;
    }
    #LogSearch1 {
        width: 150px;
    }

    #LogSearch2 {
        min-width: 200px;
    }
}

/* Fix for MudBlazor date picker cut-off issues on small screens */
.mud-picker-dialog {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.mud-dialog-container {
    overflow-y: auto !important;
}

/* Adjust for small screens */
@media (max-width: 768px) {
    .mud-picker-dialog {
        max-height: 80vh !important;
        margin: 20px !important;
    }

    .mud-picker-calendar-container {
        max-height: 400px;
        overflow-y: auto;
    }
}

/* Blog Tagging Module Mobile Responsiveness */
@media (max-width: 600px) {
    /* Make card content stack properly on mobile */
    .blog-card-header .mud-stack-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Adjust card action buttons for mobile */
    .blog-card-actions .mud-button {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    .blog-card-actions .mud-button-label {
        display: none;
    }

    .blog-card-actions .mud-icon-button {
        width: 32px !important;
        height: 32px !important;
    }

    /* Ensure text wraps properly */
    .blog-card-content .mud-text {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Header buttons stack vertically */
    .blog-header-actions {
        width: 100%;
    }

    .blog-header-actions .mud-button-label {
        font-size: 0.875rem;
    }

    /* Blog Template Page Header - Mobile responsive */
    .blog-template-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .blog-template-header-actions {
        width: 100%;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .blog-template-header-actions .mud-button {
        width: 100%;
        justify-content: center;
    }

    /* Make button text smaller on mobile */
    .blog-template-header .mud-button-label {
        font-size: 0.875rem;
    }

    /* Reduce icon button size on mobile header */
    .blog-template-header .mud-icon-button {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 768px) {
    /* Adjust form tabs for tablet/mobile */
    .mud-tabs .mud-tab {
        font-size: 0.875rem !important;
        padding: 8px 12px !important;
    }

    .mud-tabs .mud-icon-root {
        font-size: 1.25rem !important;
    }

    /* Ensure form fields are full width on smaller screens */
    .mud-grid-item.mud-grid-item-xs-12 {
        width: 100% !important;
    }

    /* JSON-LD preview scrolling */
    .blog-jsonld-preview pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
    }
}

@media (min-width: 601px) and (max-width: 960px) {
    /* Tablet optimizations */
    .blog-card-actions .mud-stack-row {
        justify-content: space-between;
    }
}