/* =====================================================
   Finance Assistant
   Page        : Financial
   Module      : Summary
   File        : summary.css
   Version     : 1.2.0

   Description :
   Financial Summary Styling

   Theme Aware :
   - Light
   - Dark
   - Green
   - Pink
===================================================== */


/* =====================================================
   OVERVIEW
===================================================== */

#summary-overview-card{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:20px;

    overflow:hidden;

}


/* =====================================================
   OVERVIEW : BALANCE
===================================================== */

.financial-overview-balance{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    padding:22px;

    box-sizing:border-box;

    border-radius:20px;

    background:var(--surface);

    text-align:center;

}


/* =====================================================
   BALANCE LABEL
===================================================== */

.financial-overview-label{

    color:var(--text-secondary);

    font-size:14px;

    line-height:1.35;

    font-weight:600;

}


/* =====================================================
   BALANCE VALUE
===================================================== */

.financial-overview-balance-value{

    color:var(--text);

    font-size:30px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.4px;

    word-break:break-word;

}


/* =====================================================
   OVERVIEW : MONTHLY GRID
===================================================== */

.financial-overview-monthly{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:12px;

}


/* =====================================================
   MONTHLY ITEM
===================================================== */

.financial-overview-item{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-width:0;

    min-height:88px;

    padding:16px;

    box-sizing:border-box;

    border-radius:18px;

    background:var(--surface);

}


/* =====================================================
   MONTHLY LABEL
===================================================== */

.financial-overview-item span{

    display:block;

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.35;

    font-weight:600;

}


/* =====================================================
   MONTHLY VALUE
===================================================== */

.financial-overview-item strong{

    display:block;

    margin-top:10px;

    color:var(--text);

    font-size:18px;

    line-height:1.25;

    font-weight:700;

    word-break:break-word;

}


/* =====================================================
   FINANCIAL POSITION
===================================================== */

#summary-financial-position-card{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:14px;

}


/* =====================================================
   POSITION CARD
===================================================== */

.financial-position-card{

    display:flex;

    flex-direction:column;

    gap:14px;

    min-width:0;

    padding:18px;

    box-sizing:border-box;

    border-radius:18px;

    background:var(--surface);

}


/* =====================================================
   POSITION HEADER
===================================================== */

.financial-position-header{

    display:flex;

    align-items:center;

    gap:10px;

}


.financial-position-header strong{

    color:var(--text);

    font-size:17px;

    line-height:1.3;

    font-weight:700;

}


/* =====================================================
   SAVING IMAGE
===================================================== */

.financial-position-icon{

    width:44px;

    height:44px;

    object-fit:contain;

    flex-shrink:0;

}


/* =====================================================
   SAVING TOTAL
===================================================== */

.financial-position-value{

    color:var(--text);

    font-size:22px;

    line-height:1.25;

    font-weight:800;

}


/* =====================================================
   LAST TRANSACTION
===================================================== */

.financial-position-last{

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.4;

}


/* =====================================================
   DEBT & LENDING
===================================================== */

.debt-card{

    grid-column:auto;

}


/* =====================================================
   DEBT EMOJI
===================================================== */

.financial-position-emoji{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    flex-shrink:0;

    font-size:38px;

    line-height:1;

}


/* =====================================================
   DEBT ROW
===================================================== */

.financial-position-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}


.financial-position-row span{

    color:var(--text-secondary);

    font-size:13px;

}


.financial-position-row strong{

    color:var(--text);

    font-size:16px;

    font-weight:700;

    text-align:right;

}


/* =====================================================
   DISTRIBUTION
===================================================== */

#summary-distribution-card{

    position:relative;

    width:100%;

    box-sizing:border-box;

    padding:28px 22px 30px;

}


/* =====================================================
   DISTRIBUTION : DONUT
===================================================== */

#summary-distribution-chart{

    display:block;

    width:100% !important;

    height:320px !important;

    max-height:320px;

    margin:0 auto 18px;

}


