/* =================================
   PORTFOLIO-TABLES.CSS - CLEAN VERSION
   ================================= */

/* CLS Fix: Static height reservation */
.main-container {
    min-height: 1200px !important;
    transition: none !important;
}

/* Modal z-index fix */
div[style*="position: fixed"][style*="zIndex"] {
    z-index: 99999 !important;
}

/* Prevent layout shifts */
* {
    transition: none !important;
}

/* Allow only safe opacity transitions */
.fade-in {
    transition: opacity 0.3s ease !important;
}

/* =================================
   1. RESPONSIVE DESIGN
   ================================= */
@media (min-width: 1200px) {
    .portfolio-table-container {
        overflow-x: auto;
    }

    .portfolio-table {
        min-width: 100%;
    }

        .portfolio-table th.age-header,
        .portfolio-table th.year-header {
            width: 70px !important;
        }
}

@media (hover: none) {
    .tooltip-content {
        display: none !important;
    }

    .tooltip-container.active > .tooltip-content {
        display: block !important;
    }
}

.freedom-score-container {
    min-height: 180px;
}

.descriptions-section {
    min-height: 500px; /* Reserve space for description sections */
}

/* 7. SKELETON/PLACEHOLDER CONSISTENCY */
.skeleton-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* 10. CRITICAL: Prevent any transforms or transitions that cause shifts */
/*
*:not(.freedom-score-panel *) {
    transform: none !important;
    transition: none !important;
}
*/

body *:not(.freedom-score-panel):not(.freedom-score-panel *) {
    transform: none !important;
    transition: none !important;
}

/* Allow only safe transitions */
.fade-in {
    transition: opacity 0.3s ease !important;
    transform: none !important;
}

/* =================================
   2. BASE TABLE STYLING
   ================================= */
.portfolio-table {
    width: 100% !important;
    max-width: 1000px !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 auto !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    overflow: visible !important;
}

