/*
        ============================================================
        LONG TERM PAGE
        ============================================================
        */

        .long-term-intro {
            margin-bottom: 25px;
        }


        /*
        ============================================================
        SUMMARY CARDS
        ============================================================
        */

        .long-term-summary {
            display: grid;
            grid-template-columns:
                repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }


        .long-term-summary-card {
            background: #ffffff;
            border: 1px solid #e5e7ef;
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }


        .long-term-summary-title {
            font-size: 14px;
            font-weight: 600;
            color: #555;
            margin-bottom: 5px;
        }


        .long-term-summary-capacity {
            font-size: 13px;
            color: #777;
        }


        .long-term-summary-peak {
            font-size: 28px;
            font-weight: 700;
            color: #161b4e;
            margin: 8px 0;
        }


        .long-term-summary-status {
            font-size: 13px;
            font-weight: 600;
        }


        .summary-green {
            color: #2f7d32;
        }


        .summary-orange {
            color: #9c6500;
        }


        .summary-red {
            color: #c62828;
        }


        /*
        ============================================================
        PRESSURE TABLE
        ============================================================
        */

        .long-term-pressure-table {
            width: 100%;
            border-collapse: collapse;
        }


        .long-term-pressure-table th,
        .long-term-pressure-table td {
            padding: 12px 14px;
            text-align: left;
            border-bottom: 1px solid #eeeeee;
        }


        .long-term-pressure-table th {
            font-size: 13px;
            font-weight: 600;
            color: #555;
        }


        .long-term-pressure-table td {
            font-size: 14px;
        }


        /*
        ============================================================
        YEAR SECTIONS
        ============================================================
        */

        .long-term-year {
            margin-bottom: 20px;
            border: 1px solid #e5e7ef;
            border-radius: 12px;
            background: #ffffff;
            overflow: hidden;
        }


        .long-term-year-header {
            background: #f6f7fb;
            padding: 14px 18px;
            border-bottom: 1px solid #e5e7ef;
        }


        .long-term-year-header h3 {
            margin: 0;
            color: #161b4e;
            font-size: 18px;
        }


        .long-term-year-header small {
            color: #777;
            font-weight: 400;
        }


        /*
        ============================================================
        YEAR TABLE
        ============================================================
        */

        .long-term-year-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }


        .long-term-year-table th,
        .long-term-year-table td {
            padding: 10px 8px;
            text-align: center;
            border-bottom: 1px solid #eeeeee;
        }


        .long-term-year-table tr:last-child td {
            border-bottom: none;
        }


        .long-term-year-table th {
            font-size: 12px;
            color: #555;
            font-weight: 600;
            background: #ffffff;
        }


        .long-term-year-table th:first-child,
        .long-term-year-table td:first-child {
            text-align: left;
            width: 115px;
        }


        .long-term-year-table td {
            font-size: 15px;
            font-weight: 600;
        }


        .long-term-term-name {
            color: #161b4e;
            font-weight: 600;
        }


        .long-term-term-date {
            display: block;
            font-size: 11px;
            color: #888;
            font-weight: 400;
            margin-top: 2px;
        }


/*
============================================================
CAPACITY STATUS BUTTONS
============================================================
*/

.long-term-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 32px;

    padding: 0 12px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    box-sizing: border-box;
}


/*
------------------------------------------------------------
GREEN
Comfortably within capacity
------------------------------------------------------------
*/

.long-term-status-green {
    background: #d9f2df;
    color: #176b35;
    border: 1px solid #a8d8b4;
}


/*
------------------------------------------------------------
ORANGE
Only 1–2 spaces remaining
------------------------------------------------------------
*/

.long-term-status-orange {
    background: #fff0cf;
    color: #8a4b00;
    border: 1px solid #e5bd73;
}


/*
------------------------------------------------------------
RED
At or over capacity
------------------------------------------------------------
*/

.long-term-status-red {
    background: #fbdada;
    color: #a51d1d;
    border: 1px solid #e6a1a1;
}


/*
------------------------------------------------------------
INVALID
Calculation problem / negative number
------------------------------------------------------------
*/

.long-term-status-invalid {
    background: #ead1d5;
    color: #721c24;
    border: 1px solid #c98a93;
}


/*
------------------------------------------------------------
CAPACITY SHOWN UNDER HEADINGS
------------------------------------------------------------
*/

.long-term-cell-capacity {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #999;
    margin-top: 2px;
}


        /*
        ============================================================
        LEGEND
        ============================================================
        */

        .long-term-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            font-size: 13px;
            margin-top: 15px;
        }


        .long-term-legend span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }


        .legend-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            display: inline-block;
        }


        .legend-green {
    background: #176b35;
}


.legend-orange {
    background: #d97706;
}


.legend-red {
    background: #a51d1d;
}


.legend-warning {
    background: #721c24;
}

/* =========================================================
   LONG TERM YEAR TABS
========================================================= */

.long-term-year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.long-term-year-tab {
    border: 1px solid #d9dce8;
    background: #f5f6fa;
    color: #161b4e;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.long-term-year-tab:hover {
    background: #e9ebf3;
}

.long-term-year-tab.active {
    background: #161b4e;
    color: #ffffff;
    border-color: #161b4e;
}


/* =========================================================
   YEAR PANELS
========================================================= */

.long-term-year-panel {
    display: none;
}

.long-term-year-panel.active {
    display: block;
}


        /*
        ============================================================
        MOBILE
        ============================================================
        */

        @media (max-width: 800px) {

            .long-term-year-table {
                font-size: 12px;
            }

            .long-term-year-table th,
            .long-term-year-table td {
                padding: 8px 4px;
            }

            .long-term-year-table th:first-child,
            .long-term-year-table td:first-child {
                width: 90px;
            }

            .long-term-year-table td {
                font-size: 13px;
            }

        }