/* =====================================================
   DISTRIBUTION : LIST
===================================================== */

#summary-distribution-list{

    display:flex;

    flex-direction:column;

    width:100%;

    gap:0;

}


/* =====================================================
   DISTRIBUTION : GROUP
===================================================== */

.distribution-group{

    display:flex;

    flex-direction:column;

    width:100%;

    gap:16px;

}


/* =====================================================
   GROUP TITLE
===================================================== */

.distribution-group-title{

    margin:0;

    color:var(--text);

    font-size:16px;

    line-height:1.3;

    font-weight:800;

}


/* =====================================================
   DISTRIBUTION ITEM
===================================================== */

.distribution-item{

    display:flex;

    flex-direction:column;

    width:100%;

    gap:7px;

}


/* =====================================================
   ITEM HEADER
===================================================== */

.distribution-item-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    width:100%;

}


.distribution-item-header span{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text);

    font-size:16px;

    line-height:1.3;

    font-weight:600;

}


.distribution-item-header strong{

    flex-shrink:0;

    color:var(--text);

    font-size:16px;

    line-height:1.3;

    font-weight:700;

    text-align:right;

    white-space:nowrap;

}


/* =====================================================
   DISTRIBUTION : BAR TRACK
===================================================== */

.distribution-bar-track{

    width:100%;

    height:9px;

    overflow:hidden;

    border-radius:999px;

    background:
        var(
            --surface-secondary,
            #e8edf5
        );

}


/* =====================================================
   DISTRIBUTION : BAR FILL
===================================================== */

.distribution-bar-fill{

    width:0;

    height:100%;

    min-width:2px;

    border-radius:999px;

    transition:
        width .5s ease;

}


/* =====================================================
   INCOME BAR
===================================================== */

.distribution-bar-fill.income{

    background:
        var(
            --success,
            #16a34a
        );

}


/* =====================================================
   EXPENSE BAR
===================================================== */

.distribution-bar-fill.expense{

    background:
        var(
            --danger,
            #dc2626
        );

}


/* =====================================================
   DISTRIBUTION : DIVIDER
===================================================== */

.distribution-divider{

    width:100%;

    height:1px;

    margin:18px 0;

    background:
        var(
            --border-color,
            #e5e7eb
        );

}


/* =====================================================
   DISTRIBUTION : EMPTY
===================================================== */

.distribution-empty{

    padding:30px 10px;

    color:var(--text-secondary);

    font-size:14px;

    text-align:center;

}


/* =====================================================
   FINANCIAL ANALYSIS
===================================================== */

#summary-financial-analysis{

    width:100%;

    margin-top:32px;

}


/* =====================================================
   ANALYSIS CARD
===================================================== */

#summary-financial-analysis-card{

    display:flex;

    flex-direction:column;

    width:100%;

    padding:20px;

    box-sizing:border-box;

    border-radius:20px;

    background:var(--surface);

}


/* =====================================================
   ANALYSIS SEARCH
===================================================== */

.financial-analysis-search{

    display:flex;

    flex-direction:column;

    gap:8px;

    width:100%;

    margin-bottom:18px;

}


/* =====================================================
   SEARCH LABEL
===================================================== */

.financial-analysis-search label{

    color:var(--text);

    font-size:14px;

    line-height:1.3;

    font-weight:700;

}


/* =====================================================
   SEARCH BOX
===================================================== */

.financial-analysis-search-box{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    min-height:46px;

    padding:0 14px;

    box-sizing:border-box;

    border:1px solid
        var(
            --border-color,
            #dfe4ec
        );

    border-radius:14px;

    background:
        var(
            --surface-secondary,
            #f8fafc
        );

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


/* =====================================================
   SEARCH ICON
===================================================== */

.financial-analysis-search-box
.material-symbols-rounded{

    flex-shrink:0;

    color:var(
        --text-secondary,
        #64748b
    );

    font-size:22px;

}


/* =====================================================
   SEARCH INPUT
===================================================== */

#financial-analysis-search-input{

    width:100%;

    min-width:0;

    height:44px;

    padding:0;

    border:0;

    outline:none;

    background:transparent;

    color:var(--text);

    font-size:14px;

    font-weight:500;

}


