/* Essential Page Loading CSS - No Scroll Interference */

/* Make sure content is visible by default */
body {
    opacity: 1 !important;
}

/* Override any hidden content classes - EXCEPT modals and dialogs */
.page-content-fade:not(.year-dialog-overlay):not(.modal):not([class*="dialog"]),
.card-entrance:not(.year-dialog-overlay):not(.modal):not([class*="dialog"]),
.scroll-reveal:not(.year-dialog-overlay):not(.modal):not([class*="dialog"]):not(.professional-stat-card) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* Ensure modals and dialogs stay hidden by default */
.year-dialog-overlay,
.modal:not(.show),
[class*="dialog-overlay"]:not(.active),
[class*="modal-overlay"]:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Only show modals when they have active/show class */
.year-dialog-overlay.active,
.modal.show,
[class*="dialog-overlay"].active,
[class*="modal-overlay"].show {
    opacity: 1 !important;
    visibility: visible !important;
}

/* CRITICAL FIX: Ensure year dialog has proper positioning */
.year-dialog-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1050 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 60px 20px 20px !important;
    background: rgba(33, 150, 243, 0.1) !important;
    backdrop-filter: blur(2px) !important;
}

.year-dialog {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    max-width: 400px !important;
    width: 100% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    transform: translateY(-20px) scale(0.95) !important;
    transition: all 0.3s ease !important;
}

.year-dialog-overlay.active .year-dialog {
    transform: translateY(0) scale(1) !important;
}

.year-dialog-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px 16px !important;
    border-bottom: 1px solid #e9ecef !important;
}

.year-dialog-header h5 {
    margin: 0 !important;
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

.year-dialog-close {
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    color: #6c757d !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.year-dialog-close:hover {
    background: #f8f9fa !important;
    color: #343a40 !important;
}

.year-dialog-body {
    padding: 20px 24px 24px !important;
}

.year-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 8px !important;
}

.year-option {
    transition: all 0.2s ease !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    border: 1px solid #dee2e6 !important;
    background: white !important;
    cursor: pointer !important;
}

.year-option:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    background: #f8f9fa !important;
    border-color: #3b82f6 !important;
}

/* Ensure main containers are visible */
.container,
.container-fluid,
.dashboard-page,
.main-container,
.borrowings-main-container {
    opacity: 1 !important;
    transform: none !important;
}

/* Ensure all cards are visible */
.card,
.summary-card,
.dashboard-card,
.analysis-card,
.analytics-card,
.financial-card,
.chart-card {
    opacity: 1 !important;
    transform: none !important;
}