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

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:20px;
}

.kpi-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;
    padding:18px;

    transition:.25s;
}

.kpi-card:hover{
    background:rgba(255,255,255,.06);
}

.kpi-card-label{
    font-size:13px;
    opacity:.7;
    margin-bottom:8px;
}

.kpi-card-value{
    font-size:24px;
    font-weight:700;
}

/* =========================================================
   INPUT GROUPS
========================================================= */

.input-group{
    margin-bottom:16px;
}

.input-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    opacity:.85;
}

.input-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* =========================================================
   SECTION TITLES
========================================================= */

.section-title{
    margin-bottom:15px;
    font-size:18px;
}

/* =========================================================
   BREAKDOWN TABLE
========================================================= */

.breakdown-grid{
    display:table;
    width:100%;
    border-collapse:collapse;

    border-radius:12px;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);
}

.breakdown-row{
    display:table-row;
}

.breakdown-row span,
.breakdown-row strong{

    display:table-cell;
    padding:14px 16px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.breakdown-row strong{
    text-align:right;
}

.breakdown-row:last-child span,
.breakdown-row:last-child strong{
    border-bottom:none;
}

.breakdown-row:hover{
    background:rgba(255,255,255,.04);
}

/* =========================================================
   SCENARIO BUTTONS
========================================================= */

.scenario-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.scenario-btn{

    padding:12px;

    border:none;
    border-radius:10px;

    cursor:pointer;

    background:#1f1f1f;
    color:white;

    transition:.2s;
}

.scenario-btn:hover{
    background:#4f46e5;
}

.scenario-btn.active{
    background:#4f46e5;
}

/* =========================================================
   CHART CARD
========================================================= */

.chart-wrapper{

    width:100%;
    height:450px;

    position:relative;
}

.chart-wrapper canvas{
    width:100% !important;
    height:100% !important;
}

/* =========================================================
   CASHFLOW TABLE
========================================================= */

.cashflow-wrapper {
    width: 100%;
    max-height: 500px; /* vertical limit */
    overflow: auto; /* both X and Y scroll */
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
}

.cashflow-table{

    width:100%;
    border-collapse:collapse;
}

.cashflow-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(20,20,20,0.95);
    backdrop-filter: blur(10px);
}

.cashflow-table th,
.cashflow-table td{

    padding:12px;
    text-align:left;

    border-bottom:1px solid rgba(255,255,255,.06);
}

.cashflow-table th{

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

/* =========================================================
   ACTION BUTTONS
========================================================= */

.action-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:20px;
}

.export-btn{
    cursor:pointer;
}

.export-danger{
    background:#dc2626;
    color:white;
}

/* =========================================================
   FORMULA SECTION
========================================================= */

.formula-section{

    margin-top:20px;
}

.formula-box-large{

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

    border-radius:12px;
    padding:20px;

    border:1px solid rgba(255,255,255,.08);
}

.formula-line{
    margin:10px 0;
    font-family:monospace;
    font-size:15px;
}

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

.modal{

    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.6);

    z-index:999999;
}

.modal.hidden{
    display:none;
}

.modal-box{

    width:350px;

    background:#111;
    color:white;

    padding:24px;

    border-radius:14px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.modal-actions{

    display:flex;
    gap:10px;
    margin-top:15px;
}

.modal-actions button{
    flex:1;
}

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

@media(max-width:900px){

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

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

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

    .input-row{
        grid-template-columns:1fr;
    }
}

@media (max-width: 768px) {

    .cashflow-wrapper {
        max-height: 400px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cashflow-table {
        min-width: 700px; /* forces horizontal scroll instead of squishing */
    }
}