#financial-analysis-search-input::placeholder{

    color:
        var(
            --text-secondary,
            #94a3b8
        );

    opacity:.8;

}


/* =====================================================
   SEARCH FOCUS
===================================================== */

.financial-analysis-search-box:focus-within{

    border-color:
        var(
            --primary,
            #2563eb
        );

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.10);

}


/* =====================================================
   ANALYSIS CONTENT
===================================================== */

.financial-analysis-content{

    display:grid;

    grid-template-columns:
        minmax(
            0,
            1.7fr
        )
        minmax(
            260px,
            .9fr
        );

    gap:20px;

    width:100%;

}


/* =====================================================
   ANALYSIS SUBTITLE
===================================================== */

.financial-analysis-subtitle{

    margin:0 0 12px;

    color:var(--text);

    font-size:15px;

    line-height:1.3;

    font-weight:800;

}


/* =====================================================
   ANALYSIS CHART CONTAINER
===================================================== */

.financial-analysis-chart-container{

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:18px;

    box-sizing:border-box;

    border:1px solid
        var(
            --border-color,
            #e5e7eb
        );

    border-radius:18px;

    background:
        var(
            --surface-secondary,
            #f8fafc
        );

}


/* =====================================================
   ANALYSIS CHART WRAPPER
===================================================== */

.financial-analysis-chart-wrapper{

    position:relative;

    width:100%;

    height:300px;

    min-height:300px;

}


/* =====================================================
   ANALYSIS CHART
===================================================== */

#financial-analysis-chart{

    display:block;

    width:100% !important;

    height:100% !important;

}


/* =====================================================
   TRENDING
===================================================== */

.financial-analysis-trending{

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:18px;

    box-sizing:border-box;

    border:1px solid
        var(
            --border-color,
            #e5e7eb
        );

    border-radius:18px;

    background:
        var(
            --surface-secondary,
            #f8fafc
        );

}


/* =====================================================
   TRENDING LIST
===================================================== */

.financial-analysis-trending-list{

    display:flex;

    flex-direction:column;

    gap:9px;

    width:100%;

}


/* =====================================================
   TRENDING ITEM
===================================================== */

.financial-analysis-trending-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    width:100%;

    min-width:0;

    padding:12px;

    box-sizing:border-box;

    border:1px solid
        var(
            --border-color,
            #e5e7eb
        );

    border-radius:13px;

    background:var(--surface);

}


/* =====================================================
   TRENDING INFO
===================================================== */

.financial-analysis-trending-info{

    display:flex;

    flex-direction:column;

    gap:3px;

    min-width:0;

}


.financial-analysis-trending-date{

    color:var(--text);

    font-size:13px;

    line-height:1.3;

    font-weight:700;

}


.financial-analysis-trending-weekday{

    color:var(--text-secondary);

    font-size:11px;

    line-height:1.3;

}


/* =====================================================
   TRENDING AMOUNT
===================================================== */

.financial-analysis-trending-amount{

    flex-shrink:0;

    color:var(--text);

    font-size:13px;

    line-height:1.3;

    font-weight:800;

    text-align:right;

    white-space:nowrap;

}


/* =====================================================
   ANALYSIS RESULTS
===================================================== */

.financial-analysis-results{

    display:flex;

    flex-direction:column;

    width:100%;

    margin-top:20px;

}


/* =====================================================
   RESULT INFO
===================================================== */

.financial-analysis-result-info{

    margin-bottom:10px;

    color:var(--text-secondary);

    font-size:12px;

    line-height:1.4;

}


/* =====================================================
   RESULT LIST
===================================================== */

