/* ===================================
   MudBlazor Dialog Specific Overrides
   Loaded after all other CSS for maximum specificity
   
   IMPORTANT: Aggressive positioning overrides are only applied during E2E testing
   to prevent interference with normal dialog functionality. E2E tests should set
   data-e2e-testing="true" on the body element to activate these styles.
   =================================== */

/* Reset any conflicting styles and establish proper z-index hierarchy */
/* Z-INDEX HIERARCHY:
   - Snackbar: 10200 (highest - above dialogs for error messages)
   - Dialog dropdowns: 10100 (above dialog container)
   - Dialog container: 10000 (above all page elements)
   - Dialog backdrop: 9900 (above all page elements)
   - App bar: 2000
   - Drawer: 1900
   - Page headers: 1700
   - Quick nav: 1650
   - Page dropdowns: 1600 (below headers when no dialog open)
*/
:root {
    --dialog-backdrop-z-index: 9900;
    --dialog-container-z-index: 10000;
    --dialog-dropdown-z-index: 10100;
    --snackbar-z-index: 10200;
    --dialog-header-gradient: linear-gradient(135deg, #333F4D 0%, #29ABE2 100%);
}

/* Snackbar z-index - ABOVE dialog container so error messages are visible */
.mud-snackbar-provider {
    z-index: var(--snackbar-z-index) !important;
}

/* ================================================
   DIALOG Z-INDEX FIX

   MudBlazor renders dialogs with this structure:
   - .mud-overlay.mud-overlay-dialog (backdrop)
   - .mud-dialog-container > .mud-dialog (the actual dialog)

   They're siblings, so we set BOTH to high z-index values,
   keeping the dialog container slightly higher than the overlay.
   ================================================ */

/* Dialog container - ABOVE all page elements */
.mud-dialog-container {
    z-index: 10000 !important;
}

/* Dropdown/popover overlays should be transparent (not the dark backdrop) */
.mud-overlay:not(.mud-overlay-dialog) {
    background-color: transparent !important;
}

/* Ensure scrim in non-dialog overlays is also transparent */
.mud-overlay:not(.mud-overlay-dialog) .mud-overlay-scrim {
    background-color: transparent !important;
}

/* Dialog container positioning - Only apply aggressive overrides during E2E testing */
body[data-e2e-testing="true"] .mud-dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 120px 20px 40px 20px; /* Top padding ensures dialog appears below navigation */
    overflow-y: auto;
}

/* Dialog box styling - Apply enhanced styling only during E2E testing */
body[data-e2e-testing="true"] .mud-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 160px);
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
    margin: 0;
}

/* Normal dialog box - let MudBlazor handle most styling */
body:not([data-e2e-testing="true"]) .mud-dialog {
    border-radius: 16px;
}

/* Dialog responsive width - Only for E2E testing */
body[data-e2e-testing="true"] .mud-dialog.dialog-responsive {
    width: 100%;
    max-width: 600px;
    min-width: 320px;
}

/* Dialog title styling - ensure white text on gradient background */
.mud-dialog .mud-dialog-title {
    background: var(--dialog-header-gradient) !important;
    color: #ffffff !important;
    padding: 16px 24px;
    margin: 0;
    border-radius: 16px 16px 0 0;
    position: relative;
    z-index: 2;
    min-height: 64px;
    display: flex;
    align-items: center;
}

/* Override any MudBlazor theme colors on dialog titles */
.mud-dialog-title.mud-dialog-title-primary,
.mud-dialog-title.mud-dialog-title-secondary,
.mud-dialog-title.mud-dialog-title-tertiary {
    background: var(--dialog-header-gradient) !important;
    color: #ffffff !important;
}

/* Ensure all text in dialog title is white - use !important to override any inline styles */
.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-title .mud-typography,
.mud-dialog .mud-dialog-title .mud-text,
.mud-dialog .mud-dialog-title h1,
.mud-dialog .mud-dialog-title h2,
.mud-dialog .mud-dialog-title h3,
.mud-dialog .mud-dialog-title h4,
.mud-dialog .mud-dialog-title h5,
.mud-dialog .mud-dialog-title h6,
.mud-dialog .mud-dialog-title p,
.mud-dialog .mud-dialog-title span,
.mud-dialog .mud-dialog-title * {
    color: #ffffff !important;
}

/* Specific targeting for MudText components with Typo="Typo.h6" */
.mud-dialog .mud-dialog-title .mud-typography-h6 {
    color: #ffffff !important;
}

/* Dialog content area */
.mud-dialog .mud-dialog-content {
    padding: 16px 20px;
    overflow: visible;
    flex: 1 1 auto;
}

/* Dialog actions/buttons area */
.mud-dialog .mud-dialog-actions {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 0 0 16px 16px;
}

/* ===================================
   MudBlazor Input Styling for Dialogs - Simplified
   =================================== */

/* Base input styling for all inputs in dialogs */
.mud-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: #bdbdbd;
}

.mud-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #757575;
}

.mud-dialog .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #EF7B05;
    border-width: 2px;
}

/* Simple color styling for labels - let MudBlazor handle positioning */
.mud-dialog .mud-input-label {
    color: var(--color-secondary-gray);
}

.mud-dialog .mud-focused .mud-input-label {
    color: var(--color-primary-orange);
}

/* MudSelect fix is now in app.css and applies globally */

/* Button styling in dialogs */
.mud-dialog .mud-button {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Cancel button specific styling */
.mud-dialog .mud-button-text-secondary {
    color: #757575;
}

.mud-dialog .mud-button-text-secondary:hover {
    background-color: rgba(117, 117, 117, 0.04);
}

/* Primary action button */
.mud-dialog .mud-button-filled-primary {
    background-color: #EF7B05;
    color: #ffffff;
}

.mud-dialog .mud-button-filled-primary:hover {
    background-color: #d86e05;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .mud-dialog-container {
        padding: 80px 10px 20px 10px;
    }
    
    .mud-dialog.dialog-responsive {
        min-width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }
    
    .mud-dialog .mud-dialog-title {
        padding: 12px 16px;
        min-height: 56px;
    }
    
    .mud-dialog .mud-dialog-content {
        padding: 16px;
    }
    
    .mud-dialog .mud-dialog-actions {
        padding: 12px 16px;
    }
}

/* Dark theme support */
[data-theme="dark"] .mud-dialog {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

[data-theme="dark"] .mud-dialog .mud-dialog-title {
    background: linear-gradient(135deg, #1a1f2e 0%, #1e3a5f 100%);
}

[data-theme="dark"] .mud-dialog .mud-dialog-actions {
    background-color: #2a2a2a;
    border-top-color: #3a3a3a;
}

[data-theme="dark"] .mud-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: #555555;
}

[data-theme="dark"] .mud-dialog .mud-input-label {
    background-color: #1e1e1e;
    color: #b0b0b0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mud-dialog .mud-dialog-title {
        background: #333F4D;
        border: 2px solid #ffffff;
    }
    
    .mud-dialog {
        border: 2px solid #000000;
    }
}

/* Animation for dialog appearance */
.mud-dialog {
    animation: dialog-appear 0.3s ease-out;
}

@keyframes dialog-appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Ensure dialog close button is visible */
.mud-dialog .mud-dialog-title .mud-button-icon {
    color: #ffffff;
}

.mud-dialog .mud-dialog-title .mud-button-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
}