:root {

    --background: #f4f6f4;

    --surface: #ffffff;

    --text: #17201b;

    --muted: #737a76;

    --border: #e2e7e3;

    --accent: #315c4a;

    --radius: 18px;

}


* {

    box-sizing: border-box;

}


body {

    margin: 0;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}



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

.dashboard-header {

    background: var(--surface);

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

}


.header-content {

    width:
        min(100% - 32px, 1400px);

    margin:
        auto;

    padding:
        28px 0;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.header-content h1 {

    margin: 0;

    font-size:
        clamp(1.8rem, 4vw, 2.6rem);

    font-weight:
        700;

    letter-spacing:
        -0.04em;

}


.header-content p {

    margin:
        6px 0 0;

    color:
        var(--muted);

}


.connection-status {

    font-size:
        .8rem;

    color:
        var(--muted);

}



/* =====================================================
   MAIN CONTAINER
   ===================================================== */

.dashboard-container {

    width:
        min(100% - 32px, 1400px);

    margin:
        0 auto;

    padding:
        28px 0 50px;

}



/* =====================================================
   FILTERS
   ===================================================== */

.filter-panel {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        16px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    padding:
        20px;

    margin-bottom:
        20px;

}


.filter-group label {

    display:
        block;

    font-size:
        .8rem;

    color:
        var(--muted);

    margin-bottom:
        7px;

}


.filter-group select {

    border-color:
        var(--border);

    border-radius:
        10px;

}



/* =====================================================
   KPI
   ===================================================== */

.kpi-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;

    margin-bottom:
        20px;

}


.kpi-card {

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    padding:
        22px;

}


.kpi-label {

    display:
        block;

    color:
        var(--muted);

    font-size:
        .82rem;

    margin-bottom:
        8px;

}


.kpi-value {

    display:
        block;

    font-size:
        clamp(1.3rem, 3vw, 2rem);

    letter-spacing:
        -0.04em;

}



/* =====================================================
   CHARTS
   ===================================================== */

.charts-grid {

    display:
        grid;

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

    gap:
        20px;

}


.chart-card {

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    padding:
        20px;

}


.chart-large {

    grid-column:
        span 2;

}


.chart-header h2 {

    margin:
        0;

    font-size:
        1rem;

    font-weight:
        650;

}


.chart-header p {

    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        .8rem;

}


.chart-container {

    width:
        100%;

    height:
        360px;

    margin-top:
        10px;

}



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

.position-card {

    margin-top:
        20px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius);

    padding:
        24px;

}


.position-card h2 {

    margin:
        0;

    font-size:
        1rem;

}


.position-card p {

    margin:
        5px 0 20px;

    color:
        var(--muted);

    font-size:
        .8rem;

}


.position-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        16px;

}


.position-item {

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

    border-radius:
        12px;

    padding:
        16px;

}


.position-item span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        .8rem;

    margin-bottom:
        6px;

}


.position-item strong {

    font-size:
        1.3rem;

}



/* =====================================================
   FOOTER
   ===================================================== */

.dashboard-footer {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        .75rem;

    padding:
        18px 4px;

}



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

@media (max-width: 900px) {

    .kpi-grid {

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

    }


    .charts-grid {

        grid-template-columns:
            1fr;

    }


    .chart-large {

        grid-column:
            span 1;

    }

}

/*
@media (max-width: 650px) {
    .dashboard-container {
        width: min(100% - 20px, 1400px);
        padding-top: 18px;
    }

    .header-content {
        width: min(100% - 20px, 1400px);
        display: block;
        padding: 20px 0;
    }

    .connection-status {
        margin-top: 10px;
    }

    .filter-panel {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .kpi-card {
        padding: 16px;
    }

    .chart-card {
        padding: 15px;
    }

    .chart-container {
        height: 300px;
    }

    .position-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-footer {
        display: block;
        line-height: 1.8;
    }

}*/

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

@media (max-width: 650px) {

    body {
        overflow-x: hidden;
    }


    .dashboard-container {

        width: calc(100% - 20px);

        margin: 0 auto;

        padding:
            14px 0 30px;

    }


    /* -------------------------------
       HEADER
       ------------------------------- */

    .header-content {

        width:
            calc(100% - 20px);

        margin:
            0 auto;

        padding:
            18px 0;

    }


    .header-content h1 {

        font-size:
            1.65rem;

    }


    .header-content p {

        font-size:
            .85rem;

        max-width:
            280px;

    }


    .connection-status {

        margin-top:
            8px;

        font-size:
            .75rem;

    }



    /* -------------------------------
       FILTERS
       ------------------------------- */

    .filter-panel {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            12px;

        padding:
            15px;

        margin-bottom:
            14px;

    }


    .filter-group select {

        width:
            100%;

        min-height:
            42px;

    }



    /* -------------------------------
       KPI CARDS
       ------------------------------- */

    .kpi-grid {

        display:
            grid;

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

        gap:
            10px;

        margin-bottom:
            14px;

    }


    .kpi-card {

        min-width:
            0;

        padding:
            15px;

        border-radius:
            14px;

    }


    .kpi-label {

        font-size:
            .72rem;

        white-space:
            nowrap;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

    }


    .kpi-value {

        font-size:
            1.15rem;

        overflow-wrap:
            anywhere;

    }



    /* -------------------------------
       CHART GRID
       ------------------------------- */

    .charts-grid {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .chart-card {

        width:
            100%;

        min-width:
            0;

        padding:
            14px;

        border-radius:
            14px;

        overflow:
            hidden;

    }


    .chart-large {

        grid-column:
            span 1;

    }


    .chart-header h2 {

        font-size:
            .95rem;

    }


    .chart-header p {

        font-size:
            .75rem;

    }


    .chart-container {

        width:
            100%;

        height:
            280px;

        min-width:
            0;

        margin-top:
            5px;

    }



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

    .position-card {

        margin-top:
            14px;

        padding:
            17px;

        border-radius:
            14px;

    }


    .position-grid {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .position-item {

        padding:
            14px;

    }



    /* -------------------------------
       FOOTER
       ------------------------------- */

    .dashboard-footer {

        display:
            flex;

        flex-direction:
            column;

        gap:
            4px;

        padding:
            15px 4px;

        font-size:
            .7rem;

    }

}