.portfolio-table-container {
    min-height: 400px; /* Reserve space for table */
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

/* =================================
   3. CELL STYLING
   ================================= */
.portfolio-table td,
.portfolio-table th {
    box-sizing: border-box !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

    .portfolio-table td *,
    .portfolio-table th * {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* =================================
   4. TEXT ALIGNMENT
   ================================= */
    .portfolio-table td:nth-child(1), /* Age */
    .portfolio-table td:nth-child(2), /* Year */
    .portfolio-table td:last-child { /* Status */
        text-align: center !important;
    }

    .portfolio-table td:nth-child(3), /* Net Worth */
    .portfolio-table td:nth-child(4), /* Income */
    .portfolio-table td:nth-child(5), /* Expenses/Savings in recovery */
    .portfolio-table td:nth-child(6), /* Taxes/Expenses in recovery */
    .portfolio-table td:nth-child(7), /* Net Income */
    .portfolio-table td:nth-child(8), /* Investment Return */
    .portfolio-table td:nth-child(9) { /* Funded Ratio */
        text-align: right !important;
    }

/* =================================
   5. STATUS DISPLAY
   ================================= */
.status-display {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 1px 2px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.status-icon {
    font-size: 12px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.status-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
    flex: 1 !important;
    line-height: 1 !important;
}

/* =================================
   6. TOOLTIP POSITIONING
   ================================= */
.portfolio-table .tooltip-container {
    position: relative !important;
    z-index: 1000 !important;
    flex-shrink: 0 !important;
}

@media (max-width: 1200px) {
    .portfolio-table .tooltip-content {
        right: auto !important;
        left: 50% !important;
        top: 100% !important;
        transform: translateX(-50%) translateY(5px) !important;
        margin-right: 0 !important;
        margin-top: 5px !important;
    }
}

@media (min-width: 1200px) {
    .portfolio-table .tooltip-content {
        left: auto !important;
        right: 100% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-right: 8px !important;
    }
}

/* =================================
   7. ROW STYLING
   ================================= */
.portfolio-table tr {
    height: 32px !important;
}

/* =================================
   8. CHART CONTAINER
   ================================= */
.chart-section {
    min-height: 1200px; /* Reserve space for chart and components */
    position: relative;
    overflow: visible;
}

#chart-container {
    position: relative;
    width: 100%;
    max-width: 940px;
    min-height: 470px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
    display: block;
    background: transparent;
    padding: 0;
    z-index: 1;
}

.chart-outer-container {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    z-index: 1 !important;
}

/* =================================
   9. MAIN CONTAINER - SIMPLIFIED
   ================================= */
.main-container {
    max-width: 80rem;
    width: 100%;
    /* CRITICAL: Reserve minimum space */
    min-height: 1400px;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    transition: none;
    overflow: visible;
}

    /* LOADING STATE - Must match final container exactly */
    .main-container.loading {
        min-height: 1400px;
        background: #f8f9fa;
        border-radius: 8px;
    }

/* =================================
   10. FOOTER - SIMPLIFIED
   ================================= */
footer-links-section {
    width: 100%;
    margin: 0 auto;
    position: relative;
    transition: none;
    clear: both;
    /* CRITICAL: Don't let it float or overlay */
    z-index: 1;
    margin-top: 40px; /* Space from main content */
}

/* =================================
   11. BODY - SIMPLIFIED
   ================================= */
body {
    overflow-x: auto;
    background: white;
    /* CRITICAL: Prevent zoom-induced shifts */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}

body {
    overflow-x: auto;
    background: white;
}

/* 6. PREVENT FONT-INDUCED SHIFTS */
body, .main-container {
    font-display: swap;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* =================================
   12. BUTTON STYLING
   ================================= */
.flex.justify-end.w-full button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: 0 !important;
    font-size: 14px !important;
    flex-shrink: 1 !important;
}

/* =================================
   13. LOADING STATES
   ================================= */
.loading-state {
    width: 100%;
    max-width: 80rem;
    min-height: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
}

/* =================================
   14. COLLAPSIBLE CONTENT
   ================================= */
.collapsible-content {
    transition: opacity 0.3s ease !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}

    .collapsible-content:not(.expanded) {
        display: none !important;
    }

    .collapsible-content.expanded {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

/* =================================
   16. CANVAS FIXES
   ================================= */
canvas.h-full.w-full {
    max-width: 940px !important;
    max-height: 470px !important;
    transition: none !important;
    animation: none !important;
}

/* =================================
   17. RESPONSIVE FIXES
   ================================= */
/* 9. RESPONSIVE SPACE RESERVATION */
@media (max-width: 768px) {
    .main-container {
        min-height: 1200px; /* Smaller on mobile */
        padding: 0 16px;
    }

    .chart-section {
        min-height: 1000px;
    }
}

@media (max-width: 480px) {
    .main-container {
        min-height: 1000px;
        padding: 0 12px;
    }

    .chart-section {
        min-height: 900px;
    }

    .footer-links-section {
        width: 100% !important;
    }
}

/* =================================
   MODAL BUTTONS
   ================================= */

/* Add this to your CSS */
.modal-button-small {
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
}

/* =================================
   18. PREVENT SPECIFIC LAYOUT SHIFTS
   ================================= */
.form-container {
    transition: none !important;
}

/* PREVENT DYNAMIC CONTENT SHIFTS */
.expandable-section,
.collapsible-content {
    /* Use opacity instead of height changes */
    transition: opacity 0.3s ease !important;
    max-height: none !important;
    overflow: visible !important;
}

    .collapsible-content:not(.expanded) {
        display: none !important;
    }

    .collapsible-content.expanded {
        display: block !important;
        opacity: 1 !important;
    }

/* 14. PREVENT SCRIPT-INDUCED SHIFTS */
.dynamic-content {
    /* Reserve space for any dynamic content */
    min-height: 100px;
    position: relative;
}

/* 15. CRITICAL: Ensure consistent box model */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* =================================
   19. CLEANUP
   ================================= */
* {
    box-sizing: border-box;
}

/* 12. IMAGE SPACE RESERVATION */
img {
    /* Prevent image load causing layout shift */
    max-width: 100%;
    height: auto;
    /* Reserve space if dimensions are known */
    aspect-ratio: attr(width) / attr(height);
}

/* =================================
   20. ANIMATION FIXES
   ================================= */
.animate-pulse {
    animation: none !important; /* Remove pulse animation */
    transition: none !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =================================
   21. HTML/VIEWPORT STABILITY
   ================================= */
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    /* Stable viewport */
    overflow-x: hidden;
}