.financial-analysis-result-list{

    display:flex;

    flex-direction:column;

    gap:9px;

    width:100%;

}


/* =====================================================
   RESULT ITEM
===================================================== */

.financial-analysis-result-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    width:100%;

    min-width:0;

    padding:14px 16px;

    box-sizing:border-box;

    border:1px solid
        var(
            --border-color,
            #e5e7eb
        );

    border-radius:15px;

    background:var(--surface);

    transition:
        background .2s ease,
        border-color .2s ease;

}


/* =====================================================
   RESULT ITEM : INFO
===================================================== */

.financial-analysis-result-info-group{

    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:0;

}


/* =====================================================
   RESULT DATE
===================================================== */

.financial-analysis-result-date{

    color:var(--text-secondary);

    font-size:11px;

    line-height:1.3;

}


/* =====================================================
   RESULT ACTIVITY
===================================================== */

.financial-analysis-result-activity{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text);

    font-size:14px;

    line-height:1.35;

    font-weight:700;

}


/* =====================================================
   RESULT NOTE
===================================================== */

.financial-analysis-result-note{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text-secondary);

    font-size:12px;

    line-height:1.35;

}


/* =====================================================
   RESULT AMOUNT
===================================================== */

.financial-analysis-result-amount{

    flex-shrink:0;

    font-size:14px;

    line-height:1.3;

    font-weight:800;

    text-align:right;

    white-space:nowrap;

}


/* =====================================================
   RESULT INCOME
===================================================== */

.financial-analysis-result-item.income
.financial-analysis-result-amount{

    color:
        var(
            --success,
            #16a34a
        );

}


/* =====================================================
   RESULT EXPENSE
===================================================== */

.financial-analysis-result-item.expense
.financial-analysis-result-amount{

    color:
        var(
            --danger,
            #dc2626
        );

}


/* =====================================================
   ANALYSIS EMPTY
===================================================== */

.financial-analysis-empty{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:90px;

    padding:20px;

    box-sizing:border-box;

    border:1px dashed
        var(
            --border-color,
            #d1d5db
        );

    border-radius:16px;

    background:
        var(
            --surface-secondary,
            #f8fafc
        );

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.4;

    text-align:center;

}


/* =====================================================
   ANALYSIS PERIOD
===================================================== */

.financial-analysis-period{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    width:100%;

    margin-top:18px;

    padding-top:16px;

    border-top:1px solid
        var(
            --border-color,
            #e5e7eb
        );

}


/* =====================================================
   PERIOD LABEL
===================================================== */

.financial-analysis-period label{

    color:var(--text-secondary);

    font-size:13px;

    line-height:1.3;

    font-weight:600;

}


/* =====================================================
   PERIOD SELECT
===================================================== */

#financial-analysis-period-select{

    min-width:120px;

    height:40px;

    padding:
        0 32px 0 12px;

    box-sizing:border-box;

    border:1px solid
        var(
            --border-color,
            #dfe4ec
        );

    border-radius:11px;

    background:
        var(
            --surface,
            #ffffff
        );

    color:var(--text);

    font-size:13px;

    font-weight:600;

    outline:none;

    appearance:auto;

}


/* =====================================================
   PERIOD SELECT : FOCUS
===================================================== */

#financial-analysis-period-select:focus{

    border-color:
        var(
            --primary,
            #2563eb
        );

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.10);

}


/* =====================================================
   DARK MODE
===================================================== */

html[data-theme="dark"]
#summary-financial-analysis-card,
html.dark
#summary-financial-analysis-card{

    background:var(--surface);

}


html[data-theme="dark"]
.financial-analysis-chart-container,
html.dark
.financial-analysis-chart-container,
html[data-theme="dark"]
.financial-analysis-trending,
html.dark
.financial-analysis-trending{

    background:
        rgba(255,255,255,.04);

    border-color:
        rgba(255,255,255,.08);

}


