.report-page{
    max-width:1300px;
    margin:auto;
    padding:30px;
}

.report-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:25px;
}

.report-header h1{
    font-size:28px;
    font-weight:600;
}

.report-card{
    background:white;
    border-radius:12px;
    padding:24px;
    margin-bottom:25px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.card-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    margin-bottom:20px;
}

.grid-2{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:16px;
}

.grid-3{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:18px;
}

.grid-4{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap:20px;
}

.report-actions{
    display:flex;
    gap:15px;
    margin-top:10px;
}

.btn-search{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:8px;
    background:#0284c7;
    color:white;
    border:none;
    cursor:pointer;
    transition:all .2s ease;
}

.btn-search:hover{
    background:#0369a1;
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.btn-search-disabled{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:8px;
    background-color:#989898;
    color:rgb(0, 0, 0);
    border:none;
    cursor:pointer;
}

.btn-clear{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:8px;
    border:1px solid #ccc;
    background:white;
    cursor:pointer;
    transition:all .2s ease;
}

.btn-clear:hover{
    background:#f5f5f5;
    border-color:#999;
    transform:translateY(-1px);
}

.btn-search:active,
.btn-clear:active{
    transform:translateY(0);
    box-shadow:none;
}

.icon-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}