/* ================================================
   Universal Dialog Styles
   Consolidated styles for ALL dialogs in the application
   ================================================ */

/* ====== BASE DIALOG WRAPPER STYLES ====== */

/* Override MudBlazor's dialog width classes with higher specificity */
/* Standard dialog width - 900px */
/* Using !important only on width properties to override MudBlazor's inline styles */
.neo-dialog-wrapper {
    max-width: 900px !important;
    width: 900px !important;
    border-radius: 14px;
    overflow: visible !important; /* Allow dropdowns to extend beyond dialog */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Wider variant for dialogs with tabs - 50% wider than standard (900px -> 1350px) */
/* Using !important only on width properties to override MudBlazor's inline styles */
.neo-dialog-wrapper-tabbed {
    max-width: 1350px !important;
    width: 1350px !important;
    border-radius: 14px;
    overflow: visible !important; /* Allow dropdowns to extend beyond dialog */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.mud-dialog-container .neo-dialog-wrapper .mud-dialog-title,
.mud-dialog-container .neo-dialog-wrapper-tabbed .mud-dialog-title {
    padding: 18px 24px;
    font-weight: 700;
    font-size: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(to bottom, #ffffff, #fafafa);
    border-radius: 14px 14px 0 0; /* Rounded top corners */
    overflow: hidden; /* Prevent content from bleeding outside rounded corners */
}

/* Employee dialog: single scrollbar only when needed */
.employee-edit-dialog .neo-dialog-content {
    max-height: calc(90vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Location dialog: max-height with scrolling to prevent viewport overflow */
.location-edit-dialog .neo-dialog-content {
    max-height: calc(90vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Employee Deduction dialog: max-height with scrolling (Bug #12348) */
/* Fixes scrolling issue when tiered structure is enabled */
.employee-deduction-dialog .neo-dialog-content {
    max-height: calc(90vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Ensure the employee-deduction-dialog wrapper allows dropdowns to extend beyond bounds */
/* This fixes dropdown clipping/positioning issues in the dialog */
.employee-deduction-dialog {
    overflow: visible !important;
}

.employee-deduction-dialog .mud-dialog-content {
    overflow: visible !important;
}

.neo-dialog-actions {
    padding: 14px 24px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    border-radius: 0 0 14px 14px; /* Rounded bottom corners */
    overflow: hidden; /* Prevent content from bleeding outside rounded corners */
    box-shadow: none !important;
}

.mud-dialog-container .neo-dialog-actions {
    padding: 14px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    box-shadow: none;
}

/* Remove box shadow from action area */
.mud-dialog-container .neo-dialog-wrapper .mud-dialog-actions,
.mud-dialog-container .neo-dialog-wrapper-tabbed .mud-dialog-actions {
    box-shadow: none;
    background: transparent;
}

/* Button styling in actions */
.mud-dialog-container .neo-dialog-actions .mud-button {
    min-width: 100px;
}

.mud-dialog-container .neo-dialog-actions .mud-button-outlined {
    border-width: 1.5px;
}

/* ====== SECTION HEADERS ====== */

.mud-dialog-container .neo-section {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 12px;
    margin-top: 20px;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.mud-dialog-container .neo-section:first-child {
    margin-top: 0;
}

/* ====== STATUS COMPONENTS ====== */

.mud-dialog-container .neo-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f3f4f6;
    margin-bottom: 12px;
}

/* ====== FIELD HEIGHT STANDARDIZATION ====== */

/* MudSelect height standardization */
.mud-dialog-container .neo-dialog-content .mud-select .mud-input-root.mud-input-root-outlined,
.mud-dialog-container .neo-dialog-content .mud-form-control .mud-select .mud-input-root.mud-input-root-outlined {
    height: 48px;
    min-height: 48px;
}

/* Ensure the select input container matches text field heights */
.mud-dialog-container .neo-dialog-content .mud-select .mud-select-input,
.mud-dialog-container .neo-dialog-content .mud-form-control .mud-select .mud-select-input {
    height: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* Ensure text fields also have consistent height */
.mud-dialog-container .neo-dialog-content .mud-input .mud-input-root.mud-input-root-outlined,
.mud-dialog-container .neo-dialog-content .mud-form-control .mud-input .mud-input-root.mud-input-root-outlined {
    height: 48px;
    min-height: 48px;
}

/* ====== BULK IMPORT DIALOG SPECIFIC ====== */

.bulk-import-section {
    margin-bottom: 24px;
}

.bulk-import-section h6 {
    color: #1f2937;
    margin-bottom: 8px;
    font-weight: 600;
}

.file-info {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.sample-data {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    background: #f3f4f6;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
}

.column-mapping-header {
    background: #f9fafb;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* ====== EXCHANGE RATE DIALOG SPECIFIC ====== */

.rate-input .mud-input-adornment {
    font-weight: 500;
    color: #6b7280;
}

.calculated-value {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 12px;
    border-radius: 8px;
    margin-top: 16px;
}

.calculated-value .mud-typography {
    color: #075985;
}

/* ====== POSITION DIALOG SPECIFIC ====== */

.field-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 12px;
}

.status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #f3f4f6;
    border-radius: 8px;
    margin-bottom: 12px;
}

.status-toggle.active {
    background: #d1fae5;
}

.status-toggle.inactive {
    background: #fee2e2;
}

.status-toggle.eligible {
    background: #dbeafe;
}

.status-toggle.not-eligible {
    background: #f3f4f6;
}

.position-preview {
    background: #fafafa;
    border: 1px dashed #d1d5db;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
}

.position-info-card {
    background: #f9fafb;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* ====== QUICK SETUP DIALOG SPECIFIC ====== */

.account-group-paper {
    background-color: var(--mud-palette-background-grey);
}

/* ====== EXTERNAL SYSTEM DIALOG SPECIFIC ====== */

.external-system-container {
    max-height: 500px;
    overflow-y: auto;
}

/* ====== LOGIN DIALOG SPECIFIC ====== */

.login-info-table {
    font-size: 0.8rem;
}

/* ====== UNMAPPED ACCOUNTS DIALOG SPECIFIC ====== */

.unmapped-accounts-container {
    max-height: 600px;
    overflow-y: auto;
}

/* ====== COMMON DIALOG CONTAINERS ====== */

.full-width-container {
    max-width: 100%;
}

/* ====== TABLE COLUMN STYLES ====== */

.actions-column {
    width: 100px;
}

/* ====== UTILITIES ====== */

.flex-grow-1 {
    flex-grow: 1 !important;
}

.divider-vertical {
    width: 1px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    margin: 0 20px !important;
}

.v-divider {
    width: 1px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    margin: 0 20px !important;
}

.text-muted {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
}

.mt-2 {
    margin-top: 8px !important;
}

.mt-3 {
    margin-top: 12px !important;
}

.mt-4 {
    margin-top: 16px !important;
}

.mb-2 {
    margin-bottom: 8px !important;
}

.mb-3 {
    margin-bottom: 12px !important;
}

.mb-4 {
    margin-bottom: 16px !important;
}

/* ====== TABLE HEADER FIX ====== */

/* Fix for Employee List page table headers - make backgrounds transparent to show gradient */
.mud-table-container .mud-table-head .mud-table-row {
    background: transparent !important;
}

.mud-table-container .mud-table-head .mud-table-cell {
    background: transparent !important;
}

/* Fix for Employee Dialog table headers (Emergency Contacts) */
.employee-edit-dialog .mud-table-head .mud-table-row {
    background: transparent !important;
}

.employee-edit-dialog .mud-table-head .mud-table-cell {
    background: transparent !important;
}

/* Ensure fixed headers stay on top */
.mud-table-container .mud-table-head {
    position: sticky !important;
    top: 0 !important;
}

/* ====== DEFECT-12094: TRANSPARENT OVERLAY FOR NESTED DIALOGS ====== */
/* When showing a confirmation dialog on top of another dialog,
   the second overlay should be lighter to prevent double-dark effect.
   MudBlazor renders overlays in the .mud-overlay-handler container,
   and subsequent dialogs create additional overlays that stack. */

/* Target nested overlays - when there's already a dialog open,
   additional overlays should be lighter */
.mud-overlay-handler > .mud-overlay ~ .mud-overlay {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Also provide the manual class for explicit use */
.mud-overlay-transparent-background {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Ensure the warning dialog content is properly styled */
.rule-deactivation-warning .mud-list-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ====== RESPONSIVE ADJUSTMENTS ====== */

@media (max-width: 600px) {
    .neo-dialog-wrapper,
    .neo-dialog-wrapper-tabbed {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .mud-dialog-container .neo-dialog-content {
        padding: 16px;
    }

    .mud-dialog-container .neo-dialog-actions {
        padding: 12px 16px;
    }
}