html[data-theme="dark"]
.financial-analysis-search-box,
html.dark
.financial-analysis-search-box{

    background:
        rgba(255,255,255,.04);

    border-color:
        rgba(255,255,255,.08);

}


html[data-theme="dark"]
.financial-analysis-search-box:focus-within,
html.dark
.financial-analysis-search-box:focus-within{

    border-color:
        var(
            --primary,
            #60a5fa
        );

    box-shadow:
        0 0 0 3px
        rgba(96,165,250,.10);

}


html[data-theme="dark"]
.financial-analysis-trending-item,
html.dark
.financial-analysis-trending-item{

    background:var(--surface);

    border-color:
        rgba(255,255,255,.08);

}


html[data-theme="dark"]
.financial-analysis-result-item,
html.dark
.financial-analysis-result-item{

    background:var(--surface);

    border-color:
        rgba(255,255,255,.08);

}


html[data-theme="dark"]
.financial-analysis-empty,
html.dark
.financial-analysis-empty{

    background:
        rgba(255,255,255,.03);

    border-color:
        rgba(255,255,255,.10);

}


html[data-theme="dark"]
#financial-analysis-period-select,
html.dark
#financial-analysis-period-select{

    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.10);

    color:var(--text);

}


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

@media (max-width:600px){

    /* ---------------------------------------------
       OVERVIEW
    --------------------------------------------- */

    #summary-overview-card{

        gap:10px;

        padding:16px 12px;

    }


    .financial-overview-balance{

        padding:20px 18px;

        border-radius:18px;

    }


    .financial-overview-balance-value{

        font-size:27px;

    }


    .financial-overview-monthly{

        gap:10px;

    }


    .financial-overview-item{

        min-height:82px;

        padding:14px 12px;

        border-radius:16px;

    }


    .financial-overview-item span{

        font-size:12px;

    }


    .financial-overview-item strong{

        font-size:16px;

    }


    /* ---------------------------------------------
       FINANCIAL POSITION
    --------------------------------------------- */

    #summary-financial-position-card{

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:10px;

    }


    .financial-position-card{

        gap:12px;

        padding:15px;

        border-radius:16px;

    }


    .financial-position-icon{

        width:38px;

        height:38px;

    }


    .financial-position-emoji{

        width:38px;

        height:38px;

        font-size:32px;

    }


    .financial-position-header{

        gap:8px;

    }


    .financial-position-header strong{

        font-size:15px;

    }


    .financial-position-value{

        font-size:18px;

    }


    .financial-position-last{

        font-size:12px;

    }


    .financial-position-row{

        align-items:flex-start;

        flex-direction:column;

        gap:4px;

    }


    .financial-position-row span{

        font-size:12px;

    }


    .financial-position-row strong{

        font-size:15px;

        text-align:left;

    }


    /* ---------------------------------------------
       DISTRIBUTION
    --------------------------------------------- */

    #summary-distribution-card{

        padding:
            24px 18px 26px;

    }


    #summary-distribution-chart{

        height:280px !important;

        max-height:280px;

        margin-bottom:24px;

    }


    .distribution-group{

        gap:14px;

    }


    .distribution-group-title{

        font-size:15px;

    }


    .distribution-item-header{

        gap:10px;

    }


    .distribution-item-header span,
    .distribution-item-header strong{

        font-size:15px;

    }


    .distribution-bar-track{

        height:8px;

    }


    .distribution-divider{

        margin:16px 0;

    }


    /* ---------------------------------------------
       FINANCIAL ANALYSIS
    --------------------------------------------- */

    #summary-financial-analysis{

        margin-top:28px;

    }


    #summary-financial-analysis-card{

        padding:16px;

        border-radius:18px;

    }


    .financial-analysis-search{

        margin-bottom:14px;

    }


    .financial-analysis-search-box{

        min-height:44px;

        padding:0 12px;

        border-radius:13px;

    }


    #financial-analysis-search-input{

        height:42px;

        font-size:14px;

    }


    /* ---------------------------------------------
       ANALYSIS CONTENT
    --------------------------------------------- */

    .financial-analysis-content{

        grid-template-columns:

            minmax(
                0,
                1fr
            );

        gap:12px;

    }


    .financial-analysis-chart-container,
    .financial-analysis-trending{

        padding:15px;

        border-radius:16px;

    }


    .financial-analysis-chart-wrapper{

        height:240px;

        min-height:240px;

    }


    .financial-analysis-subtitle{

        margin-bottom:10px;

        font-size:14px;

    }


    /* ---------------------------------------------
       TRENDING
    --------------------------------------------- */

    .financial-analysis-trending-list{

        gap:8px;

    }


    .financial-analysis-trending-item{

        padding:11px;

        border-radius:12px;

    }


    .financial-analysis-trending-date{

        font-size:12px;

    }


    .financial-analysis-trending-weekday{

        font-size:10px;

    }


    .financial-analysis-trending-amount{

        font-size:12px;

    }


    /* ---------------------------------------------
       ANALYSIS RESULT
    --------------------------------------------- */

    .financial-analysis-results{

        margin-top:14px;

    }


    .financial-analysis-result-item{

        gap:10px;

        padding:13px;

        border-radius:14px;

    }


    .financial-analysis-result-activity{

        font-size:13px;

    }


    .financial-analysis-result-note{

        font-size:11px;

    }


    .financial-analysis-result-date{

        font-size:10px;

    }


    .financial-analysis-result-amount{

        font-size:13px;

    }


    /* ---------------------------------------------
       ANALYSIS PERIOD
    --------------------------------------------- */

    .financial-analysis-period{

        justify-content:space-between;

        gap:8px;

        margin-top:14px;

        padding-top:14px;

    }


    .financial-analysis-period label{

        font-size:12px;

    }


    #financial-analysis-period-select{

        min-width:105px;

        height:38px;

        padding:
            0 26px 0 10px;

        border-radius:10px;

        font-size:12px;

    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width:360px){

    #summary-financial-analysis-card{

        padding:13px;

    }


    .financial-analysis-chart-container,
    .financial-analysis-trending{

        padding:13px;

    }


    .financial-analysis-chart-wrapper{

        height:220px;

        min-height:220px;

    }


    .financial-analysis-result-item{

        gap:8px;

        padding:12px;

    }


    .financial-analysis-result-activity{

        font-size:12px;

    }


    .financial-analysis-result-amount{

        font-size:12px;

    }


    .financial-analysis-period label{

        font-size:11px;

    }


    #financial-analysis-period-select{

        min-width:96px;

        font-size:11px;

    }

}

