/* ==========================================================
   REPORTS PAGE
========================================================== */

.reports-page{

    padding:30px;

}

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

.reports-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.reports-header h1{

    color:#fff;

    font-size:32px;

    font-weight:700;

    margin-bottom:6px;

}

.reports-header p{

    color:#94A3B8;

    margin:0;

}

.report-actions{

    display:flex;

    gap:12px;

}

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

.report-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

.report-card{

    background:#17263B;

    border:1px solid #243246;

    border-radius:18px;

    padding:22px;

    transition:.30s;

    position:relative;

    overflow:hidden;

}

.report-card:hover{

    transform:translateY(-5px);

    border-color:#22C55E;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.report-card span{

    display:block;

    color:#94A3B8;

    font-size:14px;

    margin-bottom:12px;

}

.report-card h2{

    margin:0;

    color:#fff;

    font-size:30px;

    font-weight:700;

}

.green{

    color:#22C55E!important;

}

.red{

    color:#EF4444!important;

}

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

.filter-card{

    background:#17263B;

    border:1px solid #243246;

    border-radius:20px;

    padding:25px;

    margin-bottom:30px;

}

.filter-grid{

    display:grid;

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

    gap:18px;

    align-items:end;

}

.filter-grid label{

    display:block;

    color:#CBD5E1;

    margin-bottom:8px;

    font-size:14px;

    font-weight:500;

}

.align-end{

    display:flex;

    align-items:flex-end;

}

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

.reports-chart-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:30px;

}

.chart-card{

    background:#17263B;

    border:1px solid #243246;

    border-radius:20px;

    overflow:hidden;

}

.chart-card .card-header{

    background:#1D2E46;

    padding:18px 22px;

    border-bottom:1px solid #243246;

}

.chart-card .card-header h3{

    color:#fff;

    margin:0;

    font-size:18px;

    font-weight:600;

}

.chart-card div[id$="Chart"]{

    min-height:340px;

    padding:25px;

}

/* ==========================================================
   AI REPORT
========================================================== */

.report-ai{

    background:#17263B;

    border:1px solid #243246;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:30px;

}

.report-ai-header{

    background:linear-gradient(135deg,#22C55E,#16A34A);

    color:#fff;

    padding:18px 24px;

    font-size:20px;

    font-weight:600;

}

#aiReport{

    padding:30px;

    color:#fff;

}

.loading-box{

    text-align:center;

    padding:50px;

}

.loading-box p{

    margin-top:15px;

    color:#CBD5E1;

}

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

.table-card{

    background:#17263B;

    border:1px solid #243246;

    border-radius:20px;

    overflow:hidden;

}

.table-card .card-header{

    background:#1D2E46;

    padding:20px;

}

.table-card h3{

    margin:0;

    color:#fff;

}

.table{

    margin:0;

    color:#fff;

}

.table thead{

    background:#101B2E;

}

.table th{

    color:#CBD5E1;

    border:none;

    padding:18px;

    font-weight:600;

}

.table td{

    border-color:#243246;

    padding:18px;

    vertical-align:middle;

}

.table tbody tr{

    transition:.25s;

}

.table tbody tr:hover{

    background:#22344A;

}

/* ==========================================================
   BADGES
========================================================== */

.badge-profit{

    background:#22C55E;

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

}

.badge-loss{

    background:#EF4444;

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

}

.badge-breakeven{

    background:#F59E0B;

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

}

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

@media(max-width:1400px){

.report-grid{

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

}

}

@media(max-width:1100px){

.filter-grid{

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

}

.reports-chart-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.reports-page{

padding:20px;

}

.report-grid{

grid-template-columns:1fr;

}

.filter-grid{

grid-template-columns:1fr;

}

.reports-header{

flex-direction:column;

align-items:flex-start;

}

.report-actions{

width:100%;

flex-direction:column;

}

.report-actions .btn{

width:100%;

}

.chart-card div[id$="Chart"]{

min-height:300px;

}

}