/* Global: suppress browser focus outlines for mouse/touch clicks.
   :focus-visible still applies for keyboard navigation (accessibility). */
*:focus:not(:focus-visible) {
    outline: none !important;
}

/* Blazor's FocusOnNavigate programmatically focuses h1 after navigation,
   adding tabindex="-1" and calling .focus(). Some browsers treat this as
   :focus-visible, showing a black outline/border on page load.
   Non-interactive elements should never show focus indicators. */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
p:focus, div:focus, span:focus, section:focus, article:focus, main:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

.chat-input-container {
    padding: 0.5rem;
}

@media (max-width: 600px) {
    .chat-input-container {
        padding: 0.25rem;
    }
}

.responsive-dialog {
    min-width: 60vw;
    max-width: 60vw;
    min-height: 40vw;
    max-height: 40vw;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
    .responsive-dialog {
        min-width: 90vw !important;
        max-width: 90vw !important;
        min-height: 80vh !important;
        max-height: 90vh !important;
    }
}

/* Map container styles */
.map-container {
    height: 100vh;
    position: sticky;
    top: 0;
}

@media (max-width: 960px) {
    .map-container {
        height: 300px;
        position: relative;
    }
}

/* Make cards responsive */
@media (max-width: 500px) {
    .listing-card {
        width: 100%;
    }
}

/* Ensure the grid items maintain the card size */
.listing-grid .mud-grid-item {
    display: flex;
    justify-content: center;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Z-index hierarchy for nested dialogs and overlays */
/* ListingOverlay backdrop: 2000 */
/* Mobile drawer needs to be above overlays but below dialogs */
/* Dialogs opened from overlay need higher z-index */

/* Mobile drawer - only elevate z-index on mobile devices */
/* Desktop drawers keep default MudBlazor z-index */
@media (max-width: 960px) {
    .mud-drawer {
        z-index: 2080 !important;
    }
    
    .mud-drawer-overlay {
        z-index: 2070 !important;
    }
}

.mud-dialog-container {
    z-index: 2100 !important;
    position: relative !important;
}

.mud-dialog {
    z-index: 2150 !important;
    position: relative !important;
}

.mud-dialog-surface {
    z-index: 2160 !important;
    position: relative !important;
}

/* Handle nested dialogs specifically */
.mud-dialog-container .mud-dialog-container {
    z-index: 2200 !important;
}

.mud-dialog-container .mud-dialog {
    z-index: 2250 !important;
}

.mud-dialog-container .mud-dialog-surface {
    z-index: 2260 !important;
}

/* MudSelect dropdowns in dialogs need even higher z-index */
.mud-popover-provider {
    z-index: 2300 !important;
}

.mud-popover {
    z-index: 2300 !important;
}

.mud-popover-open {
    z-index: 2300 !important;
}

.mud-select-popover {
    z-index: 2300 !important;
}

.mud-list {
    z-index: 2301 !important;
}

.mud-list-item {
    z-index: 2301 !important;
}

/* Ensure dialog overlays don't interfere with dropdowns */
.mud-overlay {
    z-index: 2050 !important;
}

/* Specific fix for report dialog backdrop */
.report-dialog-backdrop {
    z-index: 2150 !important;
}

/* Force MudSelect to render above all overlays and dialogs */
.mud-popover-provider,
.mud-popover,
.mud-popover-open,
.mud-select-popover {
    z-index: 9999 !important;
}

.mud-list,
.mud-list-item {
    z-index: 9999 !important;
}

/* Specific styling for report listing dialog */
.report-listing-dialog {
    z-index: 2500 !important;
    position: relative !important;
}

.report-listing-dialog .mud-dialog-surface {
    z-index: 2510 !important;
    position: relative !important;
}

.report-listing-dialog .mud-dialog-content {
    z-index: 2520 !important;
    position: relative !important;
}

/* Ensure the dialog container for report dialog is above everything */
.mud-dialog-container:has(.report-listing-dialog) {
    z-index: 2400 !important;
}

/* Alternative approach - force all dialog containers to be above backdrop */
.mud-dialog-container {
    z-index: 2100 !important;
    position: fixed !important;
}

.mud-dialog-container .mud-dialog {
    z-index: 2150 !important;
    position: relative !important;
}

/* Ensure overlays stay behind dialogs */
.mud-overlay {
    z-index: 2050 !important;
    position: fixed !important;
}