/* =====================================================
   FINANCIAL ANALYSIS PAGINATION
===================================================== */

.financial-analysis-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid var(--border-color);

}


.financial-analysis-pagination-button {

    min-height: 36px;

    padding: 0 14px;

    border: 1px solid var(--border-color);

    border-radius: 10px;

    background: var(--surface);

    color: var(--text);

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background-color .2s ease,
        opacity .2s ease,
        transform .2s ease;

}


.financial-analysis-pagination-button:hover:not(:disabled) {

    background: var(--surface-secondary);

}


.financial-analysis-pagination-button:active:not(:disabled) {

    transform: scale(.97);

}


.financial-analysis-pagination-button:disabled {

    opacity: .4;

    cursor: not-allowed;

}


.financial-analysis-pagination-info {

    min-width: 100px;

    text-align: center;

    color: var(--text-secondary);

    font-size: 13px;

}


.financial-analysis-pagination-info strong {

    color: var(--text);

    font-weight: 600;

}


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

@media (max-width: 600px) {

    .financial-analysis-pagination {

        gap: 8px;

    }


    .financial-analysis-pagination-button {

        padding: 0 10px;

        font-size: 12px;

    }


    .financial-analysis-pagination-info {

        min-width: 82px;

        font-size: 12px